Timer: Add Buttons and Function && StayLogIn when checked

app/static/app/css/custom.css

@@ -33,8 +33,8 @@
 }
 
 #header-color-block {
-    border-bottom-left-radius: 2rem;
-    border-bottom-right-radius: 2rem;
+    border-bottom-left-radius: 3rem;
+    border-bottom-right-radius: 3rem;
     height: 7vh;
 }
 

app/static/app/js/serviceworker.js

@@ -1,25 +1,14 @@
 var staticCacheName = "django-pwa-v" + new Date().getTime();
 var filesToCache = [
-    '/app',
+    '/app/home',
 ];
-
-// Cache on install
-// self.addEventListener("install", event => {
-//     this.skipWaiting();
-//     event.waitUntil(
-//         caches.open(staticCacheName)
-//             .then(cache => {
-//                 return cache.addAll(filesToCache);
-//             })
-//     )
-// });
 self.addEventListener("install", event => {
     this.skipWaiting();
     event.waitUntil(
         caches.open(staticCacheName)
             .then(cache => {
-        return fetch('/app')
-        .then(response => cache.put('/app', new Response(response.body)));
+        return fetch('/app/home')
+        .then(response => cache.put('/app/home', new Response(response.body)));
             })
     )
 });
@@ -46,7 +35,7 @@ self.addEventListener("fetch", event => {
                 return response || fetch(event.request);
             })
             .catch(() => {
-                return caches.match('app');
+                return caches.match('app/home');
             })
     )
 });

app/static/app/js/timer.js

@@ -0,0 +1,77 @@
+let timerInterval;
+const timerDisplay = document.getElementById('timerDisplay');
+const secondsDisplay = document.getElementById('secondsDisplay');
+const startButton = document.getElementById('startTimer');
+const resetButton = document.getElementById('resetTimer');
+const pauseButton = document.getElementById('pauseTimer');
+
+// Funktion zum Anzeigen der Zeit
+function displayTime(seconds) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+    timerDisplay.textContent = 
+        String(hours).padStart(2, '0') + ":" +
+        String(minutes).padStart(2, '0');
+    secondsDisplay.textContent =
+        ":" +
+        String(secs).padStart(2, '0');
+}
+
+function timerIsRunning() {
+    document.getElementById('startTimer').classList.add('d-none')
+    document.getElementById('pauseTimer').classList.remove('d-none')
+    document.getElementById('resetTimer').classList.remove('d-none')
+    document.getElementById('timerDisplay').style.color = 'rgb(131,169,96)'
+}
+
+function timerIsReset() {
+    document.getElementById('startTimer').classList.remove('d-none')
+    document.getElementById('pauseTimer').classList.add('d-none')
+    document.getElementById('resetTimer').classList.add('d-none')
+    document.getElementById('timerDisplay').style.color = 'black'
+}
+
+function timerIsPause() {
+    document.getElementById('startTimer').classList.remove('d-none')
+    document.getElementById('pauseTimer').classList.add('d-none')
+    document.getElementById('timerDisplay').style.color = 'rdb(43,100,110)'
+}
+
+// Timer starten und Startzeit im localStorage speichern
+startButton.addEventListener('click', () => {
+    const startTime = Date.now();
+    localStorage.setItem('startTime', startTime);
+    timerIsRunning();
+    startTimer(startTime);
+});
+
+// Timer zurücksetzen und Speicher leeren
+resetButton.addEventListener('click', () => {
+    clearInterval(timerInterval);
+    localStorage.removeItem('startTime');
+    timerIsReset();
+    displayTime(0);
+});
+
+pauseButton.addEventListener('click', () => {
+
+})
+
+// Timer-Funktion, die die vergangene Zeit seit dem Start berechnet
+function startTimer(startTime) {
+    clearInterval(timerInterval);  // Vorherigen Timer stoppen, falls vorhanden
+    timerInterval = setInterval(() => {
+        const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
+        displayTime(elapsedSeconds);
+    }, 1000);
+}
+
+// Überprüfen, ob ein Timer beim Laden der Seite bereits läuft
+window.addEventListener('load', () => {
+    const savedStartTime = localStorage.getItem('startTime');
+    if (savedStartTime) {
+        startTimer(parseInt(savedStartTime));
+        timerIsRunning();
+    }
+});

app/templates/app/base.html

@@ -16,8 +16,14 @@
 <body id="body" style="overflow: hidden;" class="bg-white-color">
     <!-- HEADER -->
     <div class="container-fluid header-bg-block bg-white-color" id="header-bg-block">
-        <div class="container-fluid header-color-block text-center bg-white-color" id="header-color-block" style="color: white;">
+        <div class="container-fluid row justify-content-around header-color-block text-center bg-white-color" id="header-color-block" style="color: white; width: 108vw;">
+            
+            <span class="col-3 d-none" id="refresh_icon"><img onclick="window.location.reload();" src="{% static 'app/images/refresh.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
+            
             <h2 id="HeaderText" class="pt-2" style="display: none;"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h2>
+            
+            <span class="col-3 d-none" id="settings_icon"><img src="{% static 'app/images/settings.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
+
         </div>
     </div>
 

app/templates/app/home.html

@@ -1,4 +1,5 @@
 {% extends 'app/base.html' %} 
+{% load static %}
 
 {% block content %}
 <script>
@@ -20,13 +21,6 @@
     </p>
     <br>
     <button class="btn btn-primary" id="allOk">Alles klar</button>
-
-    <script>
-        document.getElementById("allOk").addEventListener('click', function(){
-            document.getElementById('welcome_content').style.display = 'none';
-            document.getElementById('dashboard').classList.remove('d-none');
-        })
-    </script>
 </div>
 
 <div class="d-none" id="dashboard">
@@ -49,12 +43,20 @@
     <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;">
         <div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
             <p style="font-size: 1.2rem;"><b>Timer</b></p>
-            <p style="font-size: 2.5rem;">00:00h</p>
+            <div class="row justify-content-between" style="margin-top: -1rem;">
+                <p class="col-5"><b id="timerDisplay" style="font-size: 2.5rem;">00:00</b><i id="secondsDisplay" style="font-size: 1rem;"></i></p>
+                <div class="col-7 row justify-content-center">
+                    <img id="startTimer" src="{% static 'app/images/play.png' %}" alt="play" class="img-fluid col-6" style="height: 55px;">
+                    <img id="pauseTimer" src="{% static 'app/images/pause.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px;">
+                    <img id="resetTimer" src="{% static 'app/images/stop.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px">
+                </div>
+                <script src="{% static 'app/js/timer.js' %}"></script>
+            </div>
         </div>
     </div>
     <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
         <div class="col-12" style="height: 45vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
-            <p style="font-size: 1.2rem;"><b>Aktivitäten</b></p>
+            <p style="font-size: 1.2rem;" ><b>Aktivitäten</b></p>
             <table class="table table-striped">
                 <thead>
                   <tr>
@@ -85,4 +87,21 @@
     </div>    
 </div>
 
+<script>
+    function setAllOk() {
+        document.getElementById('welcome_content').style.display = 'none';
+        document.getElementById('dashboard').classList.remove('d-none');
+        document.getElementById('refresh_icon').classList.remove('d-none')
+        document.getElementById('settings_icon').classList.remove('d-none')
+    }
+
+    document.getElementById("allOk").addEventListener('click', function(){
+        setAllOk();
+        localStorage.setItem('infoReadAllRead', "true");
+    })
+
+    const ReadingState = localStorage.getItem('infoReadAllRead');
+    if (ReadingState === "true") {setAllOk();}
+</script>
+
 {% endblock %}

app/templates/app/login.html

@@ -24,7 +24,7 @@
           <input type="password" class="form-control" id="exampleInputPassword1">
         </div>
         <div class="form-group form-check">
-          <input type="checkbox" class="form-check-input" id="exampleCheck1">
+          <input type="checkbox" class="form-check-input" id="checkBox">
           <label class="form-check-label" for="exampleCheck1">Eingeloggt bleiben</label>
         </div>
         <!-- <button type="submit" class="btn btn-primary">Login</button> -->
@@ -43,6 +43,22 @@
 </div>
 
 <script>
+
+    document.getElementById('checkBox').addEventListener('change', () => {
+      const AllowedSaveData = document.getElementById('checkBox').checked
+      console.log("MOIN")
+      if (AllowedSaveData) {
+        localStorage.setItem('RememberLoginData', "true");
+      }
+    })
+
+    window.addEventListener('load', () => {
+      const IfRememberLoginData = localStorage.getItem('RememberLoginData');
+      if (IfRememberLoginData === "true") {
+        window.location = './home'
+      }
+    })
+
     document.getElementById('button').addEventListener('click', function() {
         // Elemente nach links aus dem Bildschirm bewegen
         document.getElementById('content').classList.add('slide-out');