Skip to content

Commit

Permalink
Merge pull request #64 from baillysi/develop
Browse files Browse the repository at this point in the history 
Handle CRUD operations with latest releases with Region
  • Loading branch information
@baillysi
baillysi authored Dec 18, 2024
2 parents d499368 + 4eb03f4 commit 5a95e5f
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 29 deletions.
17 changes: 16 additions & 1 deletion src/components/CreateComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const emit = defineEmits(['exit', 'close'])
const props = defineProps({
zoneId: String,
journeys: Object,
regions: Object,
})
const name = ref('')
Expand All @@ -20,6 +21,7 @@ const elevation = ref('')
const difficulty = ref(2)
const duration = ref('')
const journey = ref([])
const region = ref([])
const rates = ref(2)
const description = ref('')
Expand Down Expand Up @@ -51,6 +53,7 @@ async function createHike() {
difficulty: difficulty.value,
duration: duration.value,
journey: journey.value,
region: region.value,
rates: rates.value,
description: description.value,
gpx: gpx.value,
Expand Down Expand Up @@ -81,6 +84,7 @@ async function resetData() {
difficulty.value = 2
duration.value = ''
journey.value = ''
region.value = ''
rates.value = 2
description.value = ''
gpx.value = ''
Expand All @@ -106,6 +110,9 @@ async function onSubmit() {
if (!journey.value.name) {
errors.value.push('Le type d\'itinéraire est obligatoire.')
}
if (!region.value.name) {
errors.value.push('La région est obligatoire.')
}
if (errors.value.length == 0) {
createHike()
}
Expand All @@ -115,7 +122,7 @@ async function onSubmit() {
<template>
<div class="modal fade" data-bs-backdrop="static" id="#create" tabindex="-1" aria-labelledby="#create" aria-hidden="true">
<div class="modal fade" data-bs-backdrop="static" id="#create" tabindex="-1" aria-labelledby="#create" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Expand All @@ -134,6 +141,14 @@ async function onSubmit() {
<label for="InputName">Nom</label>
<input type="text" v-model="name" class="form-control simaps-light" id="InputName">
</div>
<div class="form-group simaps-classic">
<label for="InputRegion">Région</label>
<select v-model="region" class="form-select simaps-light" id="InputRegion">
<option v-for="option in regions" :value="option">
{{ option.name }}
</option>
</select>
</div>
<div class="form-group simaps-classic">
<label for="InputDescription">Description</label>
<textarea type="text" v-model="description" class="form-control simaps-light" id="InputDescription" rows="4"></textarea>
Expand Down
15 changes: 13 additions & 2 deletions src/components/DeleteComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
import axios from 'axios';
// user session
import { useFirebaseAuth } from 'vuefire';
const auth = useFirebaseAuth()
const emit = defineEmits(['exit', 'close'])
const props = defineProps({
Expand All @@ -10,7 +14,14 @@ const props = defineProps({
async function deleteHike() {
emit('close')
await axios.delete(import.meta.env.VITE_APP_ROOT_API + '/hikes/' + props.hikeId)
// add authorization to protect API
const token = await auth.currentUser.getIdToken()
const headers = {
Authorization: 'Bearer ' + token
};
await axios.delete(import.meta.env.VITE_APP_ROOT_API + '/hikes/' + props.hikeId, { headers })
.then((res) => {
console.log(res.status);
emit('exit');
Expand All @@ -23,7 +34,7 @@ async function deleteHike() {
<template>
<div class="modal fade" id="#delete" tabindex="-1" aria-labelledby="#delete" aria-hidden="true">
<div class="modal fade" id="#delete" tabindex="-1" aria-labelledby="#delete" aria-hidden="false">
<div class="modal-dialog modal-confirm">
<div class="modal-content simaps-classic">
<div class="modal-header">
Expand Down
2 changes: 1 addition & 1 deletion src/components/LoginComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ async function signInAsGuest() {
</div>
</div>

<div class="modal fade" data-bs-backdrop="static" id="#login" tabindex="-1" aria-labelledby="#login" aria-hidden="true">
<div class="modal fade" data-bs-backdrop="static" id="#login" tabindex="-1" aria-labelledby="#login" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content simaps-classic">
<div class="modal-header">
Expand Down
2 changes: 1 addition & 1 deletion src/components/LogoutComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ async function signout() {

<template>

<div class="modal fade" id="#logout" tabindex="-1" aria-labelledby="#logout" aria-hidden="true">
<div class="modal fade" id="#logout" tabindex="-1" aria-labelledby="#logout" aria-hidden="false">
<div class="modal-dialog modal-confirm">
<div class="modal-content simaps-classic">
<div class="modal-header">
Expand Down
54 changes: 31 additions & 23 deletions src/components/MapDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,8 @@ const journeys = ref([])
const viewpoints = ref([])
const regions = ref([])
const regionsZone = ref([])
const message = ref('')
const showMessage = ref(false)
Expand All @@ -107,7 +109,6 @@ const sortedHikes = computed(() => {
}
return 0;
}): currentOrder.value == 'Région' ?
hikes.value.sort((a, b) => {
let fa = a.region['id'], fb = b.region['id'];
if (fa < fb) {
Expand Down Expand Up @@ -145,8 +146,8 @@ const filteredHikes = computed (() => {
&&
hike.trail.geojson)
})
const sortedRegions = computed(() => {
return regions.value.sort((a, b) => {
const sortedRegionsZone = computed(() => {
return regionsZone.value.sort((a, b) => {
if (a.id < b.id) {
return -1;
}
Expand All @@ -162,7 +163,7 @@ function resetData() {
hideHeightgraph()
}
function resetFilters() {
function resetDataAndFilters() {
selectedHike.value = ''
hideHeightgraph()
fitBoundsZone(mapcenter.value)
Expand All @@ -180,14 +181,19 @@ async function getZoneDetails() {
zone_id.value = responseZone.data['id'].toString()
hikes.value = responseZone.data['hikes']
viewpoints.value = responseZone.data['viewpoints']
regions.value = responseRegion.data
regionsZone.value = responseRegion.data
}
async function getJourneys() {
const response = await axios.get(import.meta.env.VITE_APP_ROOT_API + '/journeys')
journeys.value = response.data
}
async function getRegions() {
const response = await axios.get(import.meta.env.VITE_APP_ROOT_API + '/regions')
regions.value = response.data
}
// leaflet map
const myMap = ref(null)
const mapcenter = ref('')
Expand Down Expand Up @@ -278,6 +284,8 @@ function showHeightgraph(geojson) {
function hideHeightgraph() {
myHeightGraph.remove()
// to prevent errors in useResizeObserver
myHeightGraph._data = undefined
}
function fitBounds(geojson) {
Expand All @@ -300,14 +308,14 @@ function fitBoundsRegion() {
myMap.value.leafletObject.fitBounds(bounds)
}
function zoomUpdated(zoom) {
mapzoom.value = zoom
}
function fitBoundsZone(mapcenter) {
myMap.value.leafletObject.setView(mapcenter, 10)
}
function zoomUpdated(zoom) {
mapzoom.value = zoom
}
function downloadGPX(geojson, name) {
const options = {
Expand Down Expand Up @@ -340,7 +348,6 @@ function downloadGPX(geojson, name) {
useResizeObserver(myMap, (entries) => {
const entry = entries[0]
const { width } = entry.contentRect
if (myHeightGraph._data) {
if (width <= 670 && width > 470) {
myHeightGraph.resize({width: 450, height: 157.5})
Expand Down Expand Up @@ -564,7 +571,7 @@ onMounted(async () => {
<div class="col-lg-4">
<div class="row" style="margin-left: 40px; margin-right: 40px; margin-bottom: 40px;" >
<button class="btn btn-outline-secondary" @click="isLoggedIn ? (getJourneys(), showCreate()) : showLogin()" :disabled="!isAdmin">+ nouvel itinéraire</button>
<button class="btn btn-outline-secondary" @click="isLoggedIn ? (getJourneys(), getRegions(), showCreate()) : showLogin()" :disabled="!isLoggedIn">+ nouvel itinéraire</button>
</div>
<div class="dataContainer">
Expand All @@ -573,7 +580,7 @@ onMounted(async () => {
<div class="col-5" >
<select class="form-select form-select-sm simaps-classic" v-model="searchRegion" @click="resetData(), fitBoundsRegion()" data-bs-toggle="collapse" :data-bs-target="'#flush-collapseOne'+selectedHike">
<option selected disabled value="">Région</option>
<option v-for="region in sortedRegions" :value="region.id">{{ region.name }}</option>
<option v-for="region in sortedRegionsZone" :value="region.id">{{ region.name }}</option>
</select>
</div>
<div class="col-5" >
Expand All @@ -586,7 +593,7 @@ onMounted(async () => {
</select>
</div>
<div class="col-2 simaps-classic">
<button class="btn btn-light btn-sm" @click="resetFilters()" data-toggle="tooltip" title="réinitialiser" data-bs-toggle="collapse" :data-bs-target="'#flush-collapseOne'+selectedHike">
<button class="btn btn-light btn-sm" @click="resetDataAndFilters()" data-toggle="tooltip" title="réinitialiser" data-bs-toggle="collapse" :data-bs-target="'#flush-collapseOne'+selectedHike">
<i class="pi pi-filter-slash" style="color:#3C002E;"></i>
</button>
</div>
Expand Down Expand Up @@ -624,13 +631,13 @@ onMounted(async () => {
{{ hike.description }}
<br/><br/>
<div class="col text-end">
<button v-if="isAdmin" class="btn btn-light" @click="isLoggedIn ? (getJourneys(), showUpdate(), hikeDetails = hike) : showLogin()" data-toggle="tooltip" title="mettre à jour l'itinéraire">
<button v-if="isLoggedIn" class="btn btn-light" @click="isLoggedIn ? (getJourneys(), getRegions(), showUpdate(), hikeDetails = hike) : showLogin()" data-toggle="tooltip" title="mettre à jour l'itinéraire">
<i class="pi pi-file-edit" style="color:#3C002E;"></i>
</button>
<button v-if="hike.trail.geojson" class="btn btn-light" @click="downloadGPX(hike.trail.geojson, hike.name)" data-toggle="tooltip" title="télécharger la trace gpx">
<i class="pi pi-download" style="color:#3C002E;"></i>
</button>
<button v-if="isAdmin" class="btn btn-light" @click="showDelete(), hikeDetails = hike" data-toggle="tooltip" title="supprimer l'itinéraire">
<button v-if="isLoggedIn" class="btn btn-light" @click="showDelete(), hikeDetails = hike" data-toggle="tooltip" title="supprimer l'itinéraire">
<i class="pi pi-trash" style="color:#FF803D;"></i>
</button>
</div>
Expand All @@ -651,30 +658,31 @@ onMounted(async () => {
</div>
<!-- Create -->
<CreateComponent :zoneId="zone_id" :journeys="journeys"
<CreateComponent :zoneId="zone_id" :regions="regions" :journeys="journeys"
@close="hideCreate(), isResponseLoading=true"
@exit="getZoneDetails(), message = 'Itinéraire créé!', showMessage = true, fitBoundsZone(mapcenter)">
@exit="getZoneDetails(), resetDataAndFilters(), message = 'Itinéraire créé!', showMessage = true">
</CreateComponent>
<!-- Update -->
<UpdateComponent :hikeId="String(hikeDetails.id)" :zoneId="zone_id" :journeys="journeys"
<UpdateComponent :hikeId="String(hikeDetails.id)" :zoneId="zone_id" :journeys="journeys" :regions="regions"
:currentName="hikeDetails.name"
:currentDistance="hikeDetails.distance"
:currentElevation="hikeDetails.elevation"
:currentDifficulty="hikeDetails.difficulty"
:currentDuration="hikeDetails.duration"
:currentJourney="hikeDetails.journey"
:currentRegion="hikeDetails.region"
:currentRates="hikeDetails.rates"
:currentDescription="hikeDetails.description"
:hasTrail="hikeDetails.trail == 'None' ? false : true"
@close="hideUpdate(), isResponseLoading=true"
@exit="getZoneDetails(), message = 'Itinéraire mis à jour!', showMessage = true, fitBoundsZone(mapcenter), hikeDetails = ''">
:currentDescription="hikeDetails.description"
:hasTrail="hikeDetails.trail == 'None' ? false : true"
@close="hideUpdate(), isResponseLoading=true"
@exit="getZoneDetails(), resetDataAndFilters(), message = 'Itinéraire mis à jour!', showMessage = true, hikeDetails = ''">
</UpdateComponent>
<!-- Delete -->
<DeleteComponent :hikeId="String(hikeDetails.id)"
@close="hideDelete(), isResponseLoading=true"
@exit="getZoneDetails(), message = 'Itinéraire supprimé!', showMessage = true, hikeDetails = ''">
@exit="getZoneDetails(), resetDataAndFilters(), message = 'Itinéraire supprimé!', showMessage = true, hikeDetails = ''">
</DeleteComponent>
<!-- Login -->
Expand Down
22 changes: 21 additions & 1 deletion src/components/UpdateComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@ const props = defineProps({
currentDifficulty: Number,
currentDuration: Number,
currentJourney: Object,
currentRegion: Object,
currentRates: Number,
currentDescription: String,
journeys: Object,
regions: Object,
hasTrail: Boolean,
})
Expand All @@ -30,6 +32,7 @@ const updatedElevation = ref('')
const updatedDifficulty = ref('')
const updatedDuration = ref('')
const updatedJourney = ref([])
const updatedRegion = ref([])
const updatedRates = ref('')
const updatedDescription = ref('')
Expand Down Expand Up @@ -75,6 +78,10 @@ watch(toRef(props, 'currentJourney'), (value) => {
updatedJourney.value = toRef(props, 'currentJourney').value;
});
watch(toRef(props, 'currentRegion'), (value) => {
updatedRegion.value = toRef(props, 'currentRegion').value;
});
watch(toRef(props, 'currentRates'), (value) => {
updatedRates.value = toRef(props, 'currentRates').value;
});
Expand All @@ -92,6 +99,7 @@ async function updateHike() {
difficulty: updatedDifficulty.value,
duration: updatedDuration.value,
journey: updatedJourney.value,
region: updatedRegion.value,
rates: updatedRates.value,
description: updatedDescription.value,
}
Expand Down Expand Up @@ -119,6 +127,7 @@ async function resetData() {
updatedDifficulty.value = toRef(props, 'currentDifficulty').value
updatedDuration.value = toRef(props, 'currentDuration').value
updatedJourney.value = toRef(props, 'currentJourney').value
updatedRegion.value = toRef(props, 'currentRegion').value
updatedRates.value = toRef(props, 'currentRates').value
updatedDescription.value = toRef(props, 'currentDescription').value
errors.value = []
Expand All @@ -143,6 +152,9 @@ async function onSubmit() {
if (!updatedJourney.value.name) {
errors.value.push('Le type d\'itinéraire est obligatoire.')
}
if (!updatedRegion.value.name) {
errors.value.push('La région est obligatoire.')
}
if (errors.value.length == 0) {
updateHike()
}
Expand All @@ -152,7 +164,7 @@ async function onSubmit() {
<template>
<div class="modal fade" data-bs-backdrop="static" id="#update" tabindex="-1" aria-labelledby="#update" aria-hidden="true">
<div class="modal fade" data-bs-backdrop="static" id="#update" tabindex="-1" aria-labelledby="#update" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Expand All @@ -171,6 +183,14 @@ async function onSubmit() {
<label for="InputName">Nom</label>
<input type="text" v-model="updatedName" class="form-control simaps-light" id="InputName">
</div>
<div class="form-group simaps-classic">
<label for="InputRegion">Région</label>
<select v-model="updatedRegion" class="form-select simaps-light" id="InputRegion">
<option v-for="option in regions" :value="option">
{{ option.name }}
</option>
</select>
</div>
<div class="form-group simaps-classic">
<label for="InputDescription">Description</label>
<textarea type="text" v-model="updatedDescription" class="form-control simaps-light" id="InputDescription" rows="4"></textarea>
Expand Down

0 comments on commit 5a95e5f

Please sign in to comment.