@@ -564,6 +645,16 @@ Vue.component('radius-users', {
routerData: {},
routerDevice: null,
pingResult: null,
+ speedtestLoading: false,
+ speedtestResult: null,
+ speedtestHistory: [],
+ speedtestHasStarted: false,
+ showPingModal: false,
+ showSpeedtestModal: false,
+ showRemoteAccessModal: false,
+ remoteAccessLoading: false,
+ remoteAccessResult: null,
+ remoteAccessStep: '',
showParameterModal: false,
parameterName: '',
showSetParameterModal: false,
@@ -972,6 +1063,8 @@ Vue.component('radius-users', {
this.routerData = item;
this.routerDevice = null;
this.pingResult = null;
+ this.speedtestResult = null;
+ this.speedtestLoading = false;
this.managementUsername = '';
try {
@@ -986,8 +1079,7 @@ Vue.component('radius-users', {
const deviceData = await deviceResponse.json();
if (deviceData.success) {
this.routerDevice = deviceData;
- // Automatically fetch management username
- await this.fetchManagementUsername();
+ // Management Username removed
}
}
}
@@ -1004,6 +1096,8 @@ Vue.component('radius-users', {
this.routerData = {};
this.routerDevice = null;
this.pingResult = null;
+ this.speedtestResult = null;
+ this.speedtestLoading = false;
this.showParameterModal = false;
this.showSetParameterModal = false;
this.parameterName = '';
@@ -1070,6 +1164,7 @@ Vue.component('radius-users', {
const pingIp = this.routerDevice.managementIp || this.routerDevice.ip;
if (!pingIp) return;
+ this.showPingModal = true; // Open modal immediately
this.routerActionLoading = true;
this.pingResult = null;
try {
@@ -1151,14 +1246,9 @@ Vue.component('radius-users', {
}
this.routerActionLoading = false;
},
- async setParameter() {
- if (!this.routerDevice || !this.routerDevice.deviceId || !this.setParameterName || !this.setParameterValue) return;
-
- this.routerActionLoading = true;
+ async setParameterValues(parameters) {
+ if (!this.routerDevice || !this.routerDevice.deviceId || !parameters) return false;
try {
- const parameters = {};
- parameters[this.setParameterName] = this.setParameterValue;
-
const response = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsSetParameters`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
@@ -1167,73 +1257,272 @@ Vue.component('radius-users', {
parameters: parameters
})
});
-
- if (response.ok) {
- const data = await response.json();
- if (data.success) {
- window.notify('success', 'Parameter erfolgreich gesetzt');
- this.showSetParameterModal = false;
- this.setParameterName = '';
- this.setParameterValue = '';
- } else {
- window.notify('error', data.message || 'Fehler beim Setzen des Parameters');
- }
- }
+ return response.ok && (await response.json()).success;
} catch (e) {
- console.error('Error setting parameter:', e);
- window.notify('error', 'Fehler beim Setzen des Parameters');
+ console.error('Error setting parameters:', e);
+ return false;
+ }
+ },
+ async setParameter() {
+ if (!this.routerDevice || !this.routerDevice.deviceId || !this.setParameterName || !this.setParameterValue) return;
+
+ this.routerActionLoading = true;
+ const parameters = {};
+ parameters[this.setParameterName] = this.setParameterValue;
+
+ if (await this.setParameterValues(parameters)) {
+ window.notify('success', 'Parameter erfolgreich gesetzt');
+ this.showSetParameterModal = false;
+ this.setParameterName = '';
+ this.setParameterValue = '';
+ } else {
+ window.notify('error', 'Fehler beim Setzen des Parameters');
}
this.routerActionLoading = false;
},
- async fetchManagementUsername() {
+ async runSpeedtest() {
if (!this.routerDevice || !this.routerDevice.deviceId) return;
-
- this.loadingUsername = true;
+ this.showSpeedtestModal = true; // Open modal immediately
+ this.speedtestLoading = true;
+ this.speedtestResult = null;
+ this.speedtestHistory = [];
+ this.speedtestHasStarted = false;
+
try {
- const response = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetParameters`, {
- method: 'POST',
- headers: {'Content-Type': 'application/json'},
- body: JSON.stringify({
- deviceId: this.routerDevice.deviceId,
- parameters: ['InternetGatewayDevice.User.1.Username']
- })
+ // 1. Set CPE Parameters
+ const params = {
+ 'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.Start': 1,
+ 'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.StartBidirect': 1,
+ 'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.WANAccess': true
+ };
+
+ if (!await this.setParameterValues(params)) {
+ throw new Error("Konnte Speedtest-Parameter nicht setzen");
+ }
+
+ // 2. Trigger Speedtest Server
+ const ip = this.routerDevice.ip; // External IP
+ if (!ip) throw new Error("Keine IP-Adresse gefunden");
+
+ const stRes = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRunSpeedtest`, {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({ ip: ip })
});
-
- if (response.ok) {
- const data = await response.json();
- if (data.success) {
- window.notify('success', 'Username-Abfrage gestartet. Bitte warten Sie einen Moment und klicken Sie erneut auf Aktualisieren.');
-
- // Wait a bit and then fetch the device data to get the updated value
- setTimeout(async () => {
- try {
- const deviceResponse = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetDeviceInfo?deviceId=${encodeURIComponent(this.routerDevice.deviceId)}`);
- if (deviceResponse.ok) {
- const deviceInfo = await deviceResponse.json();
- if (deviceInfo.success && deviceInfo.fullData) {
- // Extract username from device data
- const usernameData = deviceInfo.fullData['InternetGatewayDevice.User.1.Username'];
- if (usernameData && usernameData.value && usernameData.value[0]) {
- this.managementUsername = usernameData.value[0];
+
+ if (!stRes.ok) {
+ const err = await stRes.json();
+ throw new Error(err.message || "Speedtest-Server Fehler");
+ }
+
+ // 3. Poll for result
+ this.pollSpeedtestResult();
+
+ } catch (e) {
+ window.notify('error', e.message);
+ this.speedtestLoading = false;
+ }
+ },
+ async pollSpeedtestResult() {
+ let attempts = 0;
+ const maxAttempts = 240; // 2 min
+ const resultParam = 'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.Result';
+
+ const poll = async () => {
+ if (!this.showSpeedtestModal) return;
+ if (attempts >= maxAttempts) {
+ this.speedtestLoading = false;
+ window.notify('error', 'Speedtest Zeitüberschreitung');
+ return;
+ }
+ attempts++;
+
+ try {
+ await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetParameters`, {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({
+ deviceId: this.routerDevice.deviceId,
+ parameters: [resultParam]
+ })
+ });
+
+ setTimeout(async () => {
+ try {
+ const val = await this.fetchDeviceParameterValue(resultParam);
+ if (val && typeof val === 'string' && val.includes("BPS")) {
+ const parsed = this.parseSpeedtestResult(val);
+ if (parsed) {
+ this.speedtestHistory.push(parsed);
+ this.$nextTick(() => {
+ if (this.$refs.speedtestBottom) {
+ this.$refs.speedtestBottom.scrollIntoView({ behavior: 'smooth' });
}
+ });
+
+ if (parsed.bps > 0) this.speedtestHasStarted = true;
+
+ if (this.speedtestHasStarted && parsed.bps === 0) {
+ this.speedtestLoading = false;
+ window.notify('success', 'Speedtest abgeschlossen');
+ return;
}
- }
- } catch (e) {
- console.error('Error fetching updated device info:', e);
- } finally {
- this.loadingUsername = false;
+ }
}
- }, 3000);
- } else {
- this.loadingUsername = false;
- window.notify('error', data.message || 'Fehler beim Lesen des Usernames');
+ } catch(e) { console.error(e); }
+
+ if (this.speedtestLoading) setTimeout(poll, 500);
+ }, 500);
+
+ } catch (e) {
+ console.error(e);
+ if (this.speedtestLoading) setTimeout(poll, 500);
+ }
+ };
+ poll();
+ },
+ async fetchDeviceParameterValue(paramName) {
+ if (!this.routerDevice || !this.routerDevice.deviceId) return null;
+ try {
+ const deviceResponse = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetDeviceInfo?deviceId=${encodeURIComponent(this.routerDevice.deviceId)}`);
+ if (deviceResponse.ok) {
+ const deviceInfo = await deviceResponse.json();
+ if (deviceInfo.success && deviceInfo.fullData) {
+ const paramData = deviceInfo.fullData[paramName];
+ if (paramData && paramData.value && paramData.value[0]) {
+ return paramData.value[0];
+ }
}
}
} catch (e) {
- console.error('Error fetching management username:', e);
- window.notify('error', 'Fehler beim Lesen des Usernames');
- this.loadingUsername = false;
+ console.error('Error fetching parameter value:', e);
}
+ return null;
+ },
+ formatBits(bps) {
+ if (!bps) return '0 Mbit/s';
+ // 1 Mbit = 1,000,000 bits (Standard network speed unit)
+ const mbits = bps / 1000000;
+ return mbits.toFixed(2) + ' Mbit/s';
+ },
+ parseSpeedtestResult(raw) {
+ try {
+ const bpsMatch = raw.match(/BPS\s+(\d+)/);
+ const bytesMatch = raw.match(/Bytes\s+(\d+)/);
+ const packetsMatch = raw.match(/Packets\s+(\d+)/);
+
+ if (bpsMatch) {
+ const bps = parseInt(bpsMatch[1]);
+ const bytes = bytesMatch ? parseInt(bytesMatch[1]) : 0;
+ const packets = packetsMatch ? parseInt(packetsMatch[1]) : 0;
+
+ return {
+ raw: raw,
+ bps: bps,
+ bpsFormatted: this.formatBits(bps),
+ bytes: bytes,
+ bytesFormatted: window.RadiusUtils.formatBytes(bytes),
+ packets: packets
+ };
+ }
+ } catch (e) {
+ console.error("Error parsing speedtest result", e);
+ }
+ return null;
+ },
+ generatePassword(length) {
+ const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+ let ret = "";
+ for (let i = 0; i < length; ++i) {
+ ret += chars.charAt(Math.floor(Math.random() * chars.length));
+ }
+ return ret;
+ },
+ async runRemoteAccess() {
+ if (!this.routerDevice || !this.routerDevice.deviceId) return;
+
+ this.showRemoteAccessModal = true;
+ this.remoteAccessLoading = true;
+ this.remoteAccessStep = 'Konfiguriere Parameter...';
+ this.remoteAccessResult = null;
+
+ const password = this.generatePassword(12);
+ const timestamp = Math.floor(Date.now() / 1000).toString();
+
+ try {
+ const params = {
+ 'InternetGatewayDevice.User.1.Enable': 1,
+ 'InternetGatewayDevice.User.1.Password': password,
+ 'InternetGatewayDevice.User.1.RemoteAccessCapable': 1,
+ 'InternetGatewayDevice.User.1.Username': timestamp
+ };
+
+ const success = await this.setParameterValues(params);
+ if (!success) throw new Error("Fehler beim Setzen der Parameter");
+
+ this.remoteAccessStep = 'Warte auf TR069-User...';
+ this.pollRemoteUsername(password);
+
+ } catch (e) {
+ this.remoteAccessLoading = false;
+ window.notify('error', e.message);
+ }
+ },
+ async pollRemoteUsername(password) {
+ let attempts = 0;
+ const maxAttempts = 60; // 60 * 2s = 120s
+ const userParam = 'InternetGatewayDevice.User.1.Username';
+
+ const poll = async () => {
+ if (!this.showRemoteAccessModal) return;
+ if (attempts >= maxAttempts) {
+ this.remoteAccessLoading = false;
+ window.notify('error', 'Remote Access Zeitüberschreitung');
+ return;
+ }
+ attempts++;
+
+ try {
+ // Refresh param
+ await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetParameters`, {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({
+ deviceId: this.routerDevice.deviceId,
+ parameters: [userParam]
+ })
+ });
+
+ setTimeout(async () => {
+ try {
+ const val = await this.fetchDeviceParameterValue(userParam);
+ if (val && typeof val === 'string' && val.startsWith('TR069-')) {
+ this.remoteAccessResult = {
+ link: `https://${this.routerDevice.ip}:9090`,
+ username: val,
+ password: password
+ };
+ this.remoteAccessLoading = false;
+ return;
+ }
+ } catch(e) { console.error(e); }
+
+ if (this.remoteAccessLoading) setTimeout(poll, 2000);
+ }, 2000);
+
+ } catch (e) {
+ console.error(e);
+ if (this.remoteAccessLoading) setTimeout(poll, 2000);
+ }
+ };
+ poll();
+ },
+ async fetchManagementUsername() {
+ // Kept as requested method, but removed call in openRouterManagement if no longer needed
+ // User asked to remove "row", usually implies logic removal too to save resources?
+ // But I will keep the method definition just in case, but I already removed the UI row.
+ // Since the user asked to remove the "Row", I removed the UI part.
+ // The automatic fetching was in openRouterManagement, I removed it there too.
}
}
});
diff --git a/public/js/pages/WorkorderMphAdmin/WorkorderMphAdmin.js b/public/js/pages/WorkorderMphAdmin/WorkorderMphAdmin.js
index 1362210ad..44cff87af 100644
--- a/public/js/pages/WorkorderMphAdmin/WorkorderMphAdmin.js
+++ b/public/js/pages/WorkorderMphAdmin/WorkorderMphAdmin.js
@@ -7,7 +7,6 @@ Vue.component('workorder-mph-admin', {
Adresse: {{ row.street }} {{ row.hausnummer }}/{{ row.stiege }}
Ort: {{ row.plz }} {{ row.city }}
-
Wohneinheiten: {{ row.wohneinheitCount }}
@@ -76,18 +75,27 @@ Vue.component('workorder-mph-admin', {
{{ formatDate(row.appointmentDate, true) }}
-
+
+
+
@@ -234,4 +242,4 @@ Vue.component('workorder-mph-admin', {
}
}
}
-});
+});
\ No newline at end of file
diff --git a/public/js/pages/WorkorderMphBase/WorkorderMphBase.css b/public/js/pages/WorkorderMphBase/WorkorderMphBase.css
index ea0d8fdc8..d6ab6ec99 100644
--- a/public/js/pages/WorkorderMphBase/WorkorderMphBase.css
+++ b/public/js/pages/WorkorderMphBase/WorkorderMphBase.css
@@ -34,10 +34,47 @@
/*
* Wohneinheit Manager - Dense Table Layout
*/
+.wohneinheit-manager-container {
+ min-height: 500px;
+ max-height: 800px;
+ overflow-y: auto;
+ border-bottom: 1px solid #dee2e6;
+}
+
+.wohneinheit-manager .we-splice .we-splice-checkbox .checkmark:after {
+ left: 5px;
+ top: 1px;
+}
+
.wohneinheit-manager .we-table {
display: table;
width: 100%;
border-collapse: collapse;
+ table-layout: fixed;
+}
+
+.wohneinheit-manager .we-header {
+ display: table-header-group;
+}
+
+.wohneinheit-manager .we-header-row {
+ display: table-row;
+ background-color: #f8f9fa;
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.wohneinheit-manager .we-header .we-cell {
+ display: table-cell;
+ padding: 8px 6px;
+ color: #495057;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.3px;
+ border-bottom: 2px solid #dee2e6;
+ background-color: #f8f9fa; /* Needed for sticky */
}
.wohneinheit-manager .we-row {
@@ -50,60 +87,63 @@
background-color: #f8f9fa;
}
-.wohneinheit-manager .we-cell {
- display: table-cell;
- padding: 8px 12px;
- vertical-align: middle;
+.wohneinheit-manager .we-row.locked-row {
+ background-color: #e7f5ff;
}
-.wohneinheit-manager .we-bezeichner {
- width: 20%;
- font-size: 0.9rem;
+.wohneinheit-manager .we-row.locked-row:hover {
+ background-color: #d0ebff;
+}
+
+.wohneinheit-manager .we-cell {
+ display: table-cell;
+ padding: 6px 6px;
+ vertical-align: top;
+ font-size: 0.85rem;
+}
+
+.wohneinheit-manager .we-zusatz {
+ width: 30%;
+}
+
+.wohneinheit-manager .we-tuer {
+ width: 15%;
}
.wohneinheit-manager .we-status {
- width: 18%;
+ width: 20%;
}
.wohneinheit-manager .we-splice {
width: 12%;
- padding: 4px 8px;
-}
-
-.wohneinheit-manager .we-note {
- width: 35%;
-}
-
-.wohneinheit-manager .we-actions {
- width: 15%;
- text-align: right;
-}
-
-.wohneinheit-manager .we-splice .custom-checkbox-item {
- padding: 4px;
- justify-content: center;
- flex-direction: column;
- height: auto;
text-align: center;
}
-.wohneinheit-manager .we-splice .custom-checkbox-item .checkmark {
- margin-right: 0;
- margin-bottom: 2px;
+.wohneinheit-manager .we-documents {
+ width: 12%;
+ text-align: center;
+}
+
+.wohneinheit-manager .we-actions {
+ width: 8%;
+ text-align: center;
+}
+
+/* Input Sizing for Dense View */
+.wohneinheit-manager .form-control-sm {
+ height: calc(1.4em + 0.5rem + 2px);
+ padding: 0.25rem 0.5rem;
+ font-size: 0.8rem;
+}
+
+.wohneinheit-manager .we-splice .we-splice-checkbox .checkmark {
width: 18px;
height: 18px;
}
-.wohneinheit-manager .we-splice .custom-checkbox-item .checkbox-label {
- font-size: 0.7rem;
- line-height: 1;
-}
-
-.contact-info {
- font-size: 0.85rem;
- margin-top: 4px;
- padding-left: 4px;
- border-left: 2px solid #007bff;
+.wohneinheit-manager .badge {
+ font-size: 0.65rem;
+ padding: 2px 4px;
}
.workorder-mph-button {
@@ -111,39 +151,15 @@
}
/*
- * Custom Checkboxes - Compact & Beautiful
+ * Custom Checkboxes - Compact
*/
-.custom-checkboxes-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: 8px 16px;
-}
-
.custom-checkbox-item {
display: flex;
align-items: center;
- padding: 8px 12px;
- background: #f8f9fa;
- border: 1px solid #dee2e6;
- border-radius: 6px;
cursor: pointer;
- transition: all 0.2s ease;
- margin: 0;
user-select: none;
}
-.custom-checkbox-item:hover:not(.disabled) {
- background: #e9ecef;
- border-color: #007bff;
- transform: translateY(-1px);
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.custom-checkbox-item.disabled {
- opacity: 0.6;
- cursor: not-allowed;
-}
-
.custom-checkbox-item input[type="checkbox"] {
position: absolute;
opacity: 0;
@@ -157,8 +173,7 @@
background-color: #fff;
border: 2px solid #adb5bd;
border-radius: 4px;
- margin-right: 10px;
- flex-shrink: 0;
+ margin-right: 0;
transition: all 0.2s ease;
}
@@ -184,50 +199,255 @@
display: block;
}
-.custom-checkbox-item .checkbox-label {
- font-size: 0.9rem;
- font-weight: 500;
- color: #495057;
-}
-
-.custom-checkbox-item input[type="checkbox"]:checked ~ .checkbox-label {
- color: #28a745;
-}
-
/*
- * Required Documents Checklist
+ * Expanded View Layout
*/
-.required-docs-checklist {
- background: #f8f9fa;
- border-radius: 6px;
- padding: 8px;
+.workorder-mph-expanded-wrapper {
+ background: #f1f3f5;
+ padding: 16px;
+ border-radius: 8px;
+ margin: -8px;
}
-.doc-check-item {
- display: flex;
- align-items: center;
- padding: 6px 10px;
- margin-bottom: 4px;
+.workorder-mph-expanded-wrapper .row.g-2 {
+ margin-right: -0.5rem;
+ margin-left: -0.5rem;
+}
+
+.workorder-mph-expanded-wrapper .row.g-2 > .col,
+.workorder-mph-expanded-wrapper .row.g-2 > [class*="col-"] {
+ padding-right: 0.5rem;
+ padding-left: 0.5rem;
+}
+
+/* Card Styling */
+.workorder-mph-card {
background: white;
- border-radius: 4px;
- font-size: 0.9rem;
- gap: 10px;
+ border: 1px solid #dee2e6;
+ border-radius: 6px;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+ margin-bottom: 16px;
+ display: flex;
+ flex-direction: column;
}
-.doc-check-item:last-child {
+.workorder-mph-card:last-child {
margin-bottom: 0;
}
-.doc-check-item i:first-child {
- width: 20px;
- text-align: center;
+.workorder-mph-card-header {
+ padding: 8px 12px;
+ background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+ border-bottom: 1px solid #e9ecef;
+ font-weight: 600;
+ font-size: 0.85rem;
+ color: #495057;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start; /* Changed from space-between */
}
-.doc-check-item span {
- flex: 1;
- font-weight: 500;
-}
-
-.doc-check-item .ml-auto {
+.workorder-mph-card-header > div:last-child,
+.workorder-mph-card-header > span:last-child:not(:first-child) {
margin-left: auto;
}
+
+/* Drag and Drop Zone */
+.mph-drop-zone {
+ border: 2px dashed #ced4da;
+ border-radius: 6px;
+ padding: 16px;
+ text-align: center;
+ background: #f8f9fa;
+ transition: all 0.2s ease;
+ cursor: pointer;
+ position: relative;
+ min-height: 100px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.mph-drop-zone:hover,
+.mph-drop-zone.dragging {
+ background: #e9ecef;
+ border-color: #007bff;
+}
+
+.mph-drop-zone input[type="file"] {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ z-index: 10;
+}
+
+.mph-drop-zone-icon {
+ font-size: 1.8rem;
+ color: #adb5bd;
+ margin-bottom: 8px;
+ transition: color 0.2s;
+}
+
+.mph-drop-zone:hover .mph-drop-zone-icon {
+ color: #007bff;
+}
+
+.mph-drop-zone-text {
+ color: #495057;
+ font-weight: 500;
+ font-size: 0.85rem;
+}
+
+.mph-drop-zone-hint {
+ color: #6c757d;
+ font-size: 0.75rem;
+}
+
+.mph-file-list {
+ margin-top: 10px;
+ text-align: left;
+ width: 100%;
+}
+
+.mph-file-item {
+ display: flex;
+ align-items: center;
+ padding: 6px 10px;
+ background: white;
+ border: 1px solid #dee2e6;
+ border-radius: 4px;
+ margin-bottom: 4px;
+ font-size: 0.85rem;
+}
+
+.mph-file-item:last-child {
+ margin-bottom: 0;
+}
+
+.mph-file-item .remove-file {
+ margin-left: auto;
+ color: #dc3545;
+ cursor: pointer;
+ padding: 2px 6px;
+}
+
+.mph-file-item .remove-file:hover {
+ background: #ffe3e3;
+ border-radius: 4px;
+}
+
+.workorder-mph-card-header i {
+ margin-right: 8px;
+ color: #6c757d;
+}
+
+.workorder-mph-card-body {
+ padding: 12px;
+ flex: 1;
+}
+
+.workorder-mph-card-body-compact {
+ padding: 8px;
+}
+
+/* Documentation Checkboxes - Vertical List for Side Panel */
+.mph-checkbox-vertical {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.mph-checkbox-item {
+ display: flex;
+ align-items: center;
+ padding: 6px 8px;
+ background: #f8f9fa;
+ border: 1px solid #e9ecef;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.mph-checkbox-item:hover:not(.disabled) {
+ background: #e9ecef;
+ border-color: #ced4da;
+}
+
+.mph-checkbox-item .checkmark {
+ width: 16px;
+ height: 16px;
+ border-radius: 3px;
+ margin-right: 8px;
+}
+
+.mph-checkbox-item .checkmark:after {
+ left: 4px;
+ top: 0px;
+ width: 4px;
+ height: 8px;
+}
+
+.mph-checkbox-item .label {
+ font-size: 0.8rem;
+ line-height: 1.2;
+}
+
+/* Details Stack */
+.mph-details-stack {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+/* Admin Review Checklist */
+.mph-doc-checklist {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.mph-doc-check-item {
+ display: flex;
+ align-items: center;
+ padding: 4px 8px;
+ background: #f8f9fa;
+ border-radius: 4px;
+ font-size: 0.8rem;
+ border: 1px solid transparent;
+}
+
+.mph-doc-check-item.has-doc {
+ background-color: #f0fff4;
+ border-color: #c3e6cb;
+}
+
+/* Journal List */
+.mph-journal-list {
+ max-height: 200px;
+ overflow-y: auto;
+ margin: -12px;
+}
+
+.mph-journal-item {
+ padding: 8px 12px;
+ border-bottom: 1px solid #f1f3f5;
+ font-size: 0.8rem;
+}
+
+.mph-journal-item-header {
+ font-size: 0.75rem;
+ color: #868e96;
+ margin-bottom: 2px;
+}
+
+/* File Gallery Adjustments */
+.mph-docs-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 8px;
+}
\ No newline at end of file
diff --git a/public/js/pages/WorkorderMphBase/WorkorderMphBase.js b/public/js/pages/WorkorderMphBase/WorkorderMphBase.js
index 162b97403..b5855b620 100644
--- a/public/js/pages/WorkorderMphBase/WorkorderMphBase.js
+++ b/public/js/pages/WorkorderMphBase/WorkorderMphBase.js
@@ -1,6 +1,6 @@
// WorkorderMphBase.js - Shared components for WorkorderMph module
-// Traffic light component (reused from WorkorderBase)
+// Traffic light component
Vue.component('traffic-light-mph', {
props: ['deadline', 'status'],
computed: {
@@ -19,6 +19,49 @@ Vue.component('traffic-light-mph', {
template: `
●`
});
+// Data Provider Component
+Vue.component('workorder-mph-data-provider', {
+ props: {
+ workorderMphId: { type: [Number, String], required: true }
+ },
+ data: () => ({
+ loading: true,
+ docs: [],
+ journals: []
+ }),
+ methods: {
+ async fetchData() {
+ this.loading = true;
+ try {
+ // Try to detect context (Admin or Company) based on URL or guess
+ const isCompany = window.location.pathname.includes('Company');
+ const basePath = isCompany ? '/WorkorderMphCompany' : '/WorkorderMphAdmin';
+
+ const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}${basePath}/getDocumentation`, {
+ params: { workorderMphId: this.workorderMphId }
+ });
+ this.docs = data.docs || [];
+ this.journals = data.journals || [];
+ } catch (e) {
+ console.error("Failed to fetch data", e);
+ } finally {
+ this.loading = false;
+ }
+ }
+ },
+ mounted() {
+ this.fetchData();
+ },
+ render() {
+ return this.$scopedSlots.default({
+ loading: this.loading,
+ docs: this.docs,
+ journals: this.journals,
+ refresh: this.fetchData
+ });
+ }
+});
+
// Wohneinheit Status Manager Component
Vue.component('wohneinheit-status-manager', {
props: {
@@ -26,73 +69,128 @@ Vue.component('wohneinheit-status-manager', {
isAdmin: { type: Boolean, default: false }
},
template: `
-
-
-
-
-
- Keine Wohneinheiten gefunden.
+
+