Merge pull request #50 from EliasSchaut/dev

Release v1.0.0-alpha.8

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "movie-monday-client",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
@@ -9,7 +9,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha1",
     "i18next-vue": "^2.1.1",
     "js-cookie": "^3.0.1",
     "movie-monday-manager": "file:..",

client/src/assets/css/general_elements.css

@@ -1,11 +1,17 @@
 body {
-    background-color: #f5f5f5;
+    background-color: var(--background-white);
+    color: var(--color-black);
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #333333;
     margin: 0;
     padding: 0;
 }
 
+[data-bs-theme=dark] body {
+    background-color: var(--background-black);
+    color: var(--color-white);
+}
+
+
 .content {
     margin: 0 20px 50px;
     display: flex;

client/src/assets/css/main.css

@@ -1,2 +1,3 @@
+@import "vars.css";
 @import "fonts.css";
 @import "general_elements.css";

client/src/assets/css/vars.css

@@ -0,0 +1,7 @@
+
+:root {
+    --background-white: #f5f5f5;
+    --color-white: #ffffff;
+    --background-black: var(--bs-dark);
+    --color-black: #000000;
+}

client/src/components/NavbarComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
+  <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
     <div class="container-fluid">
       <router-link class="navbar-brand" to="/">Movie Monday Manager</router-link>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -30,7 +30,24 @@
           <div class="me-lg-1 spinner-border text-secondary" role="status" v-if="store.loading">
             <span class="visually-hidden">Loading...</span>
           </div>
-          <select class="form-select" aria-label="Default select example" @change="change_lang" v-model="lang">
+
+          <div class="dropdown align-self-center">
+            <button class="btn dropdown-toggle border-0 d-flex align-items-center" data-bs-toggle="dropdown" aria-expanded="false">
+              <img v-if="store.theme === 'dark'" src="../assets/svg/moon-stars-fill-white.svg" alt="Theme Dark">
+              <img v-else-if="store.theme === 'auto' && store.theme_without_auto === 'dark'" src="../assets/svg/circle-half-white.svg" alt="Theme Auto">
+              <img v-else-if="store.theme === 'auto' && store.theme_without_auto !== 'dark'" src="../assets/svg/circle-half.svg" alt="Theme Auto">
+              <img v-else src="../assets/svg/brightness-high-fill.svg" alt="Theme Light">
+            </button>
+            <ul class="dropdown-menu">
+              <li v-if="store.theme_without_auto === 'dark'" ><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('light')"><img src="../assets/svg/brightness-high-fill-white.svg" alt="Theme Light">&nbsp;&nbsp;{{ $t("common.theme.light") }}</button></li>
+              <li v-if="store.theme_without_auto === 'dark'" ><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('dark')"><img src="../assets/svg/moon-stars-fill-white.svg" alt="Theme Dark">&nbsp;&nbsp;{{ $t("common.theme.dark") }}</button></li>
+              <li v-if="store.theme_without_auto === 'dark'" ><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('auto')"><img src="../assets/svg/circle-half-white.svg" alt="Theme Auto">&nbsp;&nbsp;{{ $t("common.theme.auto") }}</button></li>
+              <li v-if="store.theme_without_auto !== 'dark'"><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('light')"><img src="../assets/svg/brightness-high-fill.svg" alt="Theme Light">&nbsp;&nbsp;{{ $t("common.theme.light") }}</button></li>
+              <li v-if="store.theme_without_auto !== 'dark'"><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('dark')"><img src="../assets/svg/moon-stars-fill.svg" alt="Theme Dark">&nbsp;&nbsp;{{ $t("common.theme.dark") }}</button></li>
+              <li v-if="store.theme_without_auto !== 'dark'"><button class="dropdown-item d-flex align-items-center" @click="store.update_theme('auto')"><img src="../assets/svg/circle-half.svg" alt="Theme Auto">&nbsp;&nbsp;{{ $t("common.theme.auto") }}</button></li>
+            </ul>
+          </div>
+          <select class="form-select" aria-label="Select Lang" @change="change_lang" v-model="lang">
             <option value="en">{{ $t("nav.lang.en") }}</option>
             <option value="de">{{ $t("nav.lang.de") }}</option>
           </select>

client/src/components/TableComponent.vue

@@ -27,7 +27,7 @@
                     sort_dir[i] = sort_loop[sort_dir[index]];
                   }
                 }
-                sort(e, id, sort_dir[index])
+                sort((e.currentTarget as HTMLTableCellElement).cellIndex, sort_dir[index])
               }">
             <div class="d-flex justify-content-between flex-row">
               <div />
@@ -72,11 +72,18 @@ export default defineComponent({
     };
   },
   updated() {
-    if (this.filterable && !this.first_update) {
-      for (let i = 0; i < this.filter_values.length; i++) {
-        this.filter(this.id, i, this.filter_values[i]);
+    if (!this.first_update) {
+      if (this.filterable) {
+        for (let i = 0; i < this.filter_values.length; i++) {
+          this.filter(this.id, i, this.filter_values[i]);
+        }
+        this.first_update = true;
+      }
+
+      if (this.sortable && this.sort_default!.length) {
+        this.sort(this.sort_default[0] as any, this.sort_default[1] as any);
+
       }
-      this.first_update = true;
     }
   },
   props: {
@@ -92,6 +99,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    sort_default: {
+      type: Array,
+      default: []
+    },
     filterable: {
       type: Boolean,
       default: false
@@ -102,10 +113,8 @@ export default defineComponent({
     }
   },
   methods: {
-    sort(e: Event, table_id: string, sort_dir: string) {
-      const table = document.getElementById(table_id) as HTMLTableElement;
-      const th = e.currentTarget as HTMLTableCellElement;
-      const clicked_col = th.cellIndex;
+    sort(cell_index: number, sort_dir: string) {
+      const table = document.getElementById(this.id) as HTMLTableElement;
       const rows = table.rows;
       let not_sorted = true;
 
@@ -114,8 +123,8 @@ export default defineComponent({
         not_sorted = false;
 
         for (let i = 1; i < (rows.length - 1); i++) {
-          let x = rows[i].getElementsByTagName("td")[clicked_col] as HTMLElement;
-          let y = rows[i + 1].getElementsByTagName("td")[clicked_col] as HTMLElement;
+          let x = rows[i].getElementsByTagName("td")[cell_index] as HTMLElement;
+          let y = rows[i + 1].getElementsByTagName("td")[cell_index] as HTMLElement;
 
           if (sort_dir === "asc") {
             if (x.title.toLowerCase() > y.title.toLowerCase()) {

client/src/locales/de.json

@@ -34,6 +34,11 @@
       "success": "Erfolg!",
       "warning": "Warnung!",
       "danger": "Gefahr!"
+    },
+    "theme":{
+      "light": "Hell",
+      "dark": "Dunkel",
+      "auto": "Auto"
     }
   },
 

client/src/locales/en.json

@@ -34,6 +34,11 @@
       "success": "Success!",
       "warning": "Warning!",
       "danger": "Danger!"
+    },
+    "theme":{
+      "light": "Light",
+      "dark": "Dark",
+      "auto": "Auto"
     }
   },
 

client/src/util/store.ts

@@ -1,9 +1,11 @@
 import { reactive } from  'vue';
-import { get_cookie } from "@/util/cookie";
+import { get_cookie, set_cookie } from "@/util/cookie";
 
 export const store = reactive({
   logged_in: false,
   loading: false,
+  theme: 'light',
+  theme_without_auto: 'light',
   alert: {
     show: false,
     msg: "",
@@ -46,5 +48,27 @@ export const store = reactive({
 
   hide_alert() {
     this.alert.show = false;
-  }
+  },
+
+  update_theme(theme: string) {
+    set_cookie("theme", theme)
+    this.theme = theme
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+      this.theme_without_auto = 'dark'
+    } else {
+      this.theme_without_auto = (theme === 'auto') ? 'light' : theme
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  },
 })
+
+function get_theme() {
+  const theme = get_cookie("theme")
+  if (theme) {
+    return theme
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+store.update_theme(get_theme())

client/src/views/HistoryView.vue

@@ -1,5 +1,5 @@
 <template>
-  <TableComponent id="table_history" :head="[$t('history.watched_at'), $t('history.title')]" sortable style="width: 90vw; margin: 20px auto;">
+  <TableComponent id="table_history" :head="[$t('history.watched_at'), $t('history.title')]" sortable :sort_default="[0, 'desc']" style="width: 90vw; margin: 20px auto;">
     <tr v-for="movie in history">
       <td :title="movie.watched_at">{{ (new Date(movie.watched_at)).toLocaleDateString() }}</td>
       <td :title="movie.title"><a :href="movie.link" target="_blank">{{ movie.title }}</a></td>

client/src/views/HomeView.vue

@@ -6,7 +6,7 @@
             :disabled="!store.logged_in"><b>{{ $t("movie.modal.title") }} +</b></button>
     <TableComponent
       :head="['' , $t('movie.title'), $t('movie.year'), $t('movie.genre'), $t('movie.director'), $t('movie.actors'), $t('movie.imdb_rate'), $t('movie.metascore'), $t('movie.language'), $t('movie.proposer'), $t('movie.proposed_on'), $t('movie.interested')]"
-      id="table_movie" sortable filterable :filter_default="[true, true, true, true, false, false, true, false, false, true, false, true]">
+      id="table_movie" sortable :sort_default="[11, 'desc']" filterable :filter_default="[true, true, true, true, false, false, true, false, false, true, false, true]">
       <tr v-for="movie in movies" :key="movie.imdb_id" :id="movie.imdb_id">
         <td :title="movie.title">
           <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal_big_picture"
@@ -38,7 +38,8 @@
               </button>
               <button v-else :id="'v_' + movie.imdb_id" class="btn btn-outline-primary"
                       @click="vote(movie.imdb_id, votes)" :disabled="!store.logged_in">
-                <img class="fas fa-edit" src="../assets/svg/heartbreak-fill.svg" alt="heartbreak">
+                <img v-if="store.theme_without_auto === 'dark'" class="fas fa-edit" src="../assets/svg/heartbreak-fill-white.svg" alt="heartbreak">
+                <img v-else class="fas fa-edit" src="../assets/svg/heartbreak-fill.svg" alt="heartbreak">
               </button>
             </div>
           </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "movie-monday-manager",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "description": "A website for adding and voting movies for the next watch party",
   "author": "EliasSchaut",
   "private": true,