diff --git a/application/Cpeprovisioning/CpeprovisioningController.php b/application/Cpeprovisioning/CpeprovisioningController.php index cadbffb81..ac5b8a544 100644 --- a/application/Cpeprovisioning/CpeprovisioningController.php +++ b/application/Cpeprovisioning/CpeprovisioningController.php @@ -3,6 +3,10 @@ class CpeprovisioningController extends mfBaseController { protected function init() { + // disable error display for all requests to avoid information leakage + ini_set('display_errors', '0'); + error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING); + if (defined('TT_CPE_PROV_ALLOW_COUNTS_IP') && in_array($_SERVER['REMOTE_ADDR'], TT_CPE_PROV_ALLOW_COUNTS_IP) && !mfLoginController::isLoggedIn()) { @@ -482,6 +486,8 @@ class CpeprovisioningController extends mfBaseController 'id' => $product->id, 'order_id' => $product->order_id, 'termination_id' => $product->termination_id, 'orderproduct_id' => $product->id, 'network' => $term->building->network->name ?? "{$order->owner->zip} {$order->owner->city}", 'spin' => $order->owner->spin, 'customer' => $order->owner->getCompanyOrName(), + 'owner_email' => $order->owner->email, + 'owner_phone' => $order->owner->phone, 'product_name' => $product->product->name, 'product_code' => $term->code ?? '', 'access_type' => $attrs['bras_type']->value, 'access_type_down' => $attrs["bw_down"]->value, @@ -557,9 +563,12 @@ class CpeprovisioningController extends mfBaseController ], "ROUTER_SHIPPING_DATA" => [ "TP-Link Archer C80" => ["weight" => 1, "length" => 35, "width" => 24, "height" => 8], + "FritzBox 5530" => ["weight" => 1, "length" => 27, "width" => 19, "height" => 7], + "FritzBox 4050" => ["weight" => 1, "length" => 27, "width" => 19, "height" => 7], + "FritzBox 7690" => ["weight" => 1, "length" => 27, "width" => 19, "height" => 7], "FritzBox 4040" => ["weight" => 1, "length" => 30, "width" => 24, "height" => 7], - "FritzBox 7530" => ["weight" => 1, "length" => 26, "width" => 19, "height" => 7], - "FritzBox 7590" => ["weight" => 1, "length" => 30, "width" => 24, "height" => 7], + "FritzBox 7530" => ["weight" => 1, "length" => 27, "width" => 19, "height" => 7], + "FritzBox 7590" => ["weight" => 1, "length" => 27, "width" => 19, "height" => 7], "FritzBox 6490 Cable" => ["weight" => 1, "length" => 30, "width" => 26, "height" => 8] ] ] diff --git a/public/js/pages/Cpeprovisioning/Cpeprovisioning.css b/public/js/pages/Cpeprovisioning/Cpeprovisioning.css index 83fad4933..940002eea 100644 --- a/public/js/pages/Cpeprovisioning/Cpeprovisioning.css +++ b/public/js/pages/Cpeprovisioning/Cpeprovisioning.css @@ -1,159 +1,156 @@ /* Cpeprovisioning.css */ - -.cpe-provisioning-page .filter-card { - margin-bottom: 1rem; +body { + overflow: hidden; } +/* --- Page & Filter Layout --- */ .cpe-provisioning-page .filter-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: end; } - .cpe-provisioning-page .filter-actions { display: flex; gap: 0.5rem; - padding-top: 1.5rem; /* Align with form labels */ + padding-bottom: 0.25rem; +} +.loading-indicator, .no-results-indicator { + text-align: center; + padding: 4rem 2rem; + color: #6c757d; } -.cpe-provisioning-page .cpe-details-grid { +/* --- Cards Container --- */ +.cpe-cards-container { display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-template-columns: 1fr; gap: 1rem; - padding: 1rem; - background-color: #f8f9fa; - border-top: 1px solid #dee2e6; + margin-top: 1.5rem; } -.cpe-provisioning-page .section-title { - grid-column: 1 / -1; +/* --- Single Card Styling --- */ +.cpe-card { + background-color: #fff; + border: 1px solid #dee2e6; + border-left: 5px solid transparent; + border-radius: 0.5rem; + transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out; +} +.cpe-card.is-dirty { + border-left-color: #f7c423; /* Yellow accent for dirty */ +} +.cpe-card:hover { + box-shadow: 0 4px 12px rgba(0,0,0,0.08); +} + +/* --- Card Header --- */ +.cpe-card-header { + display: grid; + grid-template-columns: minmax(200px, 1.5fr) 2fr auto; + align-items: center; + gap: 1.5rem; + padding: 0.75rem 1rem; + background-color: #f8f9fa; + border-bottom: 1px solid #e9ecef; +} +.cpe-card-header .customer-info strong { + color: #005384; font-size: 1.1rem; +} +.cpe-card-header .customer-info small { + display: block; + font-size: 0.8rem; +} +.location-contact-header { + font-size: 0.85rem; + color: #495057; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.1rem 1rem; +} +.header-actions { + display: flex; + align-items: center; + gap: 1rem; + font-size: 1.1rem; + color: #005384; +} +.header-actions a { color: inherit; transition: color 0.2s; } +.header-actions a:hover { color: #f7c423; } + +/* --- Card Content Grid --- */ +.cpe-card-content { + padding: 0.75rem 1rem; + display: grid; + grid-template-columns: minmax(280px, 1.25fr) minmax(280px, 1.25fr) minmax(280px, 1.5fr); + gap: 1rem 1.5rem; +} + +.content-column { + padding-top: 0.5rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.content-column.action-column { + justify-content: space-between; +} +.content-column h5 { + font-size: 0.8rem; font-weight: 600; color: #005384; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 0.25rem; + padding-bottom: 0.25rem; + border-bottom: 1px solid #e9ecef; +} +.content-column p { + font-size: 0.9rem; + margin-bottom: 0.25rem; + line-height: 1.4; +} +.content-column .form-group, .content-column .tt-select-modern { + margin-bottom: 0; +} +.action-column .btn { + width: 100%; margin-top: 0.5rem; - margin-bottom: 0; - padding-bottom: 0.5rem; - border-bottom: 2px solid #f7c423; } - -.cpe-provisioning-page .info-pills { +.shipping-dims { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem 0.75rem; +} +.finish-wrapper { display: flex; - flex-wrap: wrap; - gap: 0.5rem; - padding: 0.5rem 0; -} - -.cpe-provisioning-page .info-pill { - background-color: #e9ecef; - color: #495057; - padding: 0.25rem 0.6rem; - border-radius: 1rem; - font-size: 0.8rem; - display: inline-flex; align-items: center; - gap: 0.3rem; - white-space: nowrap; + justify-content: space-between; + padding: 0.25rem; + background-color: #f1f3f5; + border-radius: 0.25rem; +} +.mt-auto { + margin-top: auto !important; } -.cpe-provisioning-page .info-pill i { - color: #005384; -} - -/* Ensure form groups don't have excessive bottom margin in the grid */ -.cpe-provisioning-page .cpe-details-grid .form-group { - margin-bottom: 0; -} - -/* Save button alignment */ -.cpe-provisioning-page .save-button-container { - grid-column: 1 / -1; - display: flex; - justify-content: flex-end; - margin-top: 1rem; -} - -/* For tt-table expanded row content */ -.tt-table tbody tr[style*="display: table-row;"] > td { - background-color: #f8f9fa !important; - padding: 0; -} - -/* Change tracking */ -.cpe-provisioning-page .is-dirty { - background-color: #fff3cd; /* A light yellow to indicate changes */ - border-color: #ffeeba; -} - -.cpe-provisioning-page .form-group-condensed .col-form-label { - padding-bottom: 0; -} +/* --- VLAN Chip Styling --- */ +.vlans-container { display: flex; flex-wrap: wrap; gap: 0.5rem; } +.tt-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 16px; background-color: #f1f3f5; border: 1px solid #dee2e6; font-size: 0.8em; white-space: nowrap; } +.tt-chip.is-checked { background-color: #e7f5ff; border-color: #a5d8ff; color: #1c7ed6; font-weight: 500; } +.tt-chip > * + * { margin-left: 6px; } +.tt-chip input[type="checkbox"] { margin: 0; cursor: pointer; } /* Responsive adjustments */ -@media (max-width: 768px) { - .cpe-provisioning-page .filter-grid, - .cpe-provisioning-page .cpe-details-grid { - grid-template-columns: 1fr; /* Stack on smaller screens */ - } - - .cpe-provisioning-page .filter-actions { - padding-top: 0; - flex-direction: column; - } - - .cpe-provisioning-page .filter-actions .btn { - width: 100%; +@media (max-width: 1400px) { + .cpe-card-content { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } - - -.vlans-container { - display: flex; - flex-wrap: wrap; - /*center items in the middle of the full width*/ - justify-content: center; - /*flex-direction: column;*/ - gap: 0.5rem; -} - -/* TODO: MOVE TT-CHIP TO OWN FILE */ -.tt-chip { - display: inline-flex; - align-items: center; - padding: 5px 12px; - border-radius: 16px; /* Pill shape */ - background-color: #f1f3f5; /* Light grey for unchecked state */ - border: 1px solid #dee2e6; - font-size: 0.875em; /* 14px if base is 16px */ - margin: 3px; - transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; - cursor: default; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 200px; -} - -.tt-chip.is-checked { - background-color: #e7f5ff; /* A pleasant light blue for the checked state */ - border-color: #a5d8ff; - color: #1c7ed6; - font-weight: 500; -} - -/* Add a subtle shadow on hover for interactivity */ -.tt-chip:hover { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} - -/* Style elements passed into the slot for consistent spacing and alignment */ -.tt-chip > * + * { - margin-left: 8px; -} - -.tt-chip input[type="checkbox"] { - margin: 0; - width: 15px; - height: 15px; - cursor: pointer; -} +@media (max-width: 992px) { + .cpe-card-header { + grid-template-columns: 1fr; + gap: 0.75rem; + } +} \ No newline at end of file diff --git a/public/js/pages/Cpeprovisioning/Cpeprovisioning.js b/public/js/pages/Cpeprovisioning/Cpeprovisioning.js index f3109a8fc..5a1471a1b 100644 --- a/public/js/pages/Cpeprovisioning/Cpeprovisioning.js +++ b/public/js/pages/Cpeprovisioning/Cpeprovisioning.js @@ -10,147 +10,123 @@ Vue.component('Cpeprovisioning', { template: `
-
-
- - - - -
- - -
+
+ + + + +
+ +
- - +
+ +

Daten werden geladen...

+
- +
+ +

Keine Einträge für die aktuellen Filter gefunden.

+
- +
- - - - + +
+
Produkt & VLANs
+

{{ item.product_name }} {{ item.product_code }}

+

+ {{ item.access_type }} + {{ item.access_type_down }} + {{ item.access_type_up }} +

+
+ +
+
+ + +
+ +
+
+
+ `, data() { return { window, + loading: true, + items: [], + filteredItems: [], filters: { network_id: '', routerconfig_finished: '0', hide_delayed_finish: '1', owner: '' }, - statusOptions: [ - { value: '0', text: 'Offen' }, - { value: '1', text: 'Abgeschlossen' } - ], - delayOptions: [ - { value: '1', text: 'Nicht anzeigen' }, - { value: '0', text: 'Anzeigen' } - ], - tableConfig: { - key: 'cpeProvisioning', - tableHeader: 'CPE Provisioning', - expandCondition: () => true, - customRowClass: row => (row.isDirty ? 'is-dirty' : ''), - headers: [ - { key: 'customer', text: 'Kunde', sortable: false, filter: false, priority: 100 }, - { key: 'product', text: 'Produkt', sortable: false, filter: false, priority: 90 }, - { key: 'vlans', text: 'VLANs', sortable: false, filter: false, priority: 80 }, - ] - } + statusOptions: [ { value: '0', text: 'Offen' }, { value: '1', text: 'Abgeschlossen' } ], + delayOptions: [ { value: '1', text: 'Nicht anzeigen' }, { value: '0', text: 'Anzeigen' } ], } }, computed: { @@ -163,47 +139,100 @@ Vue.component('Cpeprovisioning', { } }, methods: { - applyFilters(fetch = true) { - const table = this.$refs.cpeTable; - if (table) { - table.filters = JSON.parse(JSON.stringify(this.filters)); - if (fetch) table.fetchData(1); + async fetchData() { + this.loading = true; + this.items = []; + this.filteredItems = []; + + const payload = { + pagination: { page: 1, per_page: 100 }, + filters: { + network_id: this.filters.network_id, + routerconfig_finished: this.filters.routerconfig_finished, + hide_delayed_finish: this.filters.hide_delayed_finish, + }, + order: { key: 'order_id', order: 'desc' } + }; + + try { + const { data } = await axios.post(window.TT_CONFIG.CPE_PROV_API_GET_URL, payload); + this.items = (data.rows || []).map(item => ({ + ...item, + isDirty: false, + isSaving: false, + pop_name: item.pop_name || 'N/A', + owner_address: `${item.owner_street || ''} ${item.owner_housenumber || ''}, ${item.owner_zip || ''} ${item.owner_city || ''}`, + owner_phone: item.owner_phone || '', + owner_email: item.owner_email || '', + })); + this.applyClientSideFilter(); + } catch (error) { + console.error("Error fetching CPE data:", error); + window.notify('error', 'Fehler beim Laden der Daten.'); + } finally { + this.loading = false; } }, + applyClientSideFilter() { + if (!this.filters.owner) { + this.filteredItems = this.items; + return; + } + const search = this.filters.owner.toLowerCase(); + this.filteredItems = this.items.filter(item => { + return (item.customer && item.customer.toLowerCase().includes(search)) || + (item.spin && item.spin.toLowerCase().includes(search)) || + (item.owner_address && item.owner_address.toLowerCase().includes(search)) || + (item.product_name && item.product_name.toLowerCase().includes(search)) || + (item.network && item.network.toLowerCase().includes(search)); + }); + }, resetFilters() { - this.filters = { - network_id: '', - routerconfig_finished: '0', - hide_delayed_finish: '1', - owner: '' - }; - this.applyFilters(); + this.filters = { network_id: '', routerconfig_finished: '0', hide_delayed_finish: '1', owner: '' }; + this.fetchData(); }, - markDirty(row, field) { - console.log(`Marking row as dirty for field ${field}`); - this.$set(row, 'isDirty', true); + markDirty(item) { + this.$set(item, 'isDirty', true); }, - async checkShipping (row) { + async checkShipping(row) { await this.$nextTick(); + let wasPrefilled = false; + if (row.cpe_data.shipping && row.cpe_data.routertype) { const shippingData = this.window.TT_CONFIG.ROUTER_SHIPPING_DATA[row.cpe_data.routertype]; if (shippingData) { - if (!row.cpe_data.ship_weight) row.cpe_data.ship_weight = shippingData.weight; - if (!row.cpe_data.ship_length) row.cpe_data.ship_length = shippingData.length; - if (!row.cpe_data.ship_width) row.cpe_data.ship_width = shippingData.width; - if (!row.cpe_data.ship_height) row.cpe_data.ship_height = shippingData.height; + if (!row.cpe_data.ship_weight) { + this.$set(row.cpe_data, 'ship_weight', shippingData.weight); + wasPrefilled = true; + } + if (!row.cpe_data.ship_length) { + this.$set(row.cpe_data, 'ship_length', shippingData.length); + wasPrefilled = true; + } + if (!row.cpe_data.ship_width) { + this.$set(row.cpe_data, 'ship_width', shippingData.width); + wasPrefilled = true; + } + if (!row.cpe_data.ship_height) { + this.$set(row.cpe_data, 'ship_height', shippingData.height); + wasPrefilled = true; + } } - } else { + } else if (!row.cpe_data.shipping) { + // Clear the fields if shipping is unchecked row.cpe_data.ship_weight = ''; row.cpe_data.ship_length = ''; row.cpe_data.ship_width = ''; row.cpe_data.ship_height = ''; } + if (wasPrefilled) { + this.markDirty(row); + this.window.notify('success', 'Versanddaten wurden automatisch ausgefüllt.'); + } }, async saveCpe(row) { this.$set(row, 'isSaving', true); - const payload = { id: row.cpe_id, order_id: row.order_id, @@ -220,8 +249,15 @@ Vue.component('Cpeprovisioning', { const { data } = await axios.post(this.window.TT_CONFIG.CPE_PROV_API_SAVE_URL, payload); if (data.success) { this.window.notify('success', data.message); - this.$set(row, 'isDirty', false); - this.$refs.cpeTable.refreshTable(); + if (this.filters.routerconfig_finished === '0' && payload.routerconfig_finished) { + this.items = this.items.filter(item => item.orderproduct_id !== row.orderproduct_id); + this.applyClientSideFilter(); + } else { + const index = this.items.findIndex(item => item.orderproduct_id === row.orderproduct_id); + if (index !== -1) { + this.items[index].isDirty = false; + } + } } else { this.window.notify('error', data.message || 'Fehler beim Speichern.'); } @@ -233,6 +269,6 @@ Vue.component('Cpeprovisioning', { } }, mounted() { - this.applyFilters(false); + this.fetchData(); } -}); +}); \ No newline at end of file