new release

TODO.md

@@ -1,10 +1,7 @@
 - lezioni annullate
-- update checkbox todo subito [teoricamente fatto]
-- edit esame [sembra funzionare ???!]
-- invio su voto <-- ??? non ha senso
-- service esami usare gli store (per automatizzare il delete e l'insert)
 - CFU in settings
-- titolo migliore per cfu in settings
-- grafici media e cfu
 - tema personalizzato
-- suggetsions esami
+- suggestions esami
+- prediction cfu => nuova media
+- prediction laurea
+- info generali per la biccoca (dove trovare aule, elearning, ecc)

app/backend/services/examService.ts

@@ -30,10 +30,11 @@ export module examService {
   export function set(name, value, id = null, grade = null) {
     if (id) {
       db.prepare(
-        "UPDATE exams SET value = @value, grade = @grade WHERE id = @id"
+        "UPDATE exams SET name = @name, value = @value, grade = @grade WHERE id = @id"
       ).run({
         id: id,
         value,
+        name,
         grade,
       });
 

app/frontend/components/Exam/Exam.svelte

@@ -3,13 +3,13 @@
   import { scale, fly } from "svelte/transition";
   import { shell } from "electron";
   import NewExamForm from "@components/NewExamForm/NewExamForm.svelte";
+  import { examStore } from "app/frontend/stores";
 
   export let exam;
 
   let fullView = false;
 
   let deletePopupOpen = false;
-  let deleted = false;
 
   let editing = false;
 
@@ -33,7 +33,6 @@
 
   function remove() {
     examService.remove(exam.id);
-    deleted = true;
     deletePopupOpen = false;
   }
 
@@ -43,6 +42,17 @@
 
     examService.set(exam);
 
+    examStore.update((state) => {
+      state.exams = state.exams.map((ex) => {
+        if (ex.id == exam.id) {
+          ex.grade = exam.grade;
+        }
+        return ex;
+      });
+
+      return state;
+    });
+
     completePopupOpen = false;
   }
 
@@ -55,31 +65,28 @@
   });
 </script>
 
-{#if !deleted}
-  <button
-    class={`exam ${completed ? "completed" : ""}`}
-    in:scale
-    out:scale
-    on:click={(e) => (fullView = true)}
-  >
-    <div class="title">{exam.name}</div>
-    <div class="tools">
-      <button
-        class="delete"
-        on:click|stopPropagation={() => (deletePopupOpen = true)}
-        >Elimina</button
-      >
-      <button
-        class="clear"
-        on:click|stopPropagation={() => (completePopupOpen = true)}
-        >Completa</button
-      >
-      {#if exam.grade != 0 && exam.grade != null}
-        <div class="grade">Voto: {exam.grade}</div>
-      {/if}
-    </div>
-  </button>
-{/if}
+<button
+  class={`exam ${completed ? "completed" : ""}`}
+  in:scale
+  out:scale
+  on:click={(e) => (fullView = true)}
+>
+  <div class="title">{exam.name}</div>
+  <div class="tools">
+    <button
+      class="delete"
+      on:click|stopPropagation={() => (deletePopupOpen = true)}>Elimina</button
+    >
+    <button
+      class="clear"
+      on:click|stopPropagation={() => (completePopupOpen = true)}
+      >Completa</button
+    >
+    {#if exam.grade != 0 && exam.grade != null}
+      <div class="grade">Voto: {exam.grade}</div>
+    {/if}
+  </div>
+</button>
 
 {#if deletePopupOpen}
   <div class="deletePopup-container" in:scale out:scale>
@@ -110,13 +117,15 @@
           placeholder="voto"
           value={exam.grade || ""}
         />
+        <input class="complete" type="submit" value="Salva" />
         <button
           class="close"
           on:click|preventDefault={(e) => {
+            console.log(e);
+
             if (e.screenX != 0) completePopupOpen = false;
           }}>Chiudi</button
         >
-        <input class="complete" type="submit" value="Salva" />
       </form>
     </div>
   </div>

app/frontend/components/Exam/exam.scss

@@ -184,6 +184,7 @@
 
             .complete {
                 background-color: var(--color_6);
+                order: 1;
             }
         }
     }

app/frontend/components/ExamsSide/ExamsSide.svelte

@@ -6,19 +6,20 @@
 
   let exams = [];
   let credits = 0;
-  let average = 0;
+  let average = 0; // ? Forse ?
+  let maxCredits = 180;
 
   examStore.subscribe(() => {
     exams = $examStore.exams;
     average = 0;
     credits = 0;
 
     exams.forEach((exam) => {
-      if (exam.grade) credits += Number(exam.value);
+      if (exam.grade && exam.grade >= 18) credits += Number(exam.value);
     });
 
     exams.forEach((exam) => {
-      if (!exam.grade) return;
+      if (!exam.grade || exam.grade < 18) return;
 
       const weight = exam.value / credits;
 
@@ -33,8 +34,45 @@
   <button class="new" on:click={() => (openForm = true)}
     >Aggiungi un esame</button
   >
-  <div class="average">
-    <div class="subtitle">Media pesata: {average.toFixed(2)}</div>
+  <div class="pies">
+    <div class="average">
+      <div class="subtitle">Media</div>
+      <div class="progress-container">
+        <div class="value">{average.toFixed(2)}</div>
+        <svg height="200" width="200">
+          <circle cx="100" cy="100" r="80" stroke-width="32" class="outer" />
+          <circle
+            cx="100"
+            cy="100"
+            r="80"
+            stroke-width="16"
+            class="inner"
+            style={`stroke-dashoffset: ${
+              6.28 * 80 - (average / 30) * 6.28 * 80
+            }px`}
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="credits">
+      <div class="subtitle">CFU</div>
+      <div class="progress-container">
+        <div class="value">{credits}</div>
+        <svg height="200" width="200">
+          <circle cx="100" cy="100" r="80" stroke-width="32" class="outer" />
+          <circle
+            cx="100"
+            cy="100"
+            r="80"
+            stroke-width="16"
+            class="inner"
+            style={`stroke-dashoffset: ${
+              6.28 * 80 - (credits / maxCredits) * 6.28 * 80
+            }px`}
+          />
+        </svg>
+      </div>
+    </div>
   </div>
 </div>
 

app/frontend/components/ExamsSide/examsSide.scss

@@ -1,12 +1,22 @@
 @import "../../scss/variables.scss";
 
+
+
+@keyframes offsettozero {
+    to {
+        stroke-dashoffset: 20px;
+    }
+}
+
 .examsSide {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     padding: 32px;
+    display: flex;
+    flex-direction: column;
 
     .title {
         @include title;
@@ -16,12 +26,77 @@
         @include button;
     }
 
-    .average {
-        margin-top: 32px;
+    .pies {
+        display: flex;
+        justify-content: space-around;
+
+
+
+        .average,
+        .credits {
+            margin-top: 32px;
+            background-color: var(--color_1);
+            padding: 32px;
+            border-radius: 16px;
+            width: fit-content;
+
+            .subtitle {
+                @include subtitle;
+                text-align: center;
+            }
+
+            .progress-container {
+                position: relative;
+
+                .value {
+                    position: absolute;
+                    top: calc(50% - 25px);
+                    left: 0;
+                    width: 100%;
+                    z-index: 1;
+                    font-size: 2rem;
+                    text-align: center;
+                }
+
+                svg {
+                    $circumference: 6.28 * 80px; // TAU * radius
+                    transform: rotate(-90deg);
+                    fill: transparent;
+                    border-radius: 32px;
+
+                    circle.inner {
+                        transition: 2s;
+                        stroke-dasharray: $circumference;
+                        stroke-dashoffset: $circumference;
+                        stroke-dashoffset: 20px;
+                        fill: var(--color_2);
+                    }
+
+                    circle.outer {
+                        stroke: var(--color_2);
+                    }
+                }
+            }
+        }
+
+        .average {
+            .subtitle {
+                color: var(--color_7);
+            }
+
+            circle.inner {
+                stroke: var(--color_7);
+            }
+        }
+
+        .credits {
+            .subtitle {
+                color: var(--color_3);
+            }
 
-        .subtitle {
-            @include subtitle;
-            color: var(--color_4);
+            circle.inner {
+                stroke: var(--color_3);
+            }
         }
     }
 }

app/frontend/components/NewExamForm/NewExamForm.svelte

@@ -63,10 +63,13 @@
   function submitForm(e) {
     e.preventDefault();
 
+    console.log(examName, credits);
+
     examService
       .set({
         name: examName,
         value: credits,
+        grade: exam?.grade,
         id: exam?.id,
       })
       .then((data: { id: number }) => {

app/frontend/components/Settings/Settings.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div class="settings" in:fly={{ x: -200 }} out:fly={{ x: 200 }}>
-  <div class="title">Impostazioni</div>
+  <div class="title">Pannello di controllo</div>
 
   <div class="subtitle">Profilo</div>
   <button class="switchProfile" on:click={() => bridgeService.message("setup")}

app/frontend/components/Settings/settings.scss

@@ -1,12 +1,17 @@
 @import "../../scss/variables.scss";
 
 .settings {
-    position: absolute;
     display: flex;
     flex-direction: column;
+    position: absolute;
+    width: calc(100% - 64px);
+    height: calc(100% - 64px);
+    left: 32px;
+    margin: 0 auto;
 
     .title {
         @include title;
+        border-bottom: 2px solid var(--color_7);
     }
 
     .subtitle {

app/frontend/components/SettingsSide/SettingsSide.svelte

@@ -12,14 +12,16 @@
     <button
       class="telegram"
       on:click={() => shell.openExternal("https://t.me/nespoli")}
-      >Telegram</button
-    > <br />
+    >
+      Telegram
+    </button> <br />
     Il codice è accessibile qui: <br />
     <button
       class="github"
       on:click={() => shell.openExternal("https://github.com/NespoliBT/esami")}
-      >Github</button
     >
+      GitHub
+    </button>
   </div>
 </div>