Merge pull request #67 from sidharthv96/relative_time

Relative Time in History
mgenereu · Dec 17, 2020 · c34800e · c34800e
2 parents b3827e5 + 116cb7c
commit c34800e
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/src/routes/Edit.svelte b/src/routes/Edit.svelte
@@ -10,6 +10,7 @@
     import { fromUrl } from "../code-store.js";
     // import pkg from '@mermaid-js/mermaid/package.json'
     import pkg from "@mermaid/package.json";
+    import moment from "moment";
     export let mermaidVersion = pkg.version;
     let historyList = [];
     onMount(async () => {
@@ -38,18 +39,19 @@
         setInterval(() => {
             if (code != hisCode) {
                 //save history
-                historyList.push({
+                historyList.unshift({
                     time: new Date().toISOString(),
                     code: hisCode = code
                 });
                 if (historyList.length > 10) {
-                    historyList.shift();
+                    historyList.pop();
                 }
-                historyList = historyList; //triggered update
                 localStorage.setItem(historyListKey, JSON.stringify(historyList));
             }
+            historyList = historyList; //triggered update
         }, 1 * 60 * 1000);
     });
+
     // export let code = '';
     // export let classes = '';
     // export let error = {};
@@ -170,6 +172,10 @@
         if (!code)  return;
         updateCode(code, true);
     }
+
+    function relativeTime(t){
+      return `${moment(t).fromNow()} (${new Date(t).toLocaleString()})`;
+    }
 </script>
 
 <style>
@@ -231,6 +237,8 @@
     .button-container {
         display: flex;
         align-items: center;
+        flex-direction: row;
+        flex-wrap: wrap;
     }
     .button-style {
         background-color: #a2d9e2;
@@ -313,7 +321,7 @@
                             {#if historyList.length > 0}
                                 {#each historyList as item, i}
                                     <button class="button-style" on:click="{e => toUpdateCodeStore(item.code)}">
-                                        -{historyList.length - i} min
+                                        {relativeTime(item.time)}
                                     </button>
                                 {/each}
                             {:else}