refactor(frontend): change transition when pages are changed

ravenclaw900 · Nov 12, 2021 · dc01d90 · dc01d90
1 parent 6448058
commit dc01d90
Show file tree

Hide file tree

Showing 9 changed files with 382 additions and 400 deletions.
diff --git a/src/frontend/.yarn/install-state.gz b/src/frontend/.yarn/install-state.gz
diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
- import { Router, Route } from "svelte-routing";
+ import { navigate, Route, Router } from "svelte-routing";
  import { onMount } from "svelte";
  import Home from "./pages/Home.svelte";
  import Process from "./pages/Process.svelte";
@@ -84,6 +84,8 @@
  let update = "";
  let darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
  let darkIcon;
+ let blur = false;
+ let navPage = "";
  $: darkIcon = darkMode ? faMoon : faSun;
 
  const socketMessageListener = (e) => {
@@ -97,11 +99,16 @@
  if (socketData.update != undefined) {
  update = socketData.update;
  }
+ if (navPage) {
+ blur = false;
+ navigate(navPage);
+ navPage = "";
+ }
  };
  const socketOpenListener = () => {
  console.log("Connected");
  shown = true;
- pollServer();
+ pollServer(window.location.pathname);
  };
  const socketErrorListener = (e) => {
  console.error(e);
@@ -112,16 +119,25 @@
  }
  let proto = window.location.protocol == "https:" ? "wss" : "ws";
  socket = new WebSocket(
- `${proto}://${window.location.hostname}:8088/ws`
+ `${proto}://${window.location.hostname}:${window.location.port}/ws`
  );
  socket.onopen = socketOpenListener;
  socket.onmessage = socketMessageListener;
  socket.onclose = socketCloseListener;
  socket.onerror = socketErrorListener;
  };
 
- function pollServer() {
- socket.send(JSON.stringify({ page: window.location.pathname }));
+ function pollServer(page: string) {
+ socket.send(JSON.stringify({ page }));
+ navPage = page;
+ }
+
+ function changePage(page: string) {
+ if (page != window.location.pathname) {
+ blur = true;
+ pollServer(page);
+ }
+ // Continued in socketMessageListener
  }
 
  onMount(() => {
@@ -130,73 +146,66 @@
 </script>
 
 <main class="min-h-screen flex overflow-x-hidden{darkMode ? ' dark' : ''}">
- <Router {url}>
+ <div
+ class="bg-gray-900 dark:bg-black flex-grow{menu ? '' : ' shrink'}"
+ id="sidebarMenu"
+ >
  <div
- class="bg-gray-900 dark:bg-black flex-grow{menu ? '' : ' shrink'}"
- id="sidebarMenu"
+ class="hidden lg:flex whitespace-nowrap h-12 bg-dplime-dark text-2xl items-center justify-center"
  >
- <div
- class="hidden lg:flex whitespace-nowrap h-12 bg-dplime-dark text-2xl items-center justify-center"
- >
- DietPi Dashboard
- </div>
- <span on:click={pollServer}
- ><NavbarLink icon={faTachometerAlt} to="/"
- >Statistics</NavbarLink
- ></span
- >
- <span on:click={pollServer}
- ><NavbarLink icon={faMicrochip} to="process"
- >Processes</NavbarLink
- ></span
- >
- <span on:click={pollServer}
- ><NavbarLink icon={faList} to="service">Services</NavbarLink
- ></span
- >
- <span on:click={pollServer}
- ><NavbarLink icon={faDatabase} to="software"
- >Software</NavbarLink
- ></span
- >
- <NavbarLink icon={faTerminal} to="terminal">Terminal</NavbarLink>
- <span on:click={pollServer}
- ><NavbarLink icon={faUser} to="management"
- >Management</NavbarLink
- ></span
+ DietPi Dashboard
+ </div>
+ <span on:click={() => changePage("/")}
+ ><NavbarLink icon={faTachometerAlt}>Statistics</NavbarLink></span
+ >
+ <span on:click={() => changePage("/process")}
+ ><NavbarLink icon={faMicrochip}>Processes</NavbarLink></span
+ >
+ <span on:click={() => changePage("/service")}
+ ><NavbarLink icon={faList}>Services</NavbarLink></span
+ >
+ <span on:click={() => changePage("/software")}
+ ><NavbarLink icon={faDatabase}>Software</NavbarLink></span
+ >
+ <span on:click={() => navigate("/terminal")}>
+ <NavbarLink icon={faTerminal}>Terminal</NavbarLink>
+ </span>
+ <span on:click={() => changePage("/management")}
+ ><NavbarLink icon={faUser}>Management</NavbarLink></span
+ >
+ <span on:click={() => changePage("/browser")}
+ ><NavbarLink icon={faFolder}>File Browser</NavbarLink></span
+ >
+ </div>
+ <div class="w-5/6 flex flex-col flex-grow min-h-full">
+ <header class="bg-dplime h-12 grid grid-cols-3 items-center">
+ <span on:click={() => (menu = !menu)} class="justify-self-start"
+ ><Fa icon={faBars} class="btn ml-1 p-1" size="3x" /></span
  >
- <span on:click={pollServer}
- ><NavbarLink icon={faFolder} to="browser"
- >File Browser</NavbarLink
- ></span
+ <a
+ href="https://dietpi.com"
+ class="justify-self-center"
+ target="_blank"
+ ><img src={logo} alt="DietPi logo" class="h-10" /></a
  >
- </div>
- <div class="w-5/6 flex flex-col flex-grow min-h-full">
- <header class="bg-dplime h-12 grid grid-cols-3 items-center">
- <span on:click={() => (menu = !menu)} class="justify-self-start"
- ><Fa icon={faBars} class="btn ml-1 p-1" size="3x" /></span
- >
- <a
- href="https://dietpi.com"
- class="justify-self-center"
- target="_blank"
- ><img src={logo} alt="DietPi logo" class="h-10" /></a
- >
- {#if update != ""}
- <span class="text-red-500 justify-self-center"
- >DietPi update avalible: {update}</span
- >
- {/if}
- <span
- class="cursor-pointer justify-self-end mr-2"
- on:click={() => (darkMode = !darkMode)}
- ><Fa icon={darkIcon} size="lg" /></span
+ {#if update != ""}
+ <span class="text-red-500 justify-self-center"
+ >DietPi update avalible: {update}</span
  >
- </header>
- <div
- class="dark:bg-gray-900 bg-gray-100 flex-grow p-6 dark:text-white"
+ {/if}
+ <span
+ class="cursor-pointer justify-self-end mr-2"
+ on:click={() => (darkMode = !darkMode)}
+ ><Fa icon={darkIcon} size="lg" /></span
  >
- {#if shown}
+ </header>
+ <div
+ class="dark:bg-gray-900 bg-gray-100 flex-grow p-6 dark:text-white{blur
+ ? ' blur-2 filter'
+ : ''}"
+ >
+ {#if shown}
+ <Router {url}>
  <Route path="process"
  ><Process {socketData} {socket} /></Route
  >
@@ -215,32 +224,32 @@
  ><Service {socket} {socketData} /></Route
  >
  <Route path=""><h3>Page not found</h3></Route>
- {:else}
- <h3>Connecting to API...</h3>
- {/if}
+ </Router>
+ {:else}
+ <h3>Connecting to API...</h3>
+ {/if}
+ </div>
+ <footer
+ class="border-t bg-gray-200 dark:bg-gray-800 dark:border-gray-700 border-gray-300 h-16 flex flex-col justify-center items-center dark:text-white"
+ >
+ <div>
+ DietPi-Dashboard <a
+ class="text-blue-500 dark:text-blue-600"
+ href="https://github.com/ravenclaw900/DietPi-Dashboard/releases/tag/v{'__PACKAGE_VERSION__'}"
+ target="_blank">v{"__PACKAGE_VERSION__"}</a
+ > created by ravenclaw900
  </div>
- <footer
- class="border-t bg-gray-200 dark:bg-gray-800 dark:border-gray-700 border-gray-300 h-16 flex flex-col justify-center items-center dark:text-white"
+ <a
+ href="https://github.com/ravenclaw900/DietPi-Dashboard"
+ target="_blank"
+ ><Fa
+ icon={faGithub}
+ class="hover:opacity-75 dark:hover:opacity-60"
+ size="2x"
+ /></a
  >
- <div>
- DietPi-Dashboard <a
- class="text-blue-500 dark:text-blue-600"
- href="https://github.com/ravenclaw900/DietPi-Dashboard/releases/tag/v{'__PACKAGE_VERSION__'}"
- target="_blank">v{"__PACKAGE_VERSION__"}</a
- > created by ravenclaw900
- </div>
- <a
- href="https://github.com/ravenclaw900/DietPi-Dashboard"
- target="_blank"
- ><Fa
- icon={faGithub}
- class="hover:opacity-75 dark:hover:opacity-60"
- size="2x"
- /></a
- >
- </footer>
- </div>
- </Router>
+ </footer>
+ </div>
 </main>
 
 <style global>

diff --git a/src/frontend/src/components/NavbarLink.svelte b/src/frontend/src/components/NavbarLink.svelte
@@ -1,12 +1,10 @@
 <script>
- import { Link } from "svelte-routing";
  import Fa from "svelte-fa";
- export let to;
  export let icon;
 </script>
 
-<Link
- {to}
- class="text-gray-400 no-underline hover:bg-gray-800 flex items-center h-10 text-xl font-sans whitespace-nowrap"
- ><Fa {icon} class="mr-2 ml-1" size="sm" /><slot /></Link
+<div
+ class="text-gray-400 no-underline hover:bg-gray-800 flex items-center h-10 text-xl font-sans whitespace-nowrap cursor-pointer"
 >
+ <Fa {icon} class="mr-2 ml-1" size="sm" /><slot />
+</div>