Ajout routeur et kilimukku

reseau-constellation · Feb 27, 2024 · c992110 · c992110
1 parent ac445dc
commit c992110
Show file tree

Hide file tree

Showing 13 changed files with 370 additions and 152 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -9,7 +9,12 @@ declare module 'vue' {
   export interface GlobalComponents {
     'CarteFonctionalité': typeof import('./src/components/CarteFonctionalité.vue')['default']
     CarteUtilisation: typeof import('./src/components/CarteUtilisation.vue')['default']
+    'ItemLangueProgrès': typeof import('./src/components/ItemLangueProgrès.vue')['default']
+    MenuLangues: typeof import('./src/components/MenuLangues.vue')['default']
     PagePrincipale: typeof import('./src/components/PagePrincipale.vue')['default']
+    'PageTéléchargements': typeof import('./src/components/PageTéléchargements.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     TitreSection: typeof import('./src/components/TitreSection.vue')['default']
   }
 }
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/logo mini.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Constellation</title>
 </head>

diff --git a/public/logo mini.svg b/public/logo mini.svg
diff --git a/src/App.vue b/src/App.vue
@@ -1,13 +1,23 @@
 <template>
   <v-app>
-    <v-main>
-      <PagePrincipale />
-    </v-main>
+    <v-locale-provider :rtl="dàg">
+      <v-main>
+        <MenuLangues />
+        <router-view v-slot="{ Component }">
+          <transition name="fade">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </v-main>
+    </v-locale-provider>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import PagePrincipale from './components/PagePrincipale.vue';
+import { மொழிகளைப்_பயன்படுத்து } from '@lassi-js/kilimukku-vue';
+
+// Direction texte
+const {வலதிலிருந்து_இடது_மொழி} = மொழிகளைப்_பயன்படுத்து();
+const dàg = வலதிலிருந்து_இடது_மொழி();
 
-  //
 </script>
diff --git a/src/components/ItemLangueProgrès.vue b/src/components/ItemLangueProgrès.vue
@@ -0,0 +1,50 @@
+<template>
+  <v-list-item>
+    <template #prepend>
+      <v-icon
+        v-if="selectionnee"
+        color="primary"
+      >
+        mdi-check-bold
+      </v-icon>
+    </template>
+
+    <template #title>
+      {{ nom || code }}
+    </template>
+
+    <template #append>
+      <v-icon
+        v-if="progrèsPourcentage === 1"
+        color="primary"
+      >
+        mdi-check-circle
+      </v-icon>
+      <v-progress-circular
+        v-else
+        :model-value="progrèsPourcentage * 100"
+        size="20"
+        color="primary"
+      ></v-progress-circular>
+    </template>
+  </v-list-item>
+</template>
+<script setup lang="ts">
+import {computed} from 'vue';
+import {கிளிமூக்கை_பயன்படுத்து} from '@lassi-js/kilimukku-vue';
+const props = defineProps<{code: string; selectionnee: boolean}>();
+
+const {கிடைக்கும்_மொழிகளை_பயன்படுத்து, மொழி_முன்னேற்றத்தை_பயன்படுத்து} = கிளிமூக்கை_பயன்படுத்து();
+const {மொழியின்_பெயர்} = கிடைக்கும்_மொழிகளை_பயன்படுத்து({});
+
+const {மொழி_முன்னேற்றம்} = மொழி_முன்னேற்றத்தை_பயன்படுத்து({
+  மொழி: props.code,
+  வகை: 'வார்த்தை',
+});
+const progrèsPourcentage = computed(() => {
+  return (
+    (மொழி_முன்னேற்றம்.value?.அங்கீகரிக்கப்பட்டவை || 0) / (மொழி_முன்னேற்றம்.value?.மொத்தம் || 0)
+  );
+});
+const nom = மொழியின்_பெயர்(props.code);
+</script>
diff --git a/src/components/MenuLangues.vue b/src/components/MenuLangues.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-btn
+    :style="'position: absolute;' + (isRtl ? 'left:' : 'right:') + '20px; top: 20px'"
+    icon="mdi-earth"
+    size="small"
+  >
+    <v-icon size="large"></v-icon>
+
+    <v-menu
+      activator="parent"
+      offset="10px"
+      min-width="225"
+      :location="isRtl ? 'bottom right' : 'bottom left'"
+    >
+      <v-list>
+        <v-progress-linear
+          v-if="!constellationPrète"
+          height="1"
+          color="primary"
+          :indeterminate="!constellationPrète"
+        ></v-progress-linear>
+        <v-divider v-else />
+        <v-text-field
+          v-model="rechercheLangue"
+          density="compact"
+          prepend-inner-icon="mdi-magnify"
+          autofocus
+          hide-details
+          @click.stop
+        ></v-text-field>
+        <v-list
+          class="overflow-y-auto"
+          max-height="400px"
+          min-width="200px"
+        >
+          <item-langue
+            v-for="code in languesDisponibles"
+            :key="code"
+            :code="code"
+            :selectionnee="code === மொழி"
+            @click="() => மொழிகளை_தேர்ந்தெடுக்கொள்ளு(code)"
+          />
+        </v-list>
+      </v-list>
+    </v-menu>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import {useRtl} from 'vuetify';
+import {மொழிகளைப்_பயன்படுத்து} from '@lassi-js/kilimukku-vue';
+
+import ItemLangue from '@/components/ItemLangueProgrès.vue';
+import {கிளிமூக்கை_பயன்படுத்து} from '@lassi-js/kilimukku-vue';
+
+import {computed, ref} from 'vue';
+
+const constellationPrète = ref(false);
+
+
+const {கிடைக்கும்_மொழிகளை_பயன்படுத்து} = கிளிமூக்கை_பயன்படுத்து();
+const {மொழிகளும்_குறியீடுகளும்} = கிடைக்கும்_மொழிகளை_பயன்படுத்து({});
+const {மொழியாக்கம்_பயன்படுத்து} = கிளிமூக்கை_பயன்படுத்து();
+const {$மொ: t} = மொழியாக்கம்_பயன்படுத்து({});
+
+const {isRtl} = useRtl();
+
+const {மொழி, மொழிகளை_தேர்ந்தெடுக்கொள்ளு} = மொழிகளைப்_பயன்படுத்து();
+
+// Recherche
+const rechercheLangue = ref<string>();
+const languesDisponibles = computed(() => {
+  return மொழிகளும்_குறியீடுகளும்.value
+    .filter(
+      lng =>
+        !rechercheLangue.value ||
+        lng.குறியீடு.includes(rechercheLangue.value) ||
+        lng.மொழி.includes(rechercheLangue.value),
+    )
+    .map(lng => lng.குறியீடு);
+});
+</script>
+
+<style></style>