augmented width of chronometer

added keyboard shortcut to toggle chronometer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "GameClock",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Track you play time with your friends",
   "main": "./out/main/index.js",
   "author": "github.com/Didiloy",

src/renderer/src/App.vue

@@ -4,6 +4,7 @@ import Sidebar from "./components/Sidebar.vue";
 import { useRouter } from "vue-router";
 import { initialiseFirebase } from "./database/firebaseConfig";
 import { getPreferences } from "./preferences/preferences";
+import { onMounted, onUnmounted, ref } from "vue";
 const router = useRouter();
 const storeDatabases = useStoredDatabases();
 const { stored_databases, loadDatabases } = storeToRefs(storeDatabases);
@@ -19,11 +20,33 @@ import { useStore, useStoredDatabases } from "./store/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { loaded } = storeToRefs(store);
+const chrono = ref(false);
+
+function keyEventToggleChrono(e) {
+  if (
+    e.key === getPreferences("toggle_chronometer_key_shortcut").toLowerCase() ||
+    e.key === getPreferences("toggle_chronometer_key_shortcut").toUpperCase()
+  ) {
+    toggleChrono();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("keyup", keyEventToggleChrono);
+});
+onUnmounted(() => {
+  document.removeEventListener("keyup", keyEventToggleChrono);
+});
+
+function toggleChrono() {
+  chrono.value = !chrono.value;
+  console.log("chrono value:", chrono);
+}
 </script>
 
 <template>
   <div class="container">
-    <TitleBar />
+    <TitleBar :toggleChrono="chrono" />
     <div class="app-container main-background">
       <div class="sidebar">
         <Sidebar></Sidebar>

src/renderer/src/components/AddSession.vue

@@ -99,7 +99,7 @@
   <Toast />
 </template>
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 import { useToast } from "primevue/usetoast";
 import { useStore, useStoreChrono } from "../store/store";
 import { storeToRefs } from "pinia";

src/renderer/src/components/TitleBar.vue

@@ -51,6 +51,7 @@
 import { onMounted, ref, watch } from "vue";
 import { useStoreChrono } from "../store/store";
 import { storeToRefs } from "pinia";
+const props = defineProps(["toggleChrono"]);
 const store = useStoreChrono();
 
 function handleWindowControls() {
@@ -89,6 +90,13 @@ watch(duration_seconds, () => {
   store.updateChrono(duration.value);
 });
 
+watch(
+  () => props.toggleChrono,
+  () => {
+    startStopWatch();
+  }
+);
+
 function startStopWatch() {
   if (!is_chrono_running.value) {
     timestamp_start_chrono.value = Date.now();
@@ -143,7 +151,7 @@ function convertSecondsToHourMinutesSeconds(seconds) {
   height: 100%;
   -webkit-app-region: drag;
   display: grid;
-  grid-template-columns: auto 110px 138px;
+  grid-template-columns: auto 130px 138px;
 }
 
 #window-title {

src/renderer/src/components/preferences/GeneralPreference.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, watch } from "vue";
+import { getPreferences, setPreferences } from "../../preferences/preferences";
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const toggle_chronometer_key_shortcut = ref(
+  getPreferences("toggle_chronometer_key_shortcut")
+);
+
+const update_shortcut = (update_value) => {
+  if (!validateShortCut(update_value)) return;
+  setPreferences("toggle_chronometer_key_shortcut", update_value);
+};
+
+function validateShortCut(shortcut) {
+  if (shortcut.length > 1) {
+    toast.add({
+      severity: "error",
+      summary: "",
+      detail: "Vous ne pouvez mettre qu'une seule lettre",
+      life: 3000,
+    });
+    return false;
+  }
+  if (!isValidChar(shortcut)) {
+    toast.add({
+      severity: "error",
+      summary: "",
+      detail: "Vous ne pouvez mettre que des lettres",
+      life: 3000,
+    });
+    return false;
+  }
+  return true;
+}
+
+function isValidChar(character) {
+  return /[a-z]|[A-Z]|^$/.test(character);
+}
+</script>
+
+<template>
+  <div class="tp-container">
+    <h2 class="tp-title">Général</h2>
+    <div class="tp-item">
+      <b class="text-color"
+        >Raccourci clavier pour lancer/stopper le chronomètre:</b
+      >
+      <InputText
+        type="text"
+        :modelValue="toggle_chronometer_key_shortcut"
+        @update:modelValue="update_shortcut"
+        style="width: 50px"
+        maxlength="1"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tp-container {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: start;
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.text-color {
+  color: var(--text-color);
+}
+
+.tp-title {
+  color: var(--primary-500);
+}
+
+.tp-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/renderer/src/preferences/preferences.js

@@ -16,6 +16,8 @@ const defaults = {
   sort_order_team_list: "playtime",
   //database
   selected_database_index: 0,
+  //chronometer
+  toggle_chronometer_key_shortcut: "p",
 };
 
 const preferences_name = "preferences";

src/renderer/src/views/Settings.vue

@@ -3,11 +3,14 @@ import TeamsPreferences from "../components/preferences/TeamsPreferences.vue";
 import AddSessionPreferences from "../components/preferences/AddSessionPreferences.vue";
 import PieChartPreferences from "../components/preferences/PieChartPreferences.vue";
 import AddDatabasePreference from "../components/preferences/AddDatabasePreference.vue";
+import GeneralPreference from "../components/preferences/GeneralPreference.vue";
 </script>
 
 <template>
   <div class="s-container">
     <h2 class="s-title">Paramètres</h2>
+    <GeneralPreference />
+    <Divider />
     <TeamsPreferences />
     <Divider />
     <AddSessionPreferences />