Skip to content

Commit

Permalink
Gs local dev (#161)
Browse files Browse the repository at this point in the history 
* #160: Hoofdletters in nest type waarden

* #159 dd Admin filter By observer received email

* #158 Corrigeer meervoud Municipality in admin

* #157: Beschrijvende waarden voor Product

* #149 Geselecteerd nest niet oranje in tabel

* #136 Dezelfde info in legende als nest status in filter

* #135 mogelijk om nesten te reserveren buiten het 'eigen gebied

* #128 add species, make it mandatory

* #129 sync permission changes

* #127 Kleurverschil in status en legende

* #115 #118 eradication date save

* #117 uur

* #114: add ether_aceton_ethyl_acetate

* #111: limit width error message screen
  • Loading branch information
@stevegerrits
stevegerrits authored Jul 31, 2024
1 parent 5243b2d commit d866dee
Show file tree
Hide file tree
Showing 13 changed files with 240 additions and 56 deletions.
46 changes: 44 additions & 2 deletions src/assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,18 +73,32 @@
}

.bg-reserved {
background-color: rgba(var(--bs-warning-rgb));
background-color: rgba(var(--v-theme-warning));
}

.bg-eradicated {
background-color: rgba(var(--bs-success-rgb));
background-color: rgba(var(--v-theme-success));
}

.active-marker {
stroke: #ea792a;
stroke-width: 4;
}

.required::after {
content: '*';
color: red;
margin-left: 4px;
}

.is-invalid {
border-color: #dc3545;
}

.invalid-feedback {
display: block;
}

.navbar {
background-color: white !important;
border-bottom: 1px solid #e9ecef;
Expand All @@ -96,4 +110,32 @@
height: 30px;
}
}
}

.required::after {
content: '*';
color: red;
margin-left: 4px;
}

.is-invalid {
border-color: #dc3545;
}

.invalid-feedback {
display: block;
}

.loading-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
z-index: 1000;
}
23 changes: 4 additions & 19 deletions src/components/MapPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
</div>
<div class="map-legend" v-if="map && !isMapLoading">
<div>
<span class="legend-icon bg-reported"></span> Gerapporteerd
<span class="legend-icon bg-reported"></span> Gerapporteerd nest
</div>
<div>
<span class="legend-icon bg-reserved"></span> Gereserveerd
<span class="legend-icon bg-reserved"></span> Gereserveerd nest
</div>
<div>
<span class="legend-icon bg-eradicated"></span> Bestreden
<span class="legend-icon bg-eradicated"></span> Bestreden nest
</div>
</div>
<div class="filter-panel"
Expand Down Expand Up @@ -308,19 +308,4 @@ export default {
};
},
};
</script>
<style>
.loading-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
z-index: 1000;
}
</style>
</script>
2 changes: 1 addition & 1 deletion src/components/ModalMessage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div v-if="isVisible" class="modal-overlay">
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 modal-content">
<div class="col-6 modal-content">
<h5>{{ title }}</h5>
<p>{{ message }}</p>
<button @click="closeModal" class="btn btn-custom">OK</button>
Expand Down
84 changes: 64 additions & 20 deletions src/components/ObservationDetailsComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<div class="d-flex justify-content-between mb-3" id="reservation">
<button v-if="canReserve && !selectedObservation.reserved_by" class="btn btn-sm btn-outline-primary"
@click="reserveObservation" :disabled="!isAuthorizedToReserve || isObservationSuccessful">
@click="reserveObservation">
Reserveren
</button>
<span v-if="selectedObservation.reserved_by" class="badge bg-warning">Gereserveerd door {{
Expand Down Expand Up @@ -49,8 +49,11 @@
<label class="col-4 col-form-label">Datum</label>
<div class="col-8">
<input v-if="selectedObservation.eradication_date !== undefined"
v-model="editableObservation.eradication_date" type="date" class="form-control"
:readonly="!canEdit" :class="{ 'form-control-plaintext': !canEdit }" />
v-model="editableObservation.eradication_date"
type="date"
class="form-control"
:readonly="!canEdit"
:class="{ 'form-control-plaintext': !canEdit }" />
</div>
</div>
<div class="row mb-2">
Expand All @@ -67,7 +70,7 @@
<div class="col-8">
<input v-if="selectedObservation.eradication_duration !== undefined"
v-model="editableObservation.eradication_duration" type="text"
class="form-control" :readonly="!canEdit" placeholder="bv. 0.5 uur"
class="form-control" :readonly="!canEdit" placeholder="bv. 0.5 (uur)"
:class="{ 'form-control-plaintext': !canEdit }" />
</div>
</div>
Expand Down Expand Up @@ -194,13 +197,10 @@
<div class="row mb-2">
<label class="col-4 col-form-label">Type</label>
<div class="col-8">
<select v-if="selectedObservation.nest_type !== undefined"
v-model="editableObservation.nest_type" class="form-select"
:disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in nestTypeEnum" :key="value" :value="value">{{
label }}</option>
</select>
<select v-if="selectedObservation.nest_type !== undefined" v-model="editableObservation.nest_type" class="form-select" :disabled="!canEdit">
<option :value="null">Geen</option>
<option v-for="(label, value) in nestTypeEnum" :key="value" :value="value">{{ label }}</option>
</select>
</div>
</div>
<div class="row mb-2">
Expand Down Expand Up @@ -239,6 +239,15 @@
</select>
</div>
</div>
<div class="row mb-2">
<label class="col-4 col-form-label required">Species</label>
<div class="col-8">
<input v-model="editableObservation.species" type="number" class="form-control" :class="{ 'is-invalid': speciesInvalid && showSpeciesError }" @input="validateSpecies" />
<div v-if="speciesInvalid && showSpeciesError" class="invalid-feedback">
Dit veld is verplicht.
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-4 col-form-label">Opmerking</label>
<div class="col-8">
Expand Down Expand Up @@ -396,6 +405,8 @@ export default {
const canEditAdminFields = computed(() => isLoggedIn.value && vespaStore.isAdmin);
const successMessage = ref('');
const errorMessage = ref('');
const speciesInvalid = ref(false);
const showSpeciesError = ref(false);
const isAuthorizedToReserve = computed(() => {
if (vespaStore.isAdmin) return true;
Expand Down Expand Up @@ -437,11 +448,11 @@ export default {
};
const nestTypeEnum = {
"actief_embryonaal_nest": "actief embryonaal nest",
"actief_primair_nest": "actief primair nest",
"actief_secundair_nest": "actief secundair nest",
"inactief_leeg_nest": "inactief/leeg nest",
"potentieel_nest": "potentieel nest"
"actief_embryonaal_nest": "Actief embryonaal nest",
"actief_primair_nest": "Actief primair nest",
"actief_secundair_nest": "Actief secundair nest",
"inactief_leeg_nest": "Inactief/leeg nest",
"potentieel_nest": "Potentieel nest"
};
const eradicationResultEnum = {
Expand All @@ -457,6 +468,7 @@ export default {
"vespa_ficam_d": "Vespa Ficam D",
"topscore_pal": "Topscore_PAL",
"diatomeeenaarde": "diatomeeenaarde",
"ether_aceton_ethyl_acetate": "ether/aceton/ethyl acetate",
"andere": "andere"
};
Expand Down Expand Up @@ -504,6 +516,7 @@ export default {
"wn_cluster_id",
"public_domain",
"eradication_aftercare",
"species"
];
const eradicationStatusText = computed(() => {
Expand Down Expand Up @@ -545,6 +558,15 @@ export default {
return date.toISOString().slice(0, 16);
};
const formatToDate = (isoString) => {
if (!isoString) return '';
const date = new Date(isoString);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
return `${year}-${month}-${day}`;
};
const getEnumLabel = (enumObject, value) => {
return enumObject[value] || value;
};
Expand Down Expand Up @@ -599,12 +621,23 @@ export default {
};
const confirmUpdate = async () => {
showSpeciesError.value = true;
validateSpecies();
if (speciesInvalid.value) {
errorMessage.value = 'Soorten is verplicht.';
return;
}
const updatedObservation = {};
editableFields.forEach(field => {
updatedObservation[field] = editableObservation.value[field];
});
if (editableObservation.value.eradication_result) {
updatedObservation.eradication_result = 'successful';
}
let patch_response;
try {
patch_response = await vespaStore.updateObservation({
Expand All @@ -614,6 +647,8 @@ export default {
if (patch_response) {
successMessage.value = 'Wijzigingen opgeslagen';
speciesInvalid.value = false; // Added this line
showSpeciesError.value = false; // Added this line
setTimeout(() => successMessage.value = '', 4000);
const colorByResult = vespaStore.getColorByStatus(patch_response.eradication_result);
Expand All @@ -627,13 +662,18 @@ export default {
const cancelEdit = () => {
isEditing.value = false;
showSpeciesError.value = false;
if (selectedObservation.value) {
editableObservation.value = { ...selectedObservation.value };
editableObservation.value.observation_datetime = formatToDatetimeLocal(selectedObservation.value.observation_datetime);
editableObservation.value.eradication_date = formatToDatetimeLocal(selectedObservation.value.eradication_date);
}
};
const validateSpecies = () => {
speciesInvalid.value = !editableObservation.value.species;
};
const canViewContactInfo = computed(() => {
if (vespaStore.isAdmin) {
return true;
Expand All @@ -652,14 +692,15 @@ export default {
} else {
errorMessage.value = 'U heeft het maximum aantal reserveringen bereikt.';
setTimeout(() => {
errorMessage.value = '';
errorMessage.value = '';
}, 4000);
}
};
const cancelReservation = async () => {
await vespaStore.cancelReservation(selectedObservation.value);
};
const clearSuccessMessage = () => {
successMessage.value = '';
};
Expand All @@ -668,7 +709,7 @@ export default {
if (newVal) {
editableObservation.value = { ...newVal };
editableObservation.value.observation_datetime = formatToDatetimeLocal(selectedObservation.value.observation_datetime);
editableObservation.value.eradication_date = formatToDatetimeLocal(selectedObservation.value.eradication_date);
editableObservation.value.eradication_date = formatToDate(selectedObservation.value.eradication_date);
}
}, { immediate: true });
Expand Down Expand Up @@ -706,8 +747,11 @@ export default {
successMessage,
clearSuccessMessage,
isObservationSuccessful,
errorMessage
errorMessage,
speciesInvalid,
validateSpecies,
showSpeciesError
};
}
};
</script>
</script>
19 changes: 16 additions & 3 deletions src/components/TableViewPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,12 @@
</tr>
</thead>
<tbody>
<tr v-for="observation in table_observations" :key="observation.id"
@click="openObservationDetails(observation)">
<tr
v-for="observation in table_observations"
:key="observation.id"
@click="openObservationDetails(observation)"
:class="{ 'table-row-selected': selectedObservationId === observation.id }"
>
<td>{{ observation.id }}</td>
<td>{{ observation.municipality_name }}</td>
<td>{{ formatDate(observation.created_datetime) }}</td>
Expand Down Expand Up @@ -78,6 +82,7 @@ export default {
const nextPage = computed(() => vespaStore.nextPage);
const previousPage = computed(() => vespaStore.previousPage);
const table_observations = computed(() => vespaStore.table_observations);
const selectedObservationId = ref(null);
const tableHeaders = ref([
{ text: 'ID', value: 'id' },
{ text: 'Gemeente', value: 'municipality_name' },
Expand Down Expand Up @@ -134,6 +139,7 @@ export default {
const openObservationDetails = async (observation) => {
try {
selectedObservationId.value = observation.id;
await vespaStore.fetchObservationDetails(observation.id);
vespaStore.isDetailsPaneOpen = true;
router.push({ path: `/table/observation/${observation.id}` });
Expand Down Expand Up @@ -200,8 +206,15 @@ export default {
formatDate,
openObservationDetails,
isDetailsPaneOpen,
toggleDetailsPane
toggleDetailsPane,
selectedObservationId
};
}
};
</script>

<style scoped>
.table-row-selected {
background-color: orange;
}
</style>
Loading

0 comments on commit d866dee

Please sign in to comment.