From 086c30f6b9739171288ee08ca9b85655866ec76f Mon Sep 17 00:00:00 2001
From: zevav <zev@averba.ch>
Date: Fri, 2 Oct 2020 02:08:47 +0200
Subject: [PATCH] added a progress bar

---
 modulearn/src/Module.svelte | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/modulearn/src/Module.svelte b/modulearn/src/Module.svelte
index 05b19b0..3c09afb 100644
--- a/modulearn/src/Module.svelte
+++ b/modulearn/src/Module.svelte
@@ -1,28 +1,50 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { currentModule } from "./stores"
+  import { currentModule, position } from "./stores"
 
   const dispatcher = createEventDispatcher()
 
   export let module
-  $: klass = $currentModule && $currentModule.name === module.name ? "current" : ""
+  const duration = module.end - module.start
+  const getProgress = pos => (pos - module.start) / duration * 100
+
+  let styl; let selected; let progress;
+  $: selected = $currentModule && $currentModule.name === module.name
+  $: if (selected) progress = getProgress($position)
+  $: styl = selected 
+      ? `background: linear-gradient(to right, var(--finished-bg) 0%, var(--finished-bg) ${progress + 1}%, var(--pending-bg) ${100 - progress}%, var(--pending-bg) 100%)` 
+      : ""
 
   // TODO: add checkboxes for 'want to watch'
   // TODO: gray out watched modules
 </script>
 
-<div on:click={() => dispatcher("selectModule", { module })} class="{klass}"><span>I want to {module.outcome}.</span></div>
+<div on:click={() => dispatcher("selectModule", { module })} ><span style="{styl}" >I want to {module.outcome}.</span></div>
+{#if progress}
+<div>
+  <progress value={progress} max=100>Hi</progress>
+</div>
+{/if}
 
 
 <style>
   @media (prefers-color-scheme: light) {
-    div.current span { background-color: yellow;}
-    div span:hover { background-color: lightgrey; }
+    /* span.current { background-color: yellow;} */
+    span.current:hover { background-color: lightgrey; }
+	:root {
+	  --pending-bg: yellow; 
+      --finished-bg: white;
+	}
   }
 
   @media (prefers-color-scheme: dark) {
-    div.current span { background-color: blue; }
-    div span:hover {
+	 :root {
+	  --pending-bg: #222; 
+      --finished-bg: blue;
+	}
+
+    /* span.current { background-color: blue; } */
+    span:hover {
       background-color: lavender;
       color: #222;
     }
@@ -33,4 +55,5 @@
     cursor: pointer;
     padding: .3em;
   }
+
 </style>