Merge pull request #47 from moghwan/develop

prod(#16): 0.7.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bouayadapp-front",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/TheDay.vue

@@ -72,20 +72,20 @@
                   </td>
                 </tr>
                 <!--section 2: cites-->
-                <tr class="border-b">
+                <tr class="border-b" v-auto-animate>
                   <td @click="getByCity(city)"
                       :class="[!isTooSmall ? 'text-base' : 'text-sm', selectedCityId === city.id ? 'bg-gray-50': '']"
                       class="font-light py-2 cursor-pointer hover:bg-gray-100 transition-all"
                       v-for="city in RTLCities.slice(4, 8)" :key="city.id">
-                    {{ city.name }}
+                    {{ city.name_ar }}
                   </td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b" v-auto-animate>
                   <td @click="getByCity(city)"
                       :class="[!isTooSmall ? 'text-base' : 'text-sm', selectedCityId === city.id ? 'bg-gray-50': '']"
                       class="font-light py-2 cursor-pointer hover:bg-gray-100 transition-all"
                       v-for="city in RTLCities.slice(0, 4)" :key="city.id">
-                    {{ city.name }}
+                    {{ city.name_ar }}
                   </td>
                 </tr>
                 <!--section 3: filahi date with salate times-->
@@ -127,7 +127,9 @@
 import {ref, computed, toRefs, onMounted} from "vue";
 import SalateElement from "@/components/partials/salateElement.vue";
 import { useCityStore } from "@/stores/city"
+import {useSettingsStore} from "@/stores/settings";
 
+const settingsStore = useSettingsStore();
 const store = useCityStore();
 const props = defineProps({
   data: {
@@ -144,18 +146,22 @@ const currentTime = ref(new Date());
 const showBack = ref(false);
 const showFirstHikma = ref(true);
 const defaultCities = ref([
-  {id: 1, name: "الرباط"},
-  {id: 99, name: "مكناس"},
-  {id: 81, name: "فاس"},
-  {id: 31, name: "وجدة"},
-  {id: 156, name: "العيون"},
-  {id: 117, name: "أغادير"},
-  {id: 107, name: "مراكش"},
-  {id: 58, name: "البيضاء"},
+  {id: 1, name_ar: "الرباط"},
+  {id: 99, name_ar: "مكناس"},
+  {id: 81, name_ar: "فاس"},
+  {id: 31, name_ar: "وجدة"},
+  {id: 156, name_ar: "العيون"},
+  {id: 117, name_ar: "أغادير"},
+  {id: 107, name_ar: "مراكش"},
+  {id: 58, name_ar: "البيضاء"},
 ])
+const selectedCities = ref(settingsStore.selectedCities)
 
-const RTLCities = computed(() => defaultCities.value.slice(0).reverse())
-
+const RTLCities = computed(() => {
+  return selectedCities.value.length > 0
+    ? selectedCities.value.slice(0).reverse()
+    : defaultCities.value.slice(0).reverse()
+})
 const countHikamsFront = computed(() => data.value.events.hikams_front.length)
 const firstHikmaF = computed(() => data.value.events.hikams_front[0])
 const secondHikmaF = computed(() => data.value.events.hikams_front[1])

src/components/partials/CitiesDropdown.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+
+      <button id="dropdownSearchButton"
+              @click="clicked = !clicked"
+              data-dropdown-toggle="dropdownSearch"
+              data-dropdown-placement="bottom"
+              class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
+        اختيار المدن
+        <IconCaretDown class="w-5 h-5"/>
+      </button>
+
+      <!-- Dropdown menu -->
+      <div dir="rtl" id="dropdownSearch" class="z-10 bg-white rounded-lg shadow w-60 dark:bg-gray-700" v-show="clicked">
+          <div class="p-3">
+              <label for="input-group-search" class="sr-only">بحث</label>
+              <div class="relative">
+                  <div class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <IconX v-if="cityQuery" @click="cityQuery=''" class="cursor-pointer w-5 h-5 text-gray-500 dark:text-gray-400"/>
+                  </div>
+                  <input type="text" v-model="cityQuery" id="input-group-search" placeholder="بحث" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500">
+              </div>
+          </div>
+          <ul v-auto-animate class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
+              <li v-for="city in filteredCities" :key="city.id">
+                  <div class="flex items-center pl-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+                      <label :for="'checkbox-item-' + city.id" class="w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">{{ city.name_ar }}</label>
+                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.some(c => c.id === city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" :checked="selectedCities.some(c => c.id === city.id)" class="js-city-checkbox-item accent-gray-600 w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                  </div>
+              </li>
+          </ul>
+          <span @click="clearSelected" class="cursor-pointer flex justify-between p-3 pl-4 text-sm font-medium text-red-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500">
+            مسح كل الاختيارات
+            <IconZoomCancel/>
+          </span>
+      </div>
+
+  </div>
+</template>
+
+<script setup>
+import {IconZoomCancel, IconX, IconCaretDown} from "@tabler/icons-vue";
+import {computed, ref} from "vue";
+import {useSettingsStore} from "@/stores/settings";
+const settingsStore = useSettingsStore();
+
+const props = defineProps({
+  cities: { required: true },
+});
+
+const clicked = ref(false)
+const selectedCities = ref(settingsStore.selectedCities);
+const cityQuery = ref('');
+
+const clearSelected = () => {
+  selectedCities.value.splice(0);
+  settingsStore.updateSelectedCities(selectedCities.value);
+  
+  const checkboxes = document.querySelectorAll('input.js-city-checkbox-item[type="checkbox"]');
+  checkboxes.forEach((checkbox) => {
+    checkbox.checked = false;
+  });
+}
+
+const refreshSelected = (cityId) => {
+  const selectedCity = props.cities.find(city => city.id === cityId);
+
+  if (selectedCity) {
+    const cityIndex = selectedCities.value.findIndex(city => city.id === cityId);
+
+    if (cityIndex !== -1) {
+      selectedCities.value.splice(cityIndex, 1);
+    } else if (selectedCities.value.length < 8) {
+      selectedCities.value.push({ id: cityId, name_ar: selectedCity.name_ar, name: selectedCity.name });
+    }
+
+    settingsStore.updateSelectedCities(selectedCities.value);
+  }
+};
+
+const disableCheckbox = computed(() => selectedCities.value.length >= 8)
+
+const filteredCities = computed(() => {
+  if(!props.cities) return [];
+  return props.cities.filter(city =>
+    city.name.toLowerCase().includes(cityQuery.value.toLowerCase()) ||
+    city.name_ar.includes(cityQuery.value) ||
+    city.id.toString().includes(cityQuery.value)
+  );
+});
+
+</script>

src/components/partials/Nav/SectionsNav.vue

@@ -3,7 +3,7 @@
     <div class="flex space-x-1 rounded-lg bg-gray-100 p-1.5" role="tablist" aria-orientation="horizontal">
       <SectionsNavElement
               v-for="menuItem in menuItems"
-              @parent-selectnavitem="selectNavItem"
+              @click="selectItem(menuItem.id)"
               :selected="selected"
               :id="menuItem.id"
               :label="menuItem.label"
@@ -17,16 +17,38 @@
 
 <script setup>
 import SectionsNavElement from "@/components/partials/Nav/SectionsNavElement.vue";
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 import {useSettingsStore} from "@/stores/settings";
 
 const settingsStore = useSettingsStore();
 const selected = ref(settingsStore.selectedSection)
 const menuItems = [
     {id: 1, label: "مواقيت الصلوات", route: "#", name: "salatetimes"},
-    // {id: 2, label: "رمضان", route: "#", name: "ramadanmode"},
-    // {id: 3, label: "الإعدادات", route: "#", name: "settings"},
+    {id: 2, label: "الإعدادات", route: "#", name: "settings"},
 ]
-const selectNavItem = (i) => selected.value = i;
 
+onMounted(() => {
+    selectItem(settingsStore.selectedSection)
+})
+
+const selectItem = (i) => {
+    i === false ? i = 1 : null;
+
+    selected.value = i
+    settingsStore.updateSelectedSection(i)
+
+    settingsStore.hideVisibilitySalateTimes()
+    settingsStore.hideVisibilitySettings()
+
+    switch (i) {
+        case 1:
+            settingsStore.showVisibilitySalateTimes()
+            break
+        case 2:
+            settingsStore.showVisibilitySettings()
+            break
+        default:
+            settingsStore.showVisibilitySalateTimes()
+    }
+}
 </script>

src/components/partials/Nav/SectionsNavElement.vue

@@ -1,26 +1,20 @@
 <template>
     <button
       type="button"
-      @click="selectItem(id)"
-      :aria-selected="selected === id"
-      :class="selected === id ? 'bg-white shadow' : null"
+      :aria-selected="parseInt(selected) === id"
+      :class="parseInt(selected) === id ? 'bg-white shadow' : null"
       class="flex items-center rounded-md py-4 px-4 text-sm font-semibold lg:pr-3"
     >
-        <span class="sr-only xl:not-sr-only lg:ml-2 text-slate-900">{{ label }}</span>
-        <IconMoonFilled v-if="name === 'ramadanmode'" :color="selected === id ? 'black' : 'gray'" />
-        <IconClock2 v-if="name === 'salatetimes'" :color="selected === id ? 'black' : 'gray'" />
-        <IconSettings v-if="name === 'settings'" :color="selected === id ? 'black' : 'gray'" />
+        <span class="sr-only lg:not-sr-only lg:ml-2 text-slate-900">{{ label }}</span>
+        <IconMoonFilled v-if="name === 'ramadanmode'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
+        <IconClock2 v-if="name === 'salatetimes'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
+        <IconSettings v-if="name === 'settings'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
 
     </button>
 </template>
 
 <script setup>
 import {IconClock2, IconMoonFilled, IconSettings} from "@tabler/icons-vue";
-import {useSettingsStore} from "@/stores/settings";
-import {onMounted} from "vue";
-
-const emit = defineEmits(['parent-selectnavitem'])
-const settingsStore = useSettingsStore();
 
 const props = defineProps({
     selected: { required: true },
@@ -30,20 +24,4 @@ const props = defineProps({
     name: {required: true },
 });
 
-const selectItem = (i) => {
-    emit('parent-selectnavitem', i);
-    settingsStore.updateSelectedSection(i)
-    
-    settingsStore.hideVisibilitySalateTimes()
-    settingsStore.hideVisibilityRamadanDashboard()
-    settingsStore.hideVisibilitySettings()
-    
-    props.name === 'ramadanmode' ? settingsStore.showVisibilityRamadanDashboard() : null
-    props.name === 'salatetimes' ? settingsStore.showVisibilitySalateTimes() : null
-    props.name === 'settings' ? settingsStore.showVisibilitySettings() : null
-}
-
-onMounted(() => {
-    selectItem(settingsStore.selectedSection)
-})
 </script>

src/components/sections/Settings.vue

@@ -1,10 +1,37 @@
 <template>
-  <div>
-    <IconSettings color="black" />
-    settings
+  <div class="p-5 bg-gray-100 flex flex-col">
+      <div class="flex flex-row justify-center p-5 pt-0">
+          الإعدادات
+      </div>
+      <div class="flex flex-col bg-white h-full rounded-lg p-12">
+        <div class="flex flex-row align-middle justify-between">
+          <CitiesDropdown :cities="cities"/>
+          <span>إختر المدن المفضلة لديك (في حدود 8 مدن)</span>
+        </div>
+      </div>
   </div>
 </template>
 
 <script setup>
-import {IconSettings} from "@tabler/icons-vue";
+import {onMounted, ref} from "vue";
+import CitiesDropdown from "@/components/partials/CitiesDropdown.vue";
+const cities = ref(null);
+
+onMounted(() => fetchData())
+
+async function fetchData() {
+    const HOST   = process.env.RA_HOST || import.meta.env.VITE_BOUAYADAPP_API_URL;
+    const SECRET = process.env.RA_SECRET || import.meta.env.VITE_BOUAYADAPP_API_SECRET;
+
+    const options = {
+        "method": "GET",
+        "headers": {
+            "x-rapidapi-host": HOST,
+            "x-rapidapi-key": SECRET
+        }
+    };
+    const response = await fetch(`https://${HOST}/cities`, options);
+    cities.value = await response.json();
+    cities.value = cities.value.data;
+}
 </script>

src/stores/settings.js

@@ -4,23 +4,22 @@ import { useLocalStorage } from "@vueuse/core"
 
 export const useSettingsStore = defineStore("settings", () => {
     const selectedSection = ref(useLocalStorage('selectedSection', 1));
+    const selectedCities = ref(useLocalStorage('selectedCities', []));
 
     const displayMode = ref(useLocalStorage('displayMode', displayModes.isFull));
-    const showRamadanDashboard = ref(useLocalStorage('showRamadanDashboard', false));
     const showSalateTimes = ref(useLocalStorage('showSalateTimes', false));
     const showSettings = ref(useLocalStorage('showSettings', false));
 
     const updateSelectedSection = (id) => {
         selectedSection.value = id
     }
+    const updateSelectedCities = (cities) => {
+        selectedCities.value = cities
+    }
     const switchDisplayMode = () => displayMode.value = !displayMode.value;
     // const showDisplayMode = () => displayMode.value = true;
     // const hideDisplayMode = () => displayMode.value = false;
 
-    const switchVisibilityRamadanDashboard = () => showRamadanDashboard.value = !showRamadanDashboard.value;
-    const showVisibilityRamadanDashboard = () => showRamadanDashboard.value = true;
-    const hideVisibilityRamadanDashboard = () => showRamadanDashboard.value = false;
-
     const switchVisibilitySalateTimes = () => showSalateTimes.value = !showSalateTimes.value;
     const showVisibilitySalateTimes = () => showSalateTimes.value = true;
     const hideVisibilitySalateTimes = () => showSalateTimes.value = false;
@@ -31,9 +30,9 @@ export const useSettingsStore = defineStore("settings", () => {
 
     return { 
         displayMode, switchDisplayMode,
-        showRamadanDashboard, switchVisibilityRamadanDashboard, showVisibilityRamadanDashboard, hideVisibilityRamadanDashboard,
         showSalateTimes, switchVisibilitySalateTimes, showVisibilitySalateTimes, hideVisibilitySalateTimes,
         showSettings, switchVisibilitySettings, showVisibilitySettings, hideVisibilitySettings,
         selectedSection, updateSelectedSection,
+        selectedCities, updateSelectedCities,
     };
 });

src/views/HomeView.vue

@@ -1,9 +1,10 @@
 <template>
-  <div v-auto-animate="{ duration: 500 }" class="gap-16">
-    <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel ? '' : 'hidden xl:flex'"/>
-    <div class="w-full md:w-auto h-screen md:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white my-10" v-if="data && showPanel">
+  <div v-auto-animate="{ duration: 500 }" class="gap-0">
+    <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel || isTooSmall ? '' : 'hidden xl:flex'" class=" lg:m-10"/>
+    <div class="w-full 2xl:w-7/12 h-screen lg:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white lg:m-10" v-if="data && showPanel && !isTooSmall">
       <SalateTimes class="flex w-full h-5/6" v-if="showSalateTimes"/>
-      <SectionsNav class="p-5"/>
+      <Settings class="flex w-full h-5/6" v-if="showSettings"/>
+      <SectionsNav class="mt-10"/>
     </div>
 
     <button @click="settingsStore.switchDisplayMode()" :class="isTooSmall ? 'hidden' : null" class="fixed bottom-10 right-8 bg-gray-50 w-12 h-12 rounded-full drop-shadow-lg flex justify-center items-center hover:drop-shadow-xl">
@@ -20,6 +21,7 @@ import Spinner from "@/components/partials/SpinnerLoader.vue";
 import {useCityStore} from "@/stores/city"
 import {useSettingsStore} from "@/stores/settings"
 import SalateTimes from "@/components/sections/SalateTimes.vue";
+import Settings from "@/components/sections/Settings.vue";
 import SectionsNav from "@/components/partials/Nav/SectionsNav.vue";
 import { IconLayoutCards } from '@tabler/icons-vue';
 
@@ -56,5 +58,6 @@ const isTooSmall = computed(() => windowWidth.value <= 500)
 const refreshTheDay = (cityId) => cityId ? fetchData(cityId) : fetchData(selectedCityId.value)
 const showPanel = computed(() => settingsStore.displayMode)
 const showSalateTimes = computed(() => settingsStore.showSalateTimes)
+const showSettings = computed(() => settingsStore.showSettings)
 
 </script>