From 6fcf8cd1dab5f282782d1deb68cd54f3f4d74244 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 7 May 2024 23:31:17 +0200
Subject: [PATCH] Added config page and store

For the future global sound handling
---
 src/components/YrhButton.vue                 |  4 ++
 src/components/YrhNav.vue                    | 11 ++--
 src/components/config/YrhAudioMenu.vue       | 37 +++++++++++++
 src/components/config/YrhAudioSlider.vue     |  9 ++++
 src/router/index.ts                          | 23 ++++----
 src/stores/configStore.ts                    |  8 +++
 src/views/Config.vue                         | 57 ++++++++++++++++++++
 src/views/{DataView.vue => Data.vue}         |  0
 src/views/{HomeView.vue => Home.vue}         |  8 +--
 src/views/datas/{ItemsView.vue => Items.vue} |  0
 10 files changed, 137 insertions(+), 20 deletions(-)
 create mode 100644 src/components/config/YrhAudioMenu.vue
 create mode 100644 src/components/config/YrhAudioSlider.vue
 create mode 100644 src/stores/configStore.ts
 create mode 100644 src/views/Config.vue
 rename src/views/{DataView.vue => Data.vue} (100%)
 rename src/views/{HomeView.vue => Home.vue} (88%)
 rename src/views/datas/{ItemsView.vue => Items.vue} (100%)

diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue
index b721c25..bab6721 100644
--- a/src/components/YrhButton.vue
+++ b/src/components/YrhButton.vue
@@ -2,11 +2,15 @@
 import { useElementHover, useFocus } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAppConfig } from '@/stores/configStore'
 
 const router = useRouter()
+const { globalSound } = useAppConfig()
 
 const hoverSfx = new Audio('/sounds/btn-hover.mp3')
 const clickSfx = new Audio('/sounds/btn-click.mp3')
+hoverSfx.volume = globalSound
+clickSfx.volume = globalSound
 
 const btnRef = ref<HTMLElement | null>()
 const isBtnHovered = useElementHover(btnRef)
diff --git a/src/components/YrhNav.vue b/src/components/YrhNav.vue
index afff92c..93ac457 100644
--- a/src/components/YrhNav.vue
+++ b/src/components/YrhNav.vue
@@ -24,9 +24,10 @@ function handleClickedKey(e: Event, item: MenuItem) {
 }
 
 function handleActiveBtn(e: Event, item: MenuItem) {
-  // if (document.activeElement && e.type === 'mouseenter') {
-  //   ;(document.activeElement as HTMLElement).blur()
-  // }
+  if (document.activeElement && e.type === 'mouseenter') {
+    ;(document.activeElement as HTMLElement).blur()
+  }
+
   activeKey.value = item.id
   bannerText.value = item.bannerText
 }
@@ -71,8 +72,8 @@ menu {
   position: relative;
   @apply pl-11;
 
-  li {
-    @apply mb-3;
+  li:not(:first-child) {
+    @apply mt-3;
   }
 
   &::before {
diff --git a/src/components/config/YrhAudioMenu.vue b/src/components/config/YrhAudioMenu.vue
new file mode 100644
index 0000000..a06c553
--- /dev/null
+++ b/src/components/config/YrhAudioMenu.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import YrhAudioSlider from './YrhAudioSlider.vue'
+</script>
+
+<template>
+  <menu>
+    <li>
+      <YrhAudioSlider>Volume</YrhAudioSlider>
+    </li>
+  </menu>
+</template>
+
+<style lang="scss" scoped>
+menu {
+  position: relative;
+  @apply pl-11;
+
+  li:not(:first-child) {
+    @apply mt-3;
+  }
+
+  &::before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 15px;
+    border-left-width: 8px;
+    border-right-width: 2px;
+    border-color: var(--color-y-beige-900);
+    opacity: 0.25;
+  }
+}
+</style>
diff --git a/src/components/config/YrhAudioSlider.vue b/src/components/config/YrhAudioSlider.vue
new file mode 100644
index 0000000..a9eb9b2
--- /dev/null
+++ b/src/components/config/YrhAudioSlider.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import YrhButton from '../YrhButton.vue'
+</script>
+
+<template>
+  <YrhButton>
+    <slot />
+  </YrhButton>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 80a34a8..dbf4d48 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,8 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import HomeView from '../views/HomeView.vue'
-import DataView from '../views/DataView.vue'
-import ItemsView from '@/views/datas/ItemsView.vue'
+import HomeVue from '../views/Home.vue'
+import DataVue from '../views/Data.vue'
+import ItemsVue from '@/views/datas/Items.vue'
+import ConfigVue from '@/views/Config.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,22 +11,22 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      component: HomeVue
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: ConfigVue
     },
     {
       path: '/data',
       name: 'data',
-      component: DataView,
+      component: DataVue,
       children: [
         {
           path: 'items',
           name: 'items',
-          component: ItemsView
-        },
-        {
-          path: 'items',
-          name: 'items',
-          component: ItemsView
+          component: ItemsVue
         }
       ]
     }
diff --git a/src/stores/configStore.ts b/src/stores/configStore.ts
new file mode 100644
index 0000000..dd113ec
--- /dev/null
+++ b/src/stores/configStore.ts
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppConfig = defineStore('appConfig', () => {
+  const globalSound = ref<number>(0.5)
+
+  return { globalSound }
+})
diff --git a/src/views/Config.vue b/src/views/Config.vue
new file mode 100644
index 0000000..7feaa66
--- /dev/null
+++ b/src/views/Config.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import YrhBanner from '@/components/YrhBanner.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhNav from '@/components/YrhNav.vue'
+import YrhAudioMenu from '@/components/config/YrhAudioMenu.vue'
+import type { MenuItem } from '@/models/YrhNavItem'
+import { useBannerStore } from '@/stores/banner'
+import { storeToRefs } from 'pinia'
+import { ref, onMounted } from 'vue'
+
+const { bannerText } = storeToRefs(useBannerStore())
+
+const availableRoutes: MenuItem[] = [
+  {
+    id: 'language',
+    label: 'Language',
+    bannerText: 'Change terminal language'
+  },
+  {
+    id: 'audio',
+    label: 'Audio',
+    bannerText: 'Change audio settings'
+  }
+]
+
+const activeRoute = ref<string | null>('')
+function switchActiveRoute(key: string | null) {
+  activeRoute.value = key
+}
+
+onMounted(() => {
+  bannerText.value = null
+})
+</script>
+
+<template>
+  <main class="container grid grid-rows-[auto_1fr_5vh]">
+    <YrhHeading> SYSTEM CONFIGURATION </YrhHeading>
+    <div class="grid grid-cols-4 items-center">
+      <div>
+        <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
+      </div>
+      <Transition name="fade" mode="out-in">
+        <YrhAudioMenu v-if="activeRoute === 'language'">test 1</YrhAudioMenu>
+        <div v-else-if="activeRoute === 'audio'">test 2</div>
+      </Transition>
+    </div>
+    <div>
+      <YrhBanner>
+        <Transition name="fade">
+          <span v-if="bannerText">{{ bannerText }}</span>
+          <span v-else>&#8203;</span>
+        </Transition>
+      </YrhBanner>
+    </div>
+  </main>
+</template>
diff --git a/src/views/DataView.vue b/src/views/Data.vue
similarity index 100%
rename from src/views/DataView.vue
rename to src/views/Data.vue
diff --git a/src/views/HomeView.vue b/src/views/Home.vue
similarity index 88%
rename from src/views/HomeView.vue
rename to src/views/Home.vue
index a078b08..ef2ae4c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/Home.vue
@@ -13,13 +13,14 @@ const availableRoutes: MenuItem[] = [
   {
     id: 'current-data',
     label: 'Current Data',
-    bannerText: 'Search through current file data',
+    bannerText: 'Search through android data',
     href: '/data/items'
   },
   {
     id: 'settings',
     label: 'Settings',
-    bannerText: 'Modify personnal data'
+    bannerText: 'Modify android configuration',
+    href: '/config'
   },
   {
     id: 'credits',
@@ -74,8 +75,7 @@ onMounted(() => {
         <YrhNav :items="availableRoutes" @change-nav="switchActiveRoute" />
       </div>
       <Transition name="fade" mode="out-in">
-        <YrhNav v-if="activeRoute === 'settings'" :items="settingsOptions" />
-        <YrhNav v-else-if="activeRoute === 'credits'" :items="settingsOptions" />
+        <YrhNav v-if="activeRoute === 'credits'" :items="settingsOptions" />
       </Transition>
     </div>
     <div>
diff --git a/src/views/datas/ItemsView.vue b/src/views/datas/Items.vue
similarity index 100%
rename from src/views/datas/ItemsView.vue
rename to src/views/datas/Items.vue