Proton (resolves #33), documents & document signing (linked to MeetPl…

…an/MeetPlanBackend#7) - one more document needs to be signed, communication fixes, dark mode (resolves #45), improved UI on mobile devices (resolves #47)
MeetPlan · Aug 4, 2022 · 09765fd · 09765fd
1 parent 6d67f71
commit 09765fd
Show file tree

Hide file tree

Showing 32 changed files with 1,429 additions and 7,380 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,9 +9,15 @@
     "start": "sirv public --no-clear -s",
     "tauri": "tauri",
     "tauri-build": "TAURI=true tauri build",
-    "tauri-dev": "TAURI=true tauri dev"
+    "tauri-dev": "TAURI=true tauri dev",
+    "prepare": "npm run smui-theme-light && npm run smui-theme-dark",
+    "smui-theme-light": "smui-theme compile public/build/smui.css -i src/theme",
+    "smui-theme-dark": "smui-theme compile public/build/smui-dark.css -i src/theme/dark"
   },
   "devDependencies": {
+    "@material/elevation": "^14.0.0",
+    "@material/theme": "^14.0.0",
+    "@material/typography": "^14.0.0",
     "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -25,6 +31,7 @@
     "@smui/dialog": "^6.0.0-beta.16",
     "@smui/drawer": "^6.0.0-beta.16",
     "@smui/list": "^6.0.0-beta.16",
+    "@smui/menu-surface": "^6.0.0-beta.16",
     "@smui/paper": "^6.0.0-beta.16",
     "@smui/ripple": "^6.0.0-beta.16",
     "@smui/select": "^6.0.0-beta.16",
@@ -37,6 +44,8 @@
     "@types/marked": "^4.0.3",
     "apexcharts": "^3.35.3",
     "date-fns": "^2.28.0",
+    "insane": "^2.6.2",
+    "is-mobile": "^3.1.1",
     "jwt-decode": "^3.1.2",
     "marked": "^4.0.17",
     "rollup": "^2.75.7",
@@ -50,6 +59,7 @@
     "svelte-apexcharts": "^1.0.2",
     "svelte-avatar": "^1.1.1",
     "svelte-check": "^2.8.0",
+    "svelte-dnd-action": "^0.9.18",
     "svelte-material-ui": "^6.0.0-beta.16",
     "svelte-preprocess": "^4.10.7",
     "svelte-routing": "^1.6.0",

diff --git a/public/global.css b/public/global.css
@@ -5,7 +5,6 @@ html, body {
 }
 
 body {
-	color: #333;
 	margin: 0;
 	padding: 8px;
 	box-sizing: border-box;
@@ -61,3 +60,28 @@ button:not(:disabled):active {
 button:focus {
 	border-color: #666;
 }
+
+.drawer-container {
+	position: relative;
+	display: flex;
+	height: 100%;
+	width: 600px;
+	border: 1px solid
+	var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.1));
+	overflow: hidden;
+	z-index: 0;
+}
+
+.app-content {
+	flex: auto;
+	overflow: auto;
+	position: relative;
+	flex-grow: 1;
+}
+
+.main-content {
+	overflow: auto;
+	padding: 16px;
+	height: 100%;
+	box-sizing: border-box;
+}
diff --git a/public/index.html b/public/index.html
@@ -5,8 +5,18 @@
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
-	<link rel="stylesheet" href="https://unpkg.com/svelte-material-ui/bare.css">
+
+	<!-- SMUI Styles -->
+	<link
+			rel="stylesheet"
+			href="/build/smui.css"
+			media="(prefers-color-scheme: light)"
+	/>
+	<link
+			rel="stylesheet"
+			href="/build/smui-dark.css"
+			media="screen and (prefers-color-scheme: dark)"
+	/>
 
 	<title>MeetPlan</title>
 

diff --git a/src/Admin/Users.svelte b/src/Admin/Users.svelte
@@ -38,15 +38,15 @@
 
     let choices = ["unverified", "student", "parent", "teacher", "food organizer", "school psychologist", "principal assistant", "principal"];
 
-    import jwt_decode, { JwtPayload } from "jwt-decode";
+    import jwt_decode from "jwt-decode";
     import { navigate } from "svelte-routing";
 
     const token = localStorage.getItem("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
 
-    const decoded = jwt_decode<JwtPayload>(token);
+    const decoded = jwt_decode(token);
 </script>
 
 <Drawer active="users" />

diff --git a/src/App.svelte b/src/App.svelte
@@ -25,6 +25,7 @@
 	import UserSettings from "./UserSettings.svelte";
 	import ProtonSettings from "./ProtonSettings.svelte";
 	import ErrorPage from "./ErrorPage.svelte";
+	import Documents from "./Documents.svelte";
 
 	export let url = "";
 </script>
@@ -74,6 +75,7 @@
 			<Route path="/classes" component="{Classes}" />
 			<Route path="/settings" component="{Settings}" />
 			<Route path="/notifications" component="{Notifications}" />
+			<Route path="/documents" component="{Documents}" />
 			<Route path="/settings/user" component="{UserSettings}" />
 			<Route path="/proton/settings" component="{ProtonSettings}" />
 			<Route path="/napaka" component="{ErrorPage}" />

diff --git a/src/Class.svelte b/src/Class.svelte
@@ -12,14 +12,14 @@
     import Textfield from "@smui/textfield";
     import HelperText from '@smui/textfield/helper-text';
     import {navigate} from "svelte-routing";
-    import jwt_decode, {JwtPayload} from "jwt-decode";
+    import jwt_decode from "jwt-decode";
 
     const token = localStorage.getItem("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
 
-    const decoded = jwt_decode<JwtPayload>(token);
+    const decoded = jwt_decode(token);
 
     let myClasses;
     let students;

diff --git a/src/ClassUser.svelte b/src/ClassUser.svelte
@@ -14,14 +14,15 @@
     import IconButton, { Icon } from '@smui/icon-button';
 
     import Accordion, { Panel, Header, Content } from '@smui-extra/accordion';
-    import jwt_decode, { JwtPayload } from "jwt-decode";
+    import jwt_decode from "jwt-decode";
 
     import * as marked from 'marked';
 
     import List, {
         Item,
         Meta,
     } from '@smui/list';
+    import insane from "insane";
 
     let grades;
     let userData;
@@ -152,7 +153,7 @@
         navigate("/login");
     }
 
-    const decoded = jwt_decode<JwtPayload>(token);
+    const decoded = jwt_decode(token);
 
     const translatedSegments = {
         "DONE": "NAREJENO",
@@ -349,7 +350,7 @@
         {#each improvements as improvement}
             <h2>{improvement.MeetingName}</h2>
             Vpisal {improvement.TeacherName}
-            {@html marked.marked(improvement.Message)}
+            {@html insane(marked.marked(improvement.Message))}
         {/each}
         <p/>
     </main>

diff --git a/src/Classes.svelte b/src/Classes.svelte
@@ -18,14 +18,14 @@
 
     import { navigate } from "svelte-routing";
     import {baseurl} from "./constants";
-    import jwt_decode, {JwtPayload} from "jwt-decode";
+    import jwt_decode from "jwt-decode";
 
     const token = localStorage.getItem("key");
     if (token === null || token === undefined) {
         navigate("/login");
     }
 
-    const decoded = jwt_decode<JwtPayload>(token);
+    const decoded = jwt_decode(token);
 
     let items = [];
     let teachers = [];

diff --git a/src/Communication.svelte b/src/Communication.svelte
@@ -19,12 +19,13 @@
 
     import Button, {Label} from "@smui/button";
     import Icon from '@smui/textfield/icon';
-    import jwt_decode, {JwtPayload} from "jwt-decode";
+    import jwt_decode from "jwt-decode";
+    import insane from "insane";
 
     export let id: string = "";
 
     const token = localStorage.getItem("key");
-    const decoded = jwt_decode<JwtPayload>(token);
+    const decoded = jwt_decode(token);
 
     function getCommunication() {
         fetch(`${baseurl}/communication/get/${id}`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}})
@@ -115,6 +116,76 @@
     }
 </script>
 
+{#if rerenderDrawer}<Drawer active={"communication" + id} communicationActive={id} openDialog={openDialog} />{/if}
+<AppContent class="app-content">
+    <main class="main-content">
+        {#if comm}
+            <h1>{comm.Title}</h1>
+            {#each comm.Messages as message}
+                <div style="white-space: nowrap;">
+                    <Avatar name={message.UserName} style="display: inline-block;"/>
+                    <h2 style="display: inline-block; text-align: center;">{message.UserName}</h2>
+                    {#if message.UserID === decoded["user_id"]}
+                        <Meta style="display: inline-block;">
+                            <Button on:click={() => deleteMessage(message.ID)}>
+                                <Icon class="material-icons">delete</Icon>
+                                <Label>Izbriši</Label>
+                            </Button>
+                        </Meta>
+                        <Meta style="display: inline-block;">
+                            <Button on:click={() => {
+                                messageEditingId = message.ID;
+                                newMessageValue = message.Body;
+                            }}>
+                                <Icon class="material-icons">edit</Icon>
+                                <Label>Uredi</Label>
+                            </Button>
+                        </Meta>
+                    {/if}
+                </div>
+                {@html insane(marked.marked(message.Body))}
+            {/each}
+            <hr>
+            <Textfield
+                    textarea
+                    bind:value={newMessageValue}
+                    style="width: 100%;"
+            />
+            {#if newMessageValue !== ""}
+                <h2>Predogled</h2>
+                {@html insane(marked.marked(newMessageValue))}
+            {/if}
+            <p/>
+            {#if messageEditingId === undefined}
+            <Button on:click={() => {
+                let fd = new FormData();
+                fd.append("body", newMessageValue)
+                fetch(`${baseurl}/communication/get/${id}/message/new`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, body: fd, method: "POST"})
+                    .then((r) => {
+                        newMessageValue = "";
+                        getCommunication();
+                    });
+            }}>
+                <Icon class="material-icons">send</Icon>
+                <Label>Pošlji</Label>
+            </Button>
+            {:else}
+                <Button on:click={() => editMessage()}>
+                    <Icon class="material-icons">done</Icon>
+                    <Label>Končaj z urejanjem</Label>
+                </Button>
+                <Button on:click={() => {
+                    messageEditingId = undefined;
+                    newMessageValue = "";
+                }}>
+                    <Icon class="material-icons">close</Icon>
+                    <Label>Končaj z urejanjem brez shranjevanja sprememb</Label>
+                </Button>
+            {/if}
+        {/if}
+    </main>
+</AppContent>
+
 <Dialog
         bind:open
         aria-labelledby="simple-title"
@@ -216,76 +287,4 @@
             </Label>
         </Button>
     </Actions>
-</Dialog>
-
-{#if rerenderDrawer}
-    <Drawer active={"communication" + id} communicationActive={id} openDialog={openDialog} />
-{/if}
-<AppContent class="app-content">
-    <main class="main-content">
-        {#if comm}
-            <h1>{comm.Title}</h1>
-            {#each comm.Messages as message}
-                <div style="white-space: nowrap;">
-                    <Avatar name={message.UserName} style="display: inline-block;"/>
-                    <h2 style="display: inline-block; text-align: center;">{message.UserName}</h2>
-                    {#if message.UserID === decoded["user_id"]}
-                        <Meta style="display: inline-block;">
-                            <Button on:click={() => deleteMessage(message.ID)}>
-                                <Icon class="material-icons">delete</Icon>
-                                <Label>Izbriši</Label>
-                            </Button>
-                        </Meta>
-                        <Meta style="display: inline-block;">
-                            <Button on:click={() => {
-                                messageEditingId = message.ID;
-                                newMessageValue = message.Body;
-                            }}>
-                                <Icon class="material-icons">edit</Icon>
-                                <Label>Uredi</Label>
-                            </Button>
-                        </Meta>
-                    {/if}
-                </div>
-                {@html marked.marked(message.Body)}
-            {/each}
-            <hr>
-            <Textfield
-                    textarea
-                    bind:value={newMessageValue}
-                    style="width: 100%;"
-            />
-            {#if newMessageValue !== ""}
-                <h2>Predogled</h2>
-                {@html marked.marked(newMessageValue)}
-            {/if}
-            <p/>
-            {#if messageEditingId === undefined}
-            <Button on:click={() => {
-                let fd = new FormData();
-                fd.append("body", newMessageValue)
-                fetch(`${baseurl}/communication/get/${id}/message/new`, {headers: {"Authorization": "Bearer " + localStorage.getItem("key")}, body: fd, method: "POST"})
-                    .then((r) => {
-                        newMessageValue = "";
-                        getCommunication();
-                    });
-            }}>
-                <Icon class="material-icons">send</Icon>
-                <Label>Pošlji</Label>
-            </Button>
-            {:else}
-                <Button on:click={() => editMessage()}>
-                    <Icon class="material-icons">done</Icon>
-                    <Label>Končaj z urejanjem</Label>
-                </Button>
-                <Button on:click={() => {
-                    messageEditingId = undefined;
-                    newMessageValue = "";
-                }}>
-                    <Icon class="material-icons">close</Icon>
-                    <Label>Končaj z urejanjem brez shranjevanja sprememb</Label>
-                </Button>
-            {/if}
-        {/if}
-    </main>
-</AppContent>
+</Dialog>