updated rimotype map
This commit is contained in:
@@ -1,22 +1,64 @@
|
||||
.preorder-map-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.map-filter-container,
|
||||
.map-legend-container {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.map-filter-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.map-filter-container h6 {
|
||||
line-height: 1; /* Align header text with buttons */
|
||||
}
|
||||
|
||||
.map-filter-container .btn {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
.map-filter-container .btn:hover {
|
||||
opacity: 0.85;
|
||||
transform: translateY(-1px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.map-filter-container .filter-separator {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #ccc;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
/* Move legend to the left to make space for the logo */
|
||||
.tt-map-bottom-controls {
|
||||
bottom: 90px !important;
|
||||
}
|
||||
|
||||
/* Style for the custom logo control container */
|
||||
.leaflet-control-logo {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-control-logo img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.map-legend-container {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.map-legend-container h6 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.marker-label {
|
||||
@@ -26,7 +68,6 @@
|
||||
padding: 0 !important;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
transition: visibility 0.2s, opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.tooltip-content-wrapper {
|
||||
@@ -77,28 +118,54 @@ div.leaflet-marker-icon.custom-div-icon {
|
||||
}
|
||||
|
||||
.fcp-marker {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #ffc107;
|
||||
color: #333;
|
||||
font-size: 11px;
|
||||
color: #212529;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* --- Styles for FCP Popup --- */
|
||||
.fcp-popup-content {
|
||||
font-family: Arial, sans-serif;
|
||||
.fcp-marker::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 12px solid #ffc107;
|
||||
filter: drop-shadow(0 4px 2px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
/* --- Fault Indicator on Marker --- */
|
||||
.marker-has-fault .rimo-marker {
|
||||
animation: pulse-red 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-red {
|
||||
0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
|
||||
}
|
||||
|
||||
/* --- Styles for Building & FCP Popups --- */
|
||||
.building-popup-content, .fcp-popup-content {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
width: 320px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.fcp-popup-content h5 {
|
||||
.building-popup-content h5, .fcp-popup-content h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
@@ -151,6 +218,47 @@ div.leaflet-marker-icon.custom-div-icon {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Fault Reporting Specific Styles --- */
|
||||
.fault-indicator-popup {
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.fault-indicator-popup ul {
|
||||
margin: 0.5rem 0 0 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
.fault-reporting-form h6 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.fault-reporting-form label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fault-reporting-form input[type="checkbox"] {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.fault-reporting-form .fault-other-textarea {
|
||||
width: 100%;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.fault-reporting-form .fault-other-textarea.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* RIMO Marker Colors */
|
||||
.marker-greenfield { background-color: #28a745; }
|
||||
.marker-residential { background-color: #007bff; }
|
||||
|
||||
@@ -1,234 +1,258 @@
|
||||
Vue.component('PreorderRimoTypeMap', {
|
||||
data() {
|
||||
return {
|
||||
mapMarkers: [],
|
||||
fcpMarkers: [],
|
||||
isLoading: false,
|
||||
window,
|
||||
fetchUrl: window.TT_CONFIG.BASE_PATH + '/Preorder/RimoTypeMapData',
|
||||
selectedCampaign: null,
|
||||
mapConfig: {
|
||||
clusterOptions: {
|
||||
spiderfyOnMaxZoom: false,
|
||||
disableClusteringAtZoom: 17,
|
||||
}
|
||||
},
|
||||
mapInstance: null,
|
||||
activeFilters: [],
|
||||
rimoTypeDefs: {
|
||||
greenfield: { text: 'Greenfield', icon: 'fas fa-tree', color: '#28a745' },
|
||||
residential: { text: 'Wohngebiet', icon: 'fas fa-home', color: '#007bff' },
|
||||
company: { text: 'Gewerbe', icon: 'fas fa-building', color: '#ffc107' },
|
||||
'multiple-dwelling': { text: 'Mehrfamilienhaus', icon: 'fas fa-city', color: '#6f42c1' },
|
||||
public: { text: 'Öffentlich', icon: 'fas fa-school', color: '#17a2b8' },
|
||||
other: { text: 'Andere', icon: 'fas fa-question-circle', color: '#6c757d' }
|
||||
data: () => ({
|
||||
rawRimoData: [],
|
||||
mapMarkers: [],
|
||||
fcpMarkers: [],
|
||||
faults: {},
|
||||
isLoading: false,
|
||||
window,
|
||||
fetchUrl: window.TT_CONFIG.BASE_PATH + '/Preorder/RimoTypeMapData',
|
||||
selectedCampaign: null,
|
||||
mapConfig: {
|
||||
clusterOptions: {
|
||||
spiderfyOnMaxZoom: false,
|
||||
disableClusteringAtZoom: 17,
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
activeFilters: [],
|
||||
showOnlyFaults: false,
|
||||
showFcps: true,
|
||||
showFaultsModal: false,
|
||||
logoControlAdded: false,
|
||||
userIdToNameMap: new Map(),
|
||||
faultReasons: [
|
||||
{ value: 'building_type', text: 'Gebäudetyp ist falsch' },
|
||||
{ value: 'home_count', text: 'Anzahl der Wohneinheiten ist falsch' },
|
||||
{ value: 'not_existent', text: 'Gebäude existiert nicht' },
|
||||
{ value: 'other', text: 'Sonstiges' }
|
||||
],
|
||||
rimoTypeDefs: {
|
||||
greenfield: { text: 'Greenfield', icon: 'fas fa-tree', color: '#28a745' },
|
||||
residential: { text: 'Wohngebiet', icon: 'fas fa-home', color: '#007bff' },
|
||||
company: { text: 'Gewerbe', icon: 'fas fa-building', color: '#ffc107' },
|
||||
'multiple-dwelling': { text: 'Mehrfamilienhaus', icon: 'fas fa-city', color: '#6f42c1' },
|
||||
public: { text: 'Öffentlich', icon: 'fas fa-school', color: '#17a2b8' },
|
||||
other: { text: 'Andere', icon: 'fas fa-question-circle', color: '#6c757d' }
|
||||
}
|
||||
}),
|
||||
computed: {
|
||||
filterOptions() {
|
||||
return Object.entries(this.rimoTypeDefs).map(([value, defs]) => ({
|
||||
value,
|
||||
text: defs.text,
|
||||
icon: defs.icon
|
||||
}));
|
||||
return Object.entries(this.rimoTypeDefs).map(([value, defs]) => ({ value, ...defs }));
|
||||
},
|
||||
filteredMapMarkers() {
|
||||
const rimoMarkers = this.activeFilters.length === 0
|
||||
? this.mapMarkers
|
||||
: this.mapMarkers.filter(marker => this.activeFilters.includes(marker.rimoType));
|
||||
let rimoMarkers = this.mapMarkers;
|
||||
|
||||
return [...rimoMarkers, ...this.fcpMarkers];
|
||||
if (this.showOnlyFaults)
|
||||
rimoMarkers = rimoMarkers.filter(marker => {
|
||||
const fault = this.faults[marker.hausnummerId];
|
||||
return fault && !fault.done;
|
||||
});
|
||||
|
||||
if (this.activeFilters.length > 0)
|
||||
rimoMarkers = rimoMarkers.filter(marker => this.activeFilters.includes(marker.rimoType));
|
||||
|
||||
return this.showFcps ? [...rimoMarkers, ...this.fcpMarkers] : rimoMarkers;
|
||||
},
|
||||
faultsForModal() {
|
||||
if (!this.rawRimoData.length) return [];
|
||||
|
||||
return Object.entries(this.faults)
|
||||
.map(([hausnummerId, faultData]) => {
|
||||
const rimoItem = this.rawRimoData.find(item => item.hausnummer_id == hausnummerId);
|
||||
if (!rimoItem) return null;
|
||||
|
||||
return {
|
||||
...faultData,
|
||||
hausnummerId,
|
||||
rimo_id: rimoItem.rimo_id,
|
||||
address: `${rimoItem.strasse_name} ${rimoItem.hausnummer}, ${rimoItem.plz_name} ${rimoItem.ortschaft_name}`,
|
||||
translated_reasons: faultData.reasons.map(r => this.faultReasons.find(fr => fr.value === r)?.text || r),
|
||||
done_by_user: this.userIdToNameMap.get(String(faultData.done_by)) || `User #${faultData.done_by}`
|
||||
};
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => {
|
||||
if (a.done && !b.done) return 1;
|
||||
if (!a.done && b.done) return -1;
|
||||
return a.address.localeCompare(b.address);
|
||||
});
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.selectedCampaign = urlParams.get('preordercampaign_id');
|
||||
if (this.selectedCampaign) {
|
||||
await this.fetchAllMapData();
|
||||
}
|
||||
if (this.selectedCampaign) await this.fetchAllMapData();
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const ttMapComponent = this.$refs.ttMap;
|
||||
if (ttMapComponent && ttMapComponent.map) {
|
||||
this.mapInstance = ttMapComponent.map;
|
||||
this.mapInstance.on('zoomend', this.checkZoomLevel);
|
||||
this.checkZoomLevel();
|
||||
}
|
||||
});
|
||||
if (window.TT_CONFIG?.ALL_USERS) {
|
||||
window.TT_CONFIG.ALL_USERS.forEach(user => this.userIdToNameMap.set(String(user.id), user.name));
|
||||
}
|
||||
const storedShowFcps = localStorage.getItem('rimoMapShowFcps');
|
||||
this.showFcps = storedShowFcps !== null ? JSON.parse(storedShowFcps) : true;
|
||||
window.updateMapFault = this.handleFaultUpdate.bind(this);
|
||||
window.saveMapFaults = this.saveFaults.bind(this);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.mapInstance) {
|
||||
this.mapInstance.off('zoomend', this.checkZoomLevel);
|
||||
}
|
||||
delete window.updateMapFault;
|
||||
delete window.saveMapFaults;
|
||||
},
|
||||
methods: {
|
||||
addLogoToMap() {
|
||||
if (this.$refs.ttMap?.map && !this.logoControlAdded) {
|
||||
const LogoControl = L.Control.extend({
|
||||
onAdd: function(map) {
|
||||
const container = L.DomUtil.create('div', 'leaflet-control-logo');
|
||||
container.innerHTML = `<img src="/assets/images/xinon-full.png" style="width: 150px; opacity: 0.8; margin-right: 5px;">`;
|
||||
L.DomEvent.disableClickPropagation(container);
|
||||
return container;
|
||||
}
|
||||
});
|
||||
new LogoControl({ position: 'bottomright' }).addTo(this.$refs.ttMap.map);
|
||||
this.logoControlAdded = true;
|
||||
}
|
||||
},
|
||||
async fetchAllMapData() {
|
||||
if (!this.selectedCampaign) return;
|
||||
this.isLoading = true;
|
||||
this.mapMarkers = [];
|
||||
this.fcpMarkers = [];
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
this.fetchRimoData(),
|
||||
this.fetchFCPData()
|
||||
]);
|
||||
} catch (err) {
|
||||
console.error("Failed to load map data:", err);
|
||||
await this.fetchFaultData();
|
||||
await Promise.all([this.fetchRimoData(), this.fetchFCPData()]);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
this.$nextTick(() => this.addLogoToMap());
|
||||
}
|
||||
},
|
||||
async fetchFaultData() {
|
||||
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Preorder/RimoTypeMapGetFaults`, {
|
||||
params: { preordercampaign_id: this.selectedCampaign }
|
||||
});
|
||||
if (response.data.success) {
|
||||
this.faults = response.data.faults && typeof response.data.faults === 'object' && !Array.isArray(response.data.faults) ? response.data.faults : {};
|
||||
}
|
||||
},
|
||||
|
||||
async fetchRimoData() {
|
||||
try {
|
||||
const response = await axios.post(this.fetchUrl, { campaignId: this.selectedCampaign });
|
||||
if (response.data.success && Array.isArray(response.data.data)) {
|
||||
this.mapMarkers = this.processData(response.data.data);
|
||||
} else {
|
||||
window.notify('error', 'Ungültiges RIMO-Datenformat von der API empfangen.');
|
||||
}
|
||||
} catch (err) {
|
||||
window.notify('error', 'Laden der RIMO-Kartendaten fehlgeschlagen.');
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
async fetchFCPData() {
|
||||
try {
|
||||
// Step 1: Fetch FCP locations
|
||||
const fcpLocationUrl = `${window.TT_CONFIG.BASE_PATH}/Preorder/Api?do=getFCPsForCampaign&campaign_id=${this.selectedCampaign}`;
|
||||
const fcpResponse = await axios.get(fcpLocationUrl);
|
||||
|
||||
if (fcpResponse.data.status !== "OK" || !fcpResponse.data.result?.length) {
|
||||
console.warn('No FCP locations found or API error.');
|
||||
return;
|
||||
}
|
||||
const fcpLocations = fcpResponse.data.result;
|
||||
|
||||
// Step 2: Fetch FCP stats using the IDs from the first call
|
||||
const fcpIds = fcpLocations.map(fcp => fcp.real_id);
|
||||
const statsUrl = `${window.TT_CONFIG.BASE_PATH}/Preorder/Api?do=getRimoFcpStats`;
|
||||
const statsResponse = await axios.post(statsUrl, { fcp_ids: fcpIds });
|
||||
const fcpStats = statsResponse.data.status === "OK" ? statsResponse.data.result : [];
|
||||
const statsMap = new Map(fcpStats.map(s => [s.fcp_id, s]));
|
||||
|
||||
// Step 3: Create markers with detailed popup content
|
||||
this.fcpMarkers = fcpLocations.map(fcp => {
|
||||
const stat = statsMap.get(String(fcp.real_id));
|
||||
return {
|
||||
lat: fcp.lat,
|
||||
lng: fcp.lng,
|
||||
options: {
|
||||
icon: {
|
||||
className: 'custom-div-icon',
|
||||
html: `<div class="fcp-marker">${fcp.text}</div>`,
|
||||
iconSize: [28, 28],
|
||||
iconAnchor: [14, 14],
|
||||
},
|
||||
asyncPopupContent: () => this.generateFcpPopupHtml(fcp, stat),
|
||||
zIndexOffset: 500
|
||||
},
|
||||
};
|
||||
});
|
||||
} catch (err) {
|
||||
window.notify('warning', 'Laden der FCP-Daten fehlgeschlagen. Die Karte wird ohne sie angezeigt.');
|
||||
console.error("FCP data fetch failed:", err);
|
||||
}
|
||||
},
|
||||
|
||||
generateFcpPopupHtml(fcp, fcpStat) {
|
||||
const googleMapsLink = `https://www.google.com/maps/search/?api=1&query=${fcp.lat},${fcp.lng}`;
|
||||
let statsHtml;
|
||||
|
||||
if (!fcpStat) {
|
||||
statsHtml = `<p>Keine Statistiken für diesen FCP gefunden.</p>`;
|
||||
const response = await axios.post(this.fetchUrl, { campaignId: this.selectedCampaign });
|
||||
if (response.data.success && Array.isArray(response.data.data)) {
|
||||
this.rawRimoData = response.data.data;
|
||||
this.mapMarkers = this.processData(this.rawRimoData);
|
||||
} else {
|
||||
const tableRows = Object.entries(fcpStat.counts_by_rimo_type || {})
|
||||
.map(([type, counts]) => {
|
||||
const normalizedType = this.getNormalizedRimoType(type);
|
||||
const typeDef = this.rimoTypeDefs[normalizedType] || this.rimoTypeDefs.other;
|
||||
const typeDisplay = `<i class="${typeDef.icon} mr-2" style="color: ${typeDef.color};"></i>${typeDef.text}`;
|
||||
return `
|
||||
<tr>
|
||||
<td>${typeDisplay}</td>
|
||||
<td class="text-center">${counts.hausnummer_count}</td>
|
||||
<td class="text-center">${counts.wohneinheit_count}</td>
|
||||
<td class="text-center">${counts.preorder_count}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
|
||||
const table = tableRows ? `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Typ</th>
|
||||
<th class="text-center" title="Gebäude">GEB</th>
|
||||
<th class="text-center" title="Wohneinheiten">WE</th>
|
||||
<th class="text-center" title="Bestellungen">BE</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tableRows}</tbody>
|
||||
</table>` : '<p>Keine Detail-Statistiken verfügbar.</p>';
|
||||
|
||||
statsHtml = `
|
||||
<div class="summary-block">
|
||||
<strong>Zusammenfassung</strong>
|
||||
<span>Gebäude: <b>${fcpStat.total_hausnummer_count}</b></span><br>
|
||||
<span>Wohneinheiten: <b>${fcpStat.total_wohneinheit_count}</b></span><br>
|
||||
<span>Bestellungen: <b>${fcpStat.total_active_preorders}</b></span>
|
||||
</div>
|
||||
${table}`;
|
||||
window.notify('error', 'Ungültiges RIMO-Datenformat von der API empfangen.');
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="fcp-popup-content">
|
||||
<h5><i class="fas fa-broadcast-tower mr-2"></i>FCP: ${fcp.text}</h5>
|
||||
<a href='${googleMapsLink}' target='_blank'>
|
||||
<i class="fas fa-map-marker-alt mr-1"></i> In Google Maps anzeigen
|
||||
</a>
|
||||
${statsHtml}
|
||||
</div>`;
|
||||
},
|
||||
async fetchFCPData() {
|
||||
const fcpLocationUrl = `${window.TT_CONFIG.BASE_PATH}/Preorder/Api?do=getFCPsForCampaign&campaign_id=${this.selectedCampaign}`;
|
||||
const fcpResponse = await axios.get(fcpLocationUrl);
|
||||
|
||||
if (fcpResponse.data.status !== "OK" || !fcpResponse.data.result?.length) return;
|
||||
|
||||
const fcpLocations = fcpResponse.data.result;
|
||||
const fcpIds = fcpLocations.map(fcp => fcp.real_id);
|
||||
if (fcpIds.length === 0) return;
|
||||
|
||||
const statsUrl = `${window.TT_CONFIG.BASE_PATH}/Preorder/Api?do=getRimoFcpStats`;
|
||||
const statsResponse = await axios.post(statsUrl, { fcp_ids: fcpIds });
|
||||
const fcpStats = statsResponse.data.status === "OK" ? statsResponse.data.result : [];
|
||||
const statsMap = new Map(fcpStats.map(s => [s.fcp_id, s]));
|
||||
|
||||
this.fcpMarkers = fcpLocations.map(fcp => ({
|
||||
lat: fcp.lat,
|
||||
lng: fcp.lng,
|
||||
options: {
|
||||
noCluster: true,
|
||||
icon: {
|
||||
className: 'custom-div-icon',
|
||||
html: `<div class="fcp-marker">${fcp.text}</div>`,
|
||||
iconSize: [30, 42],
|
||||
iconAnchor: [15, 42],
|
||||
},
|
||||
asyncPopupContent: () => this.generateFcpPopupHtml(fcp, statsMap.get(fcp.real_id))
|
||||
},
|
||||
}));
|
||||
},
|
||||
_generateFcpStatsTable(fcpStat) {
|
||||
if (!fcpStat?.counts_by_rimo_type) return '<p>Keine Detail-Statistiken verfügbar.</p>';
|
||||
|
||||
const tableRows = Object.entries(fcpStat.counts_by_rimo_type)
|
||||
.map(([type, counts]) => {
|
||||
const normalizedType = this.getNormalizedRimoType(type);
|
||||
const typeDef = this.rimoTypeDefs[normalizedType] || this.rimoTypeDefs.other;
|
||||
const typeDisplay = `<i class="${typeDef.icon} mr-2" style="color: ${typeDef.color};"></i>${typeDef.text}`;
|
||||
return `<tr>
|
||||
<td>${typeDisplay}</td>
|
||||
<td class="text-center">${counts.hausnummer_count}</td>
|
||||
<td class="text-center">${counts.wohneinheit_count}</td>
|
||||
<td class="text-center">${counts.preorder_count}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
|
||||
if (!tableRows) return '<p>Keine Detail-Statistiken verfügbar.</p>';
|
||||
|
||||
return `<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Typ</th>
|
||||
<th class="text-center" title="Gebäude">GEB</th>
|
||||
<th class="text-center" title="Wohneinheiten">WE</th>
|
||||
<th class="text-center" title="Bestellungen">BE</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tableRows}</tbody>
|
||||
</table>`;
|
||||
},
|
||||
generateFcpPopupHtml(fcp, fcpStat) {
|
||||
const googleMapsLink = `http://googleusercontent.com/maps.google.com/4{fcp.lat},${fcp.lng}`;
|
||||
const summaryHtml = fcpStat ?
|
||||
`<span>Gebäude: <b>${fcpStat.total_hausnummer_count}</b></span><br>
|
||||
<span>Wohneinheiten: <b>${fcpStat.total_wohneinheit_count}</b></span><br>
|
||||
<span>Bestellungen: <b>${fcpStat.total_active_preorders}</b></span>` :
|
||||
'Keine Statistiken für diesen FCP gefunden.';
|
||||
|
||||
return `<div class="fcp-popup-content">
|
||||
<h5><i class="fas fa-broadcast-tower mr-2"></i>FCP: ${fcp.text}</h5>
|
||||
<a href='${googleMapsLink}' target='_blank'><i class="fas fa-map-marker-alt mr-1"></i> In Google Maps anzeigen</a>
|
||||
<div class="summary-block">
|
||||
<strong>Zusammenfassung</strong>
|
||||
${summaryHtml}
|
||||
</div>
|
||||
${this._generateFcpStatsTable(fcpStat)}
|
||||
</div>`;
|
||||
},
|
||||
processData(data) {
|
||||
const groupedData = {};
|
||||
|
||||
data.forEach(item => {
|
||||
if (!item) return;
|
||||
const latLngKey = `${item.gps_lat},${item.gps_long}`;
|
||||
if (!groupedData[latLngKey]) {
|
||||
groupedData[latLngKey] = {
|
||||
...item,
|
||||
wohneinheit_count: parseInt(item.wohneinheit_count, 10) || 0,
|
||||
preorder_count: parseInt(item.preorder_count, 10) || 0,
|
||||
original_items: [item],
|
||||
};
|
||||
} else {
|
||||
groupedData[latLngKey].wohneinheit_count += parseInt(item.wohneinheit_count, 10) || 0;
|
||||
groupedData[latLngKey].preorder_count += parseInt(item.preorder_count, 10) || 0;
|
||||
groupedData[latLngKey].original_items.push(item);
|
||||
groupedData[latLngKey] = { ...item, wohneinheit_count: 0, preorder_count: 0, original_items: [] };
|
||||
}
|
||||
groupedData[latLngKey].wohneinheit_count += parseInt(item.wohneinheit_count, 10) || 0;
|
||||
groupedData[latLngKey].preorder_count += parseInt(item.preorder_count, 10) || 0;
|
||||
groupedData[latLngKey].original_items.push(item);
|
||||
});
|
||||
|
||||
return Object.values(groupedData).map(group => {
|
||||
const rimoType = this.getNormalizedRimoType(group.rimo_type);
|
||||
const markerIcon = this.getMarkerIcon(rimoType);
|
||||
const fault = this.faults[group.hausnummer_id];
|
||||
const hasFault = fault && !fault.done;
|
||||
|
||||
let tooltipInnerClass = '';
|
||||
if (rimoType !== 'greenfield' && group.wohneinheit_count > 0 && group.wohneinheit_count === group.preorder_count) {
|
||||
if (rimoType !== 'greenfield' && group.wohneinheit_count > 0 && group.wohneinheit_count === group.preorder_count)
|
||||
tooltipInnerClass = ' marker-label-saturated';
|
||||
} else if (rimoType === 'greenfield' && group.preorder_count > 0) {
|
||||
else if (rimoType === 'greenfield' && group.preorder_count > 0)
|
||||
tooltipInnerClass = ' marker-label-highlight';
|
||||
}
|
||||
|
||||
return {
|
||||
lat: group.gps_lat,
|
||||
lng: group.gps_long,
|
||||
rimoType: rimoType,
|
||||
rimoType,
|
||||
hausnummerId: group.hausnummer_id,
|
||||
options: {
|
||||
icon: {
|
||||
className: `custom-div-icon marker-${rimoType}`,
|
||||
className: `custom-div-icon marker-${rimoType} ${hasFault ? 'marker-has-fault' : ''}`,
|
||||
html: `<div class="rimo-marker ${markerIcon.class}"><i class="${markerIcon.icon} rimo-icon"></i></div>`,
|
||||
iconSize: [30, 30],
|
||||
iconAnchor: [15, 30],
|
||||
@@ -238,122 +262,273 @@ Vue.component('PreorderRimoTypeMap', {
|
||||
direction: 'bottom',
|
||||
className: 'marker-label',
|
||||
permanent: true,
|
||||
minZoom: 18
|
||||
},
|
||||
asyncPopupContent: async () => {
|
||||
let content = `<div style="font-size: 0.85rem;">`;
|
||||
group.original_items.forEach(item => {
|
||||
content += `
|
||||
<div class="mb-2">
|
||||
<h5 class="mb-2 mt-1">${item.strasse_name} ${item.hausnummer}, ${item.plz_name} ${item.ortschaft_name}</h5>
|
||||
<strong>Rimo Type:</strong> ${item.rimo_type || 'N/A'}<br>
|
||||
<strong>Rimo Op State:</strong> ${item.rimo_op_state || 'N/A'}<br>
|
||||
<strong>Rimo Ex State:</strong> ${item.rimo_ex_state || 'N/A'}<br>
|
||||
<strong>Wohn. gesamt:</strong> ${item.wohneinheit_count}<br>
|
||||
<strong>Bestellungen:</strong> ${item.preorder_count}<br>
|
||||
<strong>Koordinaten:</strong>
|
||||
<a href="https://www.google.com/maps?q=${item.gps_lat},${item.gps_long}" target="_blank" class="text-primary">
|
||||
<i class="fas fa-map-marker-alt mr-1"></i>Karte
|
||||
</a>
|
||||
<a href="https://thetool.xinon.at/AddressDB/View?id=${item.hausnummer_id}" target="_blank" class="text-primary ml-2">
|
||||
<i class="fas fa-info-circle mr-1"></i>AddressDB
|
||||
</a>
|
||||
</div><hr class="my-1">`;
|
||||
});
|
||||
return content.slice(0, -16) + `</div>`;
|
||||
},
|
||||
asyncPopupContent: async () => this.generateBuildingPopupHtml(group),
|
||||
},
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
getNormalizedRimoType(type) {
|
||||
const lowerType = (type || '').toLowerCase();
|
||||
if (lowerType.includes('2/3')) return 'residential';
|
||||
if (lowerType.includes('greenfield')) return 'greenfield';
|
||||
if (lowerType.includes('residential')) return 'residential';
|
||||
if (lowerType.includes('multiple dwelling') || lowerType.includes('multiple dwellings')) return 'multiple-dwelling';
|
||||
if (lowerType.includes('company') || lowerType.includes('commercial')) return 'company';
|
||||
if (lowerType.includes('public') || lowerType.includes('school')) return 'public';
|
||||
if (lowerType.includes('unknown')) return 'other';
|
||||
return 'other';
|
||||
_generateBuildingDetailsHtml(itemGroup) {
|
||||
return itemGroup.original_items.map(item => {
|
||||
const googleMapsLink = `http://googleusercontent.com/maps/contrib/117320308544975743452/reviews/@${item.gps_lat},${item.gps_long}`;
|
||||
const addressDbLink = `https://thetool.xinon.at/AddressDB/View?id=${item.hausnummer_id}`;
|
||||
return `<div class="mb-2">
|
||||
<h5 class="mb-2 mt-1">${item.strasse_name} ${item.hausnummer}, ${item.plz_name} ${item.ortschaft_name}</h5>
|
||||
<strong>Rimo Type:</strong> ${item.rimo_type || 'N/A'}<br>
|
||||
<strong>Rimo Op State:</strong> ${item.rimo_op_state || 'N/A'}<br>
|
||||
<strong>Rimo Ex State:</strong> ${item.rimo_ex_state || 'N/A'}<br>
|
||||
<strong>Wohneinheiten gesamt:</strong> ${item.wohneinheit_count}<br>
|
||||
<strong>Bestellungen:</strong> ${item.preorder_count}<br>
|
||||
<strong>Links:</strong>
|
||||
<a href="${googleMapsLink}" target="_blank" class="text-primary"><i class="fas fa-map-marker-alt mr-1"></i>Karte</a>
|
||||
<a href="${addressDbLink}" target="_blank" class="text-primary ml-2"><i class="fas fa-info-circle mr-1"></i>AddressDB</a>
|
||||
</div>`;
|
||||
}).join('<hr class="my-1">');
|
||||
},
|
||||
_generateBuildingFaultDisplayHtml(faultData) {
|
||||
if (!faultData.reasons?.length && !faultData.other) return '';
|
||||
|
||||
getMarkerIcon(rimoType) {
|
||||
const def = this.rimoTypeDefs[rimoType] || this.rimoTypeDefs.other;
|
||||
return {
|
||||
class: `marker-${rimoType}`,
|
||||
icon: def.icon,
|
||||
};
|
||||
const reasonsList = faultData.reasons.map(r => `<li>${this.faultReasons.find(fr => fr.value === r)?.text || r}</li>`).join('');
|
||||
const otherText = faultData.other ? `<li>Sonstiges: ${faultData.other}</li>` : '';
|
||||
|
||||
return `<div class="fault-indicator-popup">
|
||||
<strong><i class="fas fa-exclamation-triangle"></i> Gemeldeter Fehler:</strong>
|
||||
<ul>${reasonsList}${otherText}</ul>
|
||||
</div>`;
|
||||
},
|
||||
_generateBuildingFaultFormHtml(itemGroup, faultData) {
|
||||
const formInputs = this.faultReasons.map(reason => {
|
||||
const isChecked = faultData.reasons.includes(reason.value);
|
||||
const otherInput = (reason.value === 'other') ?
|
||||
`<textarea class="fault-other-textarea ${isChecked ? '' : 'hidden'}" oninput="window.updateMapFault(${itemGroup.hausnummer_id}, 'other_text', this.value, false)">${faultData.other || ''}</textarea>` :
|
||||
'';
|
||||
|
||||
checkZoomLevel() {
|
||||
if (!this.mapInstance) return;
|
||||
const currentZoom = this.mapInstance.getZoom();
|
||||
const minZoomForLabel = 16;
|
||||
const visibility = currentZoom >= minZoomForLabel ? 'visible' : 'hidden';
|
||||
const opacity = currentZoom >= minZoomForLabel ? '1' : '0';
|
||||
return `<label>
|
||||
<input type="checkbox" onchange="window.updateMapFault(${itemGroup.hausnummer_id}, '${reason.value}', this.checked, false)" ${isChecked ? 'checked' : ''}>
|
||||
${reason.text}
|
||||
</label>
|
||||
${otherInput}`;
|
||||
}).join('');
|
||||
|
||||
document.querySelectorAll('.marker-label').forEach(el => {
|
||||
el.style.visibility = visibility;
|
||||
el.style.opacity = opacity;
|
||||
});
|
||||
return `<h6>Fehler melden/bearbeiten:</h6>
|
||||
${formInputs}
|
||||
<button class="btn btn-primary btn-sm mt-2" onclick="window.saveMapFaults()">Fehler Speichern</button>`;
|
||||
},
|
||||
generateBuildingPopupHtml(itemGroup) {
|
||||
const faultData = this.faults[itemGroup.hausnummer_id] || { reasons: [], other: '' };
|
||||
const detailsHtml = this._generateBuildingDetailsHtml(itemGroup);
|
||||
const faultFormHtml = this._generateBuildingFaultFormHtml(itemGroup, faultData);
|
||||
const faultDisplayHtml = faultData.done ?
|
||||
`<div class="alert alert-success"><i class="fas fa-check-circle"></i> Dieser Fehler wurde von <strong>${this.userIdToNameMap.get(String(faultData.done_by)) || `User #${faultData.done_by}`}</strong> am ${new Date(faultData.done_at).toLocaleDateString()} als erledigt markiert.</div>` :
|
||||
this._generateBuildingFaultDisplayHtml(faultData);
|
||||
|
||||
toggleFilter(filterValue) {
|
||||
const index = this.activeFilters.indexOf(filterValue);
|
||||
if (index > -1) {
|
||||
this.activeFilters.splice(index, 1);
|
||||
} else {
|
||||
this.activeFilters.push(filterValue);
|
||||
return `<div class="building-popup-content">
|
||||
${detailsHtml}
|
||||
${faultDisplayHtml}
|
||||
<hr class="my-2">
|
||||
<div class="fault-reporting-form">${faultFormHtml}</div>
|
||||
</div>`;
|
||||
},
|
||||
handleFaultUpdate(hausnummerId, reason, value, from_mark_as_done = false) {
|
||||
if (!this.faults[hausnummerId])
|
||||
this.$set(this.faults, hausnummerId, { reasons: [], other: '', done: false });
|
||||
else if (this.faults[hausnummerId].done && !from_mark_as_done)
|
||||
this.$set(this.faults, hausnummerId, { reasons: [], other: '', done: false });
|
||||
|
||||
|
||||
const fault = this.faults[hausnummerId];
|
||||
|
||||
if (reason === 'other_text') {
|
||||
fault.other = value;
|
||||
} else if (reason) {
|
||||
const index = fault.reasons.indexOf(reason);
|
||||
if (value && index === -1) fault.reasons.push(reason);
|
||||
else if (!value && index > -1) fault.reasons.splice(index, 1);
|
||||
|
||||
const popup = this.$refs.ttMap?.map?._popup;
|
||||
if (popup?.isOpen()) {
|
||||
const otherTextarea = popup.getElement().querySelector('.fault-other-textarea');
|
||||
if (otherTextarea) otherTextarea.classList.toggle('hidden', !fault.reasons.includes('other'));
|
||||
}
|
||||
}
|
||||
|
||||
const markerInstance = this.$refs.ttMap.markerLayer.getLayers().find(m => m.tt_hausnummerId == hausnummerId);
|
||||
if (markerInstance?.getElement) {
|
||||
const hasOpenFault = fault && !fault.done && (fault.reasons.length > 0 || fault.other);
|
||||
markerInstance.getElement().classList.toggle('marker-has-fault', hasOpenFault);
|
||||
}
|
||||
},
|
||||
async saveFaults() {
|
||||
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Preorder/RimoTypeMapSaveFaults`, {
|
||||
campaignId: this.selectedCampaign,
|
||||
faults: this.faults
|
||||
});
|
||||
if (response.data.success) {
|
||||
window.notify('success', 'Fehlerbericht gespeichert.');
|
||||
this.$refs.ttMap?.map.closePopup();
|
||||
} else {
|
||||
window.notify('error', 'Fehlerbericht konnte nicht gespeichert werden.');
|
||||
}
|
||||
},
|
||||
async markFaultAsDone(hausnummerId) {
|
||||
if (!hausnummerId || !this.faults[hausnummerId]) return;
|
||||
|
||||
this.$set(this.faults, hausnummerId, {
|
||||
...this.faults[hausnummerId],
|
||||
done: true,
|
||||
done_by: window.TT_CONFIG.USER_ID,
|
||||
done_at: new Date().toISOString()
|
||||
});
|
||||
|
||||
await this.saveFaults();
|
||||
this.handleFaultUpdate(hausnummerId, null, null, true);
|
||||
},
|
||||
zoomToFaultMarker(hausnummerId) {
|
||||
const map = this.$refs.ttMap?.map;
|
||||
const markerLayer = this.$refs.ttMap?.markerLayer;
|
||||
|
||||
if (!map || !markerLayer) return window.notify('error', 'Kartenkomponente ist nicht bereit.');
|
||||
|
||||
const markerInstance = markerLayer.getLayers().find(m => m.tt_hausnummerId == hausnummerId);
|
||||
if (!markerInstance) return window.notify('warning', 'Marker konnte nicht auf der Karte gefunden werden.');
|
||||
|
||||
this.showFaultsModal = false;
|
||||
map.flyTo(markerInstance.getLatLng(), 19, { duration: 1 });
|
||||
|
||||
setTimeout(() => markerLayer.zoomToShowLayer(markerInstance, () => markerInstance.openPopup()), 1100);
|
||||
},
|
||||
toggleShowFcps() {
|
||||
this.showFcps = !this.showFcps;
|
||||
localStorage.setItem('rimoMapShowFcps', JSON.stringify(this.showFcps));
|
||||
},
|
||||
getNormalizedRimoType(type) {
|
||||
const lowerType = (type || '').toLowerCase();
|
||||
if (lowerType.includes('greenfield')) return 'greenfield';
|
||||
if (lowerType.includes('residential') || lowerType.includes('2/3')) return 'residential';
|
||||
if (lowerType.includes('multiple dwelling')) return 'multiple-dwelling';
|
||||
if (lowerType.includes('company') || lowerType.includes('commercial')) return 'company';
|
||||
if (lowerType.includes('public') || lowerType.includes('school')) return 'public';
|
||||
return 'other';
|
||||
},
|
||||
getMarkerIcon(rimoType) {
|
||||
const def = this.rimoTypeDefs[rimoType] || this.rimoTypeDefs.other;
|
||||
return { class: `marker-${rimoType}`, icon: def.icon };
|
||||
},
|
||||
toggleFilter(filterValue) {
|
||||
const index = this.activeFilters.indexOf(filterValue);
|
||||
if (index > -1) this.activeFilters.splice(index, 1);
|
||||
else this.activeFilters.push(filterValue);
|
||||
},
|
||||
isFilterActive(filterValue) {
|
||||
return this.activeFilters.includes(filterValue);
|
||||
},
|
||||
|
||||
/**
|
||||
* Generates the style for a filter button based on its state (active/inactive).
|
||||
*/
|
||||
getFilterButtonStyle(filterValue) {
|
||||
const color = this.rimoTypeDefs[filterValue]?.color || '#6c757d';
|
||||
if (this.isFilterActive(filterValue)) {
|
||||
return {
|
||||
backgroundColor: color,
|
||||
borderColor: color,
|
||||
color: 'white',
|
||||
};
|
||||
}
|
||||
return {
|
||||
color: color,
|
||||
backgroundColor: 'white',
|
||||
borderColor: color,
|
||||
};
|
||||
return this.isFilterActive(filterValue) ?
|
||||
{ backgroundColor: color, borderColor: color, color: 'white' } :
|
||||
{ color: color, backgroundColor: 'white', borderColor: color };
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<tt-card style="height: 75vh; position: relative; display: flex; flex-direction: column;">
|
||||
<div style="height: 80vh; width: 100%; display: flex; flex-direction: column;">
|
||||
<div v-if="!selectedCampaign" class="alert alert-warning m-3">
|
||||
Bitte eine Kampagne über den URL-Parameter 'preordercampaign_id' auswählen (z.B. ?preordercampaign_id=44).
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="map-filter-container">
|
||||
<button v-for="filter in filterOptions"
|
||||
:key="filter.value"
|
||||
@click="toggleFilter(filter.value)"
|
||||
class="btn btn-sm"
|
||||
:style="getFilterButtonStyle(filter.value)"
|
||||
:title="filter.text">
|
||||
<i :class="filter.icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div style="height: 100%; position: relative; flex-grow: 1;">
|
||||
<div v-if="!isLoading && mapMarkers.length === 0 && fcpMarkers.length === 0" class="alert alert-info m-3">
|
||||
Keine Standorte für die ausgewählte Kampagne gefunden.
|
||||
<tt-map v-else ref="ttMap" :markers-data="filteredMapMarkers" :loading="isLoading" :config="mapConfig">
|
||||
<template v-slot:tools>
|
||||
<div class="map-filter-container">
|
||||
<h6 class="mb-0 mr-2 font-weight-bold align-self-center">Filter:</h6>
|
||||
<button v-for="filter in filterOptions"
|
||||
:key="filter.value"
|
||||
@click="toggleFilter(filter.value)"
|
||||
class="btn btn-sm"
|
||||
:style="getFilterButtonStyle(filter.value)"
|
||||
:title="filter.text">
|
||||
<i :class="filter.icon"></i>
|
||||
</button>
|
||||
<div class="filter-separator"></div>
|
||||
<button @click="showOnlyFaults = !showOnlyFaults"
|
||||
class="btn btn-sm"
|
||||
:class="showOnlyFaults ? 'btn-danger' : 'btn-outline-danger'"
|
||||
title="Nur Gebäude mit Fehlern anzeigen">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</button>
|
||||
<button @click="toggleShowFcps"
|
||||
class="btn btn-sm"
|
||||
:class="showFcps ? 'btn-info' : 'btn-outline-info'"
|
||||
title="FCPs anzeigen/ausblenden">
|
||||
<i class="fas fa-broadcast-tower"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:legend>
|
||||
<div class="map-legend-container">
|
||||
<h6>Legende</h6>
|
||||
<div><strong>H:</strong> Homes (Wohneinheiten)</div>
|
||||
<div><strong>B:</strong> Bestellungen</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<a :href="window.TT_CONFIG.BASE_PATH + '/Preorder/RimoTypeMapFaultsPDFAction?preordercampaign_id=' + selectedCampaign" target="_blank" class="btn btn-sm btn-outline-primary">
|
||||
<i class="fas fa-file-pdf mr-1"></i> Fehlerbericht PDF
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button @click="showFaultsModal = true" class="btn btn-sm btn-dark w-100">
|
||||
<i class="fas fa-list-ul mr-1"></i> Fehlerliste ({{ faultsForModal.filter(f => !f.done).length }})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tt-map>
|
||||
|
||||
<div v-if="showFaultsModal" class="modal fade show" style="display: block; background-color: rgba(0,0,0,0.5);" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Fehlerliste für Kampagne</h5>
|
||||
<button type="button" class="close" @click="showFaultsModal = false" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div v-if="!faultsForModal.length" class="alert alert-info">Keine Fehler für diese Kampagne gemeldet.</div>
|
||||
<ul v-else class="list-group">
|
||||
<li v-for="fault in faultsForModal" :key="fault.hausnummerId" class="list-group-item">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="pr-3">
|
||||
<strong :class="{ 'text-muted': fault.done }">{{ fault.address }}</strong>
|
||||
<div class="text-muted mb-1">Rimo ID: {{ fault.rimo_id }}</div>
|
||||
<div v-if="!fault.done" class="mt-1">
|
||||
<ul class="mb-0 small pl-3 text-danger font-weight-bold">
|
||||
<li v-for="reason in fault.translated_reasons" :key="reason">{{ reason }}</li>
|
||||
<li v-if="fault.other">Sonstiges: <span class="font-weight-normal">{{ fault.other }}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right" style="min-width: 200px;">
|
||||
<button class="btn btn-sm btn-outline-primary mb-1 w-100" @click="zoomToFaultMarker(fault.hausnummerId)">
|
||||
<i class="fas fa-search-location"></i> Auf Karte zeigen
|
||||
</button>
|
||||
<div v-if="fault.done">
|
||||
<span class="badge badge-success p-2 w-100"><i class="fas fa-check-circle mr-1"></i> Erledigt</span>
|
||||
<small class="text-muted d-block text-center">von {{ fault.done_by_user }}</small>
|
||||
<small class="text-muted d-block text-center">{{ new Date(fault.done_at).toLocaleDateString() }}</small>
|
||||
</div>
|
||||
<button v-else class="btn btn-sm btn-success w-100" @click="markFaultAsDone(fault.hausnummerId)">
|
||||
<i class="fas fa-check"></i> Als erledigt markieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="showFaultsModal = false">Schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
<tt-map ref="ttMap" :markers-data="filteredMapMarkers" :loading="isLoading" :config="mapConfig" class="preorder-map-container"></tt-map>
|
||||
</div>
|
||||
</template>
|
||||
</tt-card>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
Reference in New Issue
Block a user