Skip to content

Commit

Permalink
Progrès démo
Browse files Browse the repository at this point in the history
  • Loading branch information
julienmalard committed Apr 10, 2024
1 parent e00a2d0 commit bede77d
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 88 deletions.
1 change: 1 addition & 0 deletions components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ declare module 'vue' {
'AjoutDonnée': typeof import('./src/components/étapes/démo/AjoutDonnée.vue')['default']
BtnMenuLangues: typeof import('./src/components/BtnMenuLangues.vue')['default']
CarteLien: typeof import('./src/components/étapes/communs/CarteLien.vue')['default']
'EntréeDonnée': typeof import('./src/components/étapes/démo/EntréeDonnée.vue')['default']
'ÉtapeCours': typeof import('./src/components/ÉtapeCours.vue')['default']
GraphiqueStation: typeof import('./src/components/étapes/démo/GraphiqueStation.vue')['default']
'ItemLangueProgrès': typeof import('./src/components/ItemLangueProgrès.vue')['default']
Expand Down
Binary file modified src/assets/logo cours.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/components/étapes/SectionAccueil.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
:class="{ 'my-auto': true, 'text-center': !mdAndUp }"
>
<v-img
:class="{ 'mb-4': true, 'mx-4': !mdAndUp }"
src="@/assets/logo egu.svg"
:class="{ 'mx-4': !mdAndUp }"
src="@/assets/logo cours.png"
height="150"
:width="mdAndUp ? 600 : undefined"
/>
Expand Down
109 changes: 109 additions & 0 deletions src/components/étapes/démo/EntréeDonnée.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<template>
<v-card variant="flat" class="pa-2">
<v-card-item class="px-0 pt-0">
<v-card-title>
{{ station.id }}
</v-card-title>
<v-card-subtitle>
<v-icon icon="mdi-map-marker-outline" start />{{
`${latFormatté}, ${longFormatté}`
}}
<br />
<span v-if="observation">
<v-icon icon="mdi-clock-time-three-outline" start />
{{ new Date(observation.horo).toLocaleString() }}
</span>
</v-card-subtitle>
</v-card-item>
<v-card-text>
<v-img class="pb-6" :src="observation?.image" />
<v-text-field
v-model="précip"
variant="outlined"
:label="t('démo.indicePrécip')"
:rules="validPrécip"
:disabled="enSoumission"
clearable
></v-text-field>
<v-btn
class="my-2"
width="100%"
append-icon="mdi-check"
variant="outlined"
:disabled="!précip"
:loading="enSoumission"
@click="() => soumettreDonnée()"
>
Submit
</v-btn>
<v-btn
class="my-2"
width="100%"
append-icon="mdi-camera-flip-outline"
variant="outlined"
@click="() => prendrePhoto()"
>
{{ t('démo.nouvellePhoto') }}
</v-btn>
</v-card-text>
</v-card>
</template>
<script setup lang="ts">
import {
எண்களைப்_பயன்படுத்து,
கிளிமூக்கை_பயன்படுத்து,
} from "@lassi-js/kilimukku-vue";
import type { InfoObservation, InfoStation } from "@/données/népal";
import { computed, ref } from "vue";
const props = defineProps<{station: InfoStation, observation?: InfoObservation, enSoumission: boolean}>();
const émettre = defineEmits<{
(e: 'soumettre', args: { précip: number }): void;
(e: 'prendrePhoto'): void;
}>();
const { மொழியாக்கம்_பயன்படுத்து } = கிளிமூக்கை_பயன்படுத்து();
const { $மொ: t, மொ: t_ } = மொழியாக்கம்_பயன்படுத்து();
const { எண்ணை_வடிவூட்டு } = எண்களைப்_பயன்படுத்து();
// Station
const latFormatté = எண்ணை_வடிவூட்டு(
computed(() =>
Number.parseFloat(props.station.coords[0].toFixed(4) || "0"),
),
);
const longFormatté = எண்ணை_வடிவூட்டு(
computed(() =>
Number.parseFloat(props.station.coords[1].toFixed(4) || "0"),
),
);
// Entrée données
const précip = ref("");
const précipValid = computed(() => {
try {
const v = parseFloat(précip.value);
if (!isNaN(v)) return true;
} catch {
return false;
}
});
const validPrécip = [
(val: string) => {
if (val === "") return true;
if (précipValid.value) return true;
return t('démo.numéroInvalid');
},
];
// Actions
const soumettreDonnée = () => {
émettre("soumettre", { précip: parseFloat(précip.value) });
précip.value = "";
}
const prendrePhoto = () => {
émettre("prendrePhoto");
}
</script>
2 changes: 0 additions & 2 deletions src/components/étapes/démo/GraphiqueStation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ const donnéesCumul = computed(()=>{
listeJours.forEach((j) => {
const obsPourCeJour = données.value.filter(d=>mêmeJour(d.date, j));
console.log({obsPourCeJour})
if (obsPourCeJour.length) {
for (const obs of obsPourCeJour) {
cumul.push({
Expand All @@ -107,7 +106,6 @@ const donnéesCumul = computed(()=>{
}
}
);
console.log({cumul})
return cumul;
})
Expand Down
118 changes: 34 additions & 84 deletions src/components/étapes/démo/SectionDémo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</v-card>
<v-divider class="my-4" />
</v-col>
<v-col :cols="mdAndUp ? 6 : 12">
<v-col v-if="mdAndUp" :cols="mdAndUp ? 6 : 12">
<v-card
class="px-6"
variant="flat"
Expand All @@ -23,12 +23,14 @@
<v-spacer />

<v-btn
v-if="mdAndUp"
icon="mdi-download"
variant="flat"
:loading="enTéléchargement"
@click="() => téléchargerDonnées()"
/>
<v-switch
v-if="false"
v-model="précipSurCarte"
true-icon="mdi-weather-pouring"
false-icon="mdi-cloud-off-outline"
Expand All @@ -39,7 +41,8 @@
<v-btn v-bind="propsActivateur" icon="mdi-cog" variant="flat"></v-btn>
</template>
<v-list>
<v-list-item class="text-color-error" title="Clear my data" @click="()=>effacerDonnées()">
<v-list-item v-if="!mdAndUp" prepend-icon="mdi-download" :title="t('démo.indiceTélécharger')" @click="() => téléchargerDonnées()" />
<v-list-item class="text-error" :title="t('démo.effacerDonnées')" @click="()=>effacerDonnées()">
<template #prepend>
<v-icon icon="mdi-delete" />
</template>
Expand All @@ -53,53 +56,13 @@
<v-img :src="observation?.image" />
</v-col>
<v-col :cols="3">
<v-card variant="flat">
<v-card-item class="px-0 pt-0">
<v-card-title>
{{ stationSélectionnée.id }}
</v-card-title>
<v-card-subtitle>
<v-icon icon="mdi-map-marker-outline" start />{{
`${latFormatté}, ${longFormatté}`
}}
<br />
<span v-if="observation">
<v-icon icon="mdi-clock-time-three-outline" start />
{{ new Date(observation.horo).toLocaleString() }}
</span>
</v-card-subtitle>
</v-card-item>
<v-card-text class="px-0">
<v-text-field
v-model="précip"
variant="outlined"
label="Input rainfall (mm)"
:rules="validPrécip"
:disabled="enSoumission"
clearable
></v-text-field>
<v-btn
class="my-2"
width="100%"
append-icon="mdi-check"
variant="outlined"
:disabled="!précip"
:loading="enSoumission"
@click="() => soumettreDonnée()"
>
Submit
</v-btn>
<v-btn
class="my-2"
width="100%"
append-icon="mdi-camera-flip-outline"
variant="outlined"
@click="() => prendrePhoto()"
>
New photo
</v-btn>
</v-card-text>
</v-card>
<EntreeDonnee
:station="stationSélectionnée"
:observation="observation"
:en-soumission="enSoumission"
@soumettre="(x) => soumettreDonnée(x.précip)"
@prendre-photo="() => prendrePhoto()"
/>
</v-col>
</v-row>
<div v-else class="mx-auto my-auto text-h5 text-center text-disabled">
Expand All @@ -114,6 +77,15 @@
</v-card-text>
</v-card>
</v-col>
<v-dialog v-else v-model="dialogueVisible">
<EntreeDonnee
:station="stationSélectionnée!"
:observation="observation"
:en-soumission="enSoumission"
@soumettre="(x) => soumettreDonnée(x.précip)"
@prendre-photo="() => prendrePhoto()"
/>
</v-dialog>
<v-col :cols="mdAndUp ? 6 : 12">
<div
class="mx-auto"
Expand Down Expand Up @@ -159,7 +131,6 @@
</template>
<script setup lang="ts">
import {
எண்களைப்_பயன்படுத்து,
கிளிமூக்கை_பயன்படுத்து,
} from "@lassi-js/kilimukku-vue";
import { useDisplay } from "vuetify";
Expand All @@ -169,10 +140,12 @@ import EtapeCours from "@/components/ÉtapeCours.vue";
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import MarqueurStation from "./MarqueurStation.vue";
import EntreeDonnee from "./EntréeDonnée.vue";
import { InfoObservation, stations } from "@/données/népal";
import { ouvrirLien } from "@/utils/utils";
import { computed, ref } from "vue";
import { utiliserDonnées } from "@/composables/données";
import { watchEffect } from "vue";
defineProps<{
nEtapes: number;
Expand All @@ -187,7 +160,6 @@ const { mdAndUp } = useDisplay();
const { மொழியாக்கம்_பயன்படுத்து } = கிளிமூக்கை_பயன்படுத்து();
const { $மொ: t } = மொழியாக்கம்_பயன்படுத்து();
const { எண்ணை_வடிவூட்டு } = எண்களைப்_பயன்படுத்து();
const {
choisirObservationAléatoire, exporterDonnées, contribuer, effacerDonnées
Expand All @@ -206,20 +178,13 @@ const téléchargerDonnées = async () => {
enTéléchargement.value = false;
};
// Station
const latFormatté = எண்ணை_வடிவூட்டு(
computed(() =>
Number.parseFloat(stationSélectionnée.value?.coords[0].toFixed(4) || "0"),
),
);
const longFormatté = எண்ணை_வடிவூட்டு(
computed(() =>
Number.parseFloat(stationSélectionnée.value?.coords[1].toFixed(4) || "0"),
),
);
const dialogueVisible = ref(false);
// Sélection photos
const observation = ref<InfoObservation>();
watchEffect(()=>{
dialogueVisible.value = !!observation.value
})
const plusDePhotos = ref(false);
let dernièreStationDemandée: string | undefined = undefined;
Expand All @@ -233,34 +198,19 @@ const prendrePhoto = async ({ idStation }: { idStation?: string } = {}) => {
if (!nouvellePhoto) plusDePhotos.value = true;
};
// Entrée données
const précip = ref("");
const précipValid = computed(() => {
try {
const v = parseFloat(précip.value);
if (!isNaN(v)) return true;
} catch {
return false;
}
});
const validPrécip = [
(val: string) => {
if (val === "") return true;
if (précipValid.value) return true;
return "Invalid number";
},
];
const enSoumission = ref(false);
const soumettreDonnée = async () => {
const soumettreDonnée = async (précip: number) => {
if (!observation.value) throw new Error("Observation non sélectionnée");
enSoumission.value = true;
await contribuer({
précip: parseFloat(précip.value),
précip,
obs: observation.value,
});
précip.value = "";
prendrePhoto({ idStation: dernièreStationDemandée });
if (mdAndUp) {
prendrePhoto({ idStation: dernièreStationDemandée });
} else {
observation.value = undefined
}
enSoumission.value = false;
};
</script>

0 comments on commit bede77d

Please sign in to comment.