From 26e7f75d770164ba8562d4d212124a89b83c0264 Mon Sep 17 00:00:00 2001
From: kernoeb <kernoeb@protonmail.com>
Date: Tue, 29 Oct 2024 20:06:38 +0100
Subject: [PATCH] chore: improve timezone selection

---
 .idea/dataSources.local.xml     |   2 +-
 components/DialogSettings.vue   | 525 ++++++++++++++++----------------
 components/HelpInfo.vue         |   8 +-
 components/TimezoneSelector.vue |   9 +-
 4 files changed, 276 insertions(+), 268 deletions(-)

diff --git a/.idea/dataSources.local.xml b/.idea/dataSources.local.xml
index 7518b7d..93fac2e 100644
--- a/.idea/dataSources.local.xml
+++ b/.idea/dataSources.local.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="dataSourceStorageLocal" created-in="WS-242.23726.96">
+  <component name="dataSourceStorageLocal" created-in="WS-243.20847.31">
     <data-source name="@localhost" uuid="a3958675-dcf7-490d-b6e1-3516deac097e">
       <database-info product="Mongo DB" version="7.0.5" jdbc-version="4.2" driver-name="MongoDB JDBC Driver" driver-version="1.18" dbms="MONGO" exact-version="7.0.5" exact-driver-version="1.18" />
       <case-sensitivity plain-identifiers="mixed" quoted-identifiers="mixed" />
diff --git a/components/DialogSettings.vue b/components/DialogSettings.vue
index 0cf9426..b6714aa 100644
--- a/components/DialogSettings.vue
+++ b/components/DialogSettings.vue
@@ -45,281 +45,294 @@
         <v-list-item-group
           :value="settings"
           multiple
-          class="pa-2"
           :class="$vuetify.theme.dark ? 'custom_swatch-dark' : 'custom_swatch-light'"
           @change="$emit('change_settings', $event)"
         >
-          <v-subheader>{{ $config.i18n.ui }}</v-subheader>
-          <v-list-item
-            inactive
-            style="cursor:pointer;"
-          >
-            <v-list-item-action>
-              <v-checkbox
-                v-model="checkedTheme"
-                :indeterminate-icon="mdiCheckboxBlankOutline"
-                :off-icon="mdiCheckboxBlankOutline"
-                :on-icon="mdiCheckboxMarked"
-              />
-            </v-list-item-action>
+          <div class="pa-2">
+            <v-subheader>{{ $config.i18n.ui }}</v-subheader>
+            <v-list-item
+              inactive
+              style="cursor:pointer;"
+            >
+              <v-list-item-action>
+                <v-checkbox
+                  v-model="checkedTheme"
+                  :indeterminate-icon="mdiCheckboxBlankOutline"
+                  :off-icon="mdiCheckboxBlankOutline"
+                  :on-icon="mdiCheckboxMarked"
+                />
+              </v-list-item-action>
 
-            <v-list-item-content @click="$vuetify.theme.dark = !$vuetify.theme.dark">
-              <v-list-item-title>{{ $config.i18n.lightThemeMsg }}</v-list-item-title>
-              <v-list-item-subtitle>{{ $config.i18n.lightThemeDesc }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item
-            inactive
-            style="cursor:pointer;"
-          >
-            <v-list-item-action>
-              <v-checkbox
-                v-model="checkedFullDark"
-                :indeterminate-icon="mdiCheckboxBlankOutline"
-                :off-icon="mdiCheckboxBlankOutline"
-                :on-icon="mdiCheckboxMarked"
-              />
-            </v-list-item-action>
-            <v-list-item-content @click="forceFullMode()">
-              <v-list-item-title>Événements sombres</v-list-item-title>
-              <v-list-item-subtitle>Encore plus dark (mode forcé)</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item
-            inactive
-            style="cursor:pointer;"
-          >
-            <v-list-item-action>
-              <v-checkbox
-                v-model="checkedMergeDuplicates"
-                :indeterminate-icon="mdiCheckboxBlankOutline"
-                :off-icon="mdiCheckboxBlankOutline"
-                :on-icon="mdiCheckboxMarked"
-              />
-            </v-list-item-action>
-            <v-list-item-content @click="switchMergeDuplicates()">
-              <v-list-item-title>Fusionner les événements identiques</v-list-item-title>
-              <v-list-item-subtitle>Pour les utilisateurs qui doivent sélectionner plusieurs plannings</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-subheader>{{ $config.i18n.colors }}</v-subheader>
-          <v-list-item inactive>
-            <v-list-item-action>
-              <v-swatches
-                v-model="colorTD"
-                :background-color="$vuetify.theme.dark ? '#151515' : '#fff'"
-                :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
-                show-fallback
-                fallback-input-type="color"
-                @input="setColor('td', $event)"
-              />
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>TD</v-list-item-title>
-              <v-list-item-subtitle>{{ $config.i18n.types.td }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item inactive>
-            <v-list-item-action>
-              <v-swatches
-                v-model="colorTP"
-                :background-color="$vuetify.theme.dark ? '#000' : '#fff'"
-                :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
-                show-fallback
-                fallback-input-type="color"
-                @input="setColor('tp', $event)"
-              />
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>TP</v-list-item-title>
-              <v-list-item-subtitle>{{ $config.i18n.types.tp }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item inactive>
-            <v-list-item-action>
-              <v-swatches
-                v-model="colorAmphi"
-                :background-color="$vuetify.theme.dark ? '#000' : '#fff'"
-                :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
-                show-fallback
-                fallback-input-type="color"
-                @input="setColor('amphi', $event)"
-              />
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>Amphis</v-list-item-title>
-              <v-list-item-subtitle>{{ $config.i18n.types.amphi }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item inactive>
-            <v-list-item-action>
-              <v-swatches
-                v-model="colorOthers"
-                :background-color="$vuetify.theme.dark ? '#000' : '#fff'"
-                :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
-                show-fallback
-                fallback-input-type="color"
-                @input="setColor('other', $event)"
-              />
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>{{ $config.i18n.others }}</v-list-item-title>
-              <v-list-item-subtitle>{{ $config.i18n.types.other }}</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <div
-            class="pl-4 mb-2"
-            style="font-weight: 300; font-size: 15px;"
-            @click="reset()"
-          >
-            <a class="hover_reset">Réinitialiser</a>
+              <v-list-item-content @click="$vuetify.theme.dark = !$vuetify.theme.dark">
+                <v-list-item-title>{{ $config.i18n.lightThemeMsg }}</v-list-item-title>
+                <v-list-item-subtitle>{{ $config.i18n.lightThemeDesc }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item
+              inactive
+              style="cursor:pointer;"
+            >
+              <v-list-item-action>
+                <v-checkbox
+                  v-model="checkedFullDark"
+                  :indeterminate-icon="mdiCheckboxBlankOutline"
+                  :off-icon="mdiCheckboxBlankOutline"
+                  :on-icon="mdiCheckboxMarked"
+                />
+              </v-list-item-action>
+              <v-list-item-content @click="forceFullMode()">
+                <v-list-item-title>Événements sombres</v-list-item-title>
+                <v-list-item-subtitle>Encore plus dark (mode forcé)</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item
+              inactive
+              style="cursor:pointer;"
+            >
+              <v-list-item-action>
+                <v-checkbox
+                  v-model="checkedMergeDuplicates"
+                  :indeterminate-icon="mdiCheckboxBlankOutline"
+                  :off-icon="mdiCheckboxBlankOutline"
+                  :on-icon="mdiCheckboxMarked"
+                />
+              </v-list-item-action>
+              <v-list-item-content @click="switchMergeDuplicates()">
+                <v-list-item-title>Fusionner les événements identiques</v-list-item-title>
+                <v-list-item-subtitle>Pour les utilisateurs qui doivent sélectionner plusieurs plannings</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <v-subheader>{{ $config.i18n.colors }}</v-subheader>
+            <v-list-item inactive>
+              <v-list-item-action>
+                <v-swatches
+                  v-model="colorTD"
+                  :background-color="$vuetify.theme.dark ? '#151515' : '#fff'"
+                  :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
+                  show-fallback
+                  fallback-input-type="color"
+                  @input="setColor('td', $event)"
+                />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>TD</v-list-item-title>
+                <v-list-item-subtitle>{{ $config.i18n.types.td }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item inactive>
+              <v-list-item-action>
+                <v-swatches
+                  v-model="colorTP"
+                  :background-color="$vuetify.theme.dark ? '#000' : '#fff'"
+                  :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
+                  show-fallback
+                  fallback-input-type="color"
+                  @input="setColor('tp', $event)"
+                />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>TP</v-list-item-title>
+                <v-list-item-subtitle>{{ $config.i18n.types.tp }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item inactive>
+              <v-list-item-action>
+                <v-swatches
+                  v-model="colorAmphi"
+                  :background-color="$vuetify.theme.dark ? '#000' : '#fff'"
+                  :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
+                  show-fallback
+                  fallback-input-type="color"
+                  @input="setColor('amphi', $event)"
+                />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>Amphis</v-list-item-title>
+                <v-list-item-subtitle>{{ $config.i18n.types.amphi }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item inactive>
+              <v-list-item-action>
+                <v-swatches
+                  v-model="colorOthers"
+                  :background-color="$vuetify.theme.dark ? '#000' : '#fff'"
+                  :trigger-style="{ width: '30px', height: '30px', borderRadius: '5px' }"
+                  show-fallback
+                  fallback-input-type="color"
+                  @input="setColor('other', $event)"
+                />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>{{ $config.i18n.others }}</v-list-item-title>
+                <v-list-item-subtitle>{{ $config.i18n.types.other }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <div
+              class="pl-4 mb-2"
+              style="font-weight: 300; font-size: 15px;"
+              @click="reset()"
+            >
+              <a class="hover_reset">Réinitialiser</a>
+            </div>
           </div>
+
           <v-divider />
-          <v-subheader>{{ $config.i18n.blocklist }}</v-subheader>
-          <v-list-item inactive>
-            <v-combobox
-              v-model="blocklistSelect"
-              :append-icon="mdiMenuDown"
-              :search-input.sync="blocklistSelectSearch"
-              :items="blocklist"
-              :label="$config.i18n.blocklistDesc"
-              chips
-              multiple
-              class="ban-word"
-              @change="updateBlocklist"
-            >
-              <template #selection="{ attrs, item, parent, selected }">
-                <v-chip
-                  v-bind="attrs"
-                  :input-value="selected"
-                  label
-                  small
-                >
-                  <span class="pr-2">
-                    {{ item }}
-                  </span>
+
+          <div class="pa-2 mt-3">
+            <v-subheader style="height: 20px">
+              {{ $config.i18n.blocklist }}
+            </v-subheader>
+            <v-list-item inactive>
+              <v-combobox
+                v-model="blocklistSelect"
+                :append-icon="mdiMenuDown"
+                :search-input.sync="blocklistSelectSearch"
+                :items="blocklist"
+                :label="$config.i18n.blocklistDesc"
+                chips
+                multiple
+                class="ban-word pt-0"
+                @change="updateBlocklist"
+              >
+                <template #selection="{ attrs, item, parent, selected }">
+                  <v-chip
+                    v-bind="attrs"
+                    :input-value="selected"
+                    label
+                    small
+                  >
+                    <span class="pr-2">
+                      {{ item }}
+                    </span>
+                    <v-btn
+                      icon
+                      x-small
+                      @click="parent.selectItem(item)"
+                    >
+                      <v-icon
+                        small
+                        color="red"
+                      >
+                        {{ mdiClose }}
+                      </v-icon>
+                    </v-btn>
+                  </v-chip>
+                </template>
+                <template #item="{ item, on, attrs }">
+                  <v-list-item
+                    v-bind="attrs"
+                    v-on="on"
+                  >
+                    <v-list-item-action>
+                      <v-checkbox
+                        :indeterminate-icon="mdiCheckboxBlankOutline"
+                        :input-value="attrs.inputValue"
+                        :off-icon="mdiCheckboxBlankOutline"
+                        :on-icon="mdiCheckboxMarked"
+                      />
+                    </v-list-item-action>
+                    <v-list-item-content>
+                      <v-list-item-title>
+                        {{ item }}
+                      </v-list-item-title>
+                    </v-list-item-content>
+                  </v-list-item>
+                </template>
+                <template #append>
                   <v-btn
+                    :disabled="!blocklistSelectSearch || blocklistSelect.includes(blocklistSelectSearch)"
                     icon
-                    x-small
-                    @click="parent.selectItem(item)"
+                    @click="blocklistSelect.push(blocklistSelectSearch); blocklistSelectSearch = ''; updateBlocklist(blocklistSelect)"
                   >
-                    <v-icon
-                      small
-                      color="red"
-                    >
-                      {{ mdiClose }}
-                    </v-icon>
+                    <v-icon>{{ mdiPlus }}</v-icon>
                   </v-btn>
-                </v-chip>
-              </template>
-              <template #item="{ item, on, attrs }">
-                <v-list-item
-                  v-bind="attrs"
-                  v-on="on"
-                >
-                  <v-list-item-action>
-                    <v-checkbox
-                      :indeterminate-icon="mdiCheckboxBlankOutline"
-                      :input-value="attrs.inputValue"
-                      :off-icon="mdiCheckboxBlankOutline"
-                      :on-icon="mdiCheckboxMarked"
-                    />
-                  </v-list-item-action>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ item }}
-                    </v-list-item-title>
-                  </v-list-item-content>
-                </v-list-item>
-              </template>
-              <template #append>
-                <v-btn
-                  :disabled="!blocklistSelectSearch || blocklistSelect.includes(blocklistSelectSearch)"
-                  icon
-                  @click="blocklistSelect.push(blocklistSelectSearch); blocklistSelectSearch = ''; updateBlocklist(blocklistSelect)"
-                >
-                  <v-icon>{{ mdiPlus }}</v-icon>
-                </v-btn>
-              </template>
-            </v-combobox>
-          </v-list-item>
-          <v-list-item
-            inactive
-            style="cursor:pointer;"
-            class="mb-2"
-            :disabled="disabledHighlightTeacher"
-          >
-            <v-list-item-action>
-              <v-checkbox
-                v-model="checkedHighlightTeacher"
-                :disabled="disabledHighlightTeacher"
-                :indeterminate-icon="mdiCheckboxBlankOutline"
-                :off-icon="mdiCheckboxBlankOutline"
-                :on-icon="mdiCheckboxMarked"
-              />
-            </v-list-item-action>
-            <v-list-item-content @click="setHighlightTeacher()">
-              <v-list-item-title>Mettre en évidence les événements qui ont un professeur associé</v-list-item-title>
-              <v-list-item-subtitle>Les cours sans professeur associé seront grisés</v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
+                </template>
+              </v-combobox>
+            </v-list-item>
+            <v-list-item
+              inactive
+              style="cursor:pointer;"
+              class="mb-2"
+              :disabled="disabledHighlightTeacher"
+            >
+              <v-list-item-action>
+                <v-checkbox
+                  v-model="checkedHighlightTeacher"
+                  :disabled="disabledHighlightTeacher"
+                  :indeterminate-icon="mdiCheckboxBlankOutline"
+                  :off-icon="mdiCheckboxBlankOutline"
+                  :on-icon="mdiCheckboxMarked"
+                />
+              </v-list-item-action>
+              <v-list-item-content @click="setHighlightTeacher()">
+                <v-list-item-title>Mettre en évidence les événements qui ont un professeur associé</v-list-item-title>
+                <v-list-item-subtitle>Les cours sans professeur associé seront grisés</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </div>
+        </v-list-item-group>
 
-          <v-divider />
+        <v-divider />
 
-          <v-list-item
-            inactive
-            :ripple="false"
-            class="mb-2"
-          >
-            <v-list-item-content class="pt-0">
-              <lazy-timezone-selector @fetch="delayedFetch" />
-            </v-list-item-content>
-          </v-list-item>
+        <div>
+          <div class="pa-2 mt-3">
+            <v-subheader style="height: 20px">
+              Utiliser un fuseau horaire personnalisé
+            </v-subheader>
+            <lazy-timezone-selector
+              class="px-4"
+              @fetch="delayedFetch()"
+            />
+          </div>
 
-          <v-divider />
+          <v-divider class="mt-4" />
 
-          <div>
-            <v-subheader>FAQ / Aide</v-subheader>
-            <lazy-help-info style="width: 98%;" />
+          <div class="pa-2">
+            <v-subheader>
+              FAQ / Aide
+            </v-subheader>
+            <lazy-help-info />
           </div>
 
-          <br>
-
-          <v-divider />
+          <v-divider class="mt-4" />
 
-          <v-subheader>{{ $config.i18n.contact }}</v-subheader>
-          <v-list-item inactive>
-            <div class="d-flex flex-column mb-4">
-              <div>
-                <v-icon
-                  class="mr-2 mt-n1"
-                  size="15"
-                >
-                  {{ mdiTwitter }}
-                </v-icon>
-                Twitter : <a
-                  href="https://twitter.com/kernoeb"
-                  target="_blank"
-                >@kernoeb</a>
-              </div>
-              <div>
-                <v-icon
-                  class="mr-2 mt-n1"
-                  size="15"
-                >
-                  {{ mdiMail }}
-                </v-icon>
-                Mail : <a
-                  href="mailto:kernoeb@protonmail.com"
-                  target="_blank"
-                >kernoeb@protonmail.com</a>
+          <div class="pa-2">
+            <v-subheader>{{ $config.i18n.contact }}</v-subheader>
+            <div class="px-4">
+              <div class="d-flex flex-column">
+                <div>
+                  <v-icon
+                    class="mr-2 mt-n1"
+                    size="15"
+                  >
+                    {{ mdiTwitter }}
+                  </v-icon>
+                  Twitter : <a
+                    href="https://twitter.com/kernoeb"
+                    target="_blank"
+                  >@kernoeb</a>
+                </div>
+                <div>
+                  <v-icon
+                    class="mr-2 mt-n1"
+                    size="15"
+                  >
+                    {{ mdiMail }}
+                  </v-icon>
+                  Mail : <a
+                    href="mailto:kernoeb@protonmail.com"
+                    target="_blank"
+                  >kernoeb@protonmail.com</a>
+                </div>
               </div>
             </div>
-          </v-list-item>
-          <v-list-item inactive>
-            <div><small><b>❤️ Donateurs :</b> Ewennn ⭐, W00dy, Rick, Lahgolz, Dyskal, Mimipepin, Atao, PandAmiral, ShockedPlot, BatLeDev, Louanne M., RidzArt, EDM115</small></div>
-          </v-list-item>
-        </v-list-item-group>
+            <v-card elevation="0">
+              <v-card-text>
+                <div><small><b>❤️ Donateurs :</b> Ewennn ⭐, W00dy, Rick, Lahgolz, Dyskal, Mimipepin, Atao, PandAmiral, ShockedPlot, BatLeDev, Louanne M., RidzArt, EDM115</small></div>
+              </v-card-text>
+            </v-card>
+          </div>
+        </div>
       </v-card>
     </v-dialog>
   </div>
diff --git a/components/HelpInfo.vue b/components/HelpInfo.vue
index 2db2b19..dfec11b 100644
--- a/components/HelpInfo.vue
+++ b/components/HelpInfo.vue
@@ -4,19 +4,19 @@
     focusable
   >
     <v-expansion-panel>
-      <v-expansion-panel-header>Le planning n'est pas à l'heure ! :(</v-expansion-panel-header>
+      <v-expansion-panel-header><span><span class="mr-2">🕒</span>Le planning n'est pas à l'heure</span></v-expansion-panel-header>
       <v-expansion-panel-content>
-        <small>Ce n'est probablement pas la faute du planning <i>(toujours la faute des autres)</i>, mais plutôt du navigateur ou de l'ordinateur&nbsp;(<code>{{ new Date().toLocaleString() }}</code>). Tu peux choisir un fuseau horaire pour corriger les heures du planning.</small>
+        <small>Ce n'est probablement pas la faute du planning <i>(toujours la faute des autres)</i>, mais plutôt du navigateur ou de l'ordinateur&nbsp;(<code>{{ new Date().toLocaleString() }}</code>). Tu peux choisir un autre fuseau horaire pour corriger les heures du planning.</small>
       </v-expansion-panel-content>
     </v-expansion-panel>
     <v-expansion-panel>
-      <v-expansion-panel-header>Je veux rajouter mon planning.</v-expansion-panel-header>
+      <v-expansion-panel-header><span><span class="mr-2">📅</span>Ajouter le planning de mon université</span></v-expansion-panel-header>
       <v-expansion-panel-content>
         <small>N'hésite pas à faire une pull request sur <b>GitHub</b>, ou à me contacter, avec les informations de contact affichées ci-dessous !</small>
       </v-expansion-panel-content>
     </v-expansion-panel>
     <v-expansion-panel>
-      <v-expansion-panel-header>Faire un don</v-expansion-panel-header>
+      <v-expansion-panel-header><span><span class="mr-2">💰</span>Faire un don</span></v-expansion-panel-header>
       <v-expansion-panel-content>
         <div class="pl-1 pr-1 pt-3">
           PayPal :&nbsp;<a
diff --git a/components/TimezoneSelector.vue b/components/TimezoneSelector.vue
index 944a767..827e665 100644
--- a/components/TimezoneSelector.vue
+++ b/components/TimezoneSelector.vue
@@ -1,20 +1,15 @@
 <template>
   <div>
-    <v-subheader
-      class="my-3 pl-0"
-      style="height: 20px"
-    >
-      Utiliser un fuseau horaire personnalisé
-    </v-subheader>
     <v-autocomplete
       v-model="targetTz"
       :items="timezones"
       item-text="label"
       item-value="value"
-      label="Chercher un fuseau horaire"
+      placeholder="Chercher un fuseau horaire"
       clearable
       :clear-icon="mdiClose"
       hide-details
+      class="pt-0"
     />
     <div
       v-if="infos"