From 9d1ba5a837679ac5841c36879a6c94eacf65bccf Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sat, 21 Sep 2024 11:02:51 +0800
Subject: [PATCH 1/2] move nav to home

---
 api/Notepad.fsproj                 |  3 +-
 api/Program.fs                     |  1 +
 api/Word.fs                        | 13 ++++++
 web/src/components/DiaryEditor.vue | 37 ++++-------------
 web/src/router.js                  |  2 +-
 web/src/util.js                    |  2 +-
 web/src/views/Home.vue             | 67 +++++++++++++++++++++++++++---
 7 files changed, 87 insertions(+), 38 deletions(-)
 create mode 100644 api/Word.fs

diff --git a/api/Notepad.fsproj b/api/Notepad.fsproj
index 3c9b38c..2bbf20a 100644
--- a/api/Notepad.fsproj
+++ b/api/Notepad.fsproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <OutputType>Exe</OutputType>
     <TargetFramework>net8.0</TargetFramework>
@@ -16,6 +16,7 @@
     <Compile Include="queries/summary.sql.fs" />
     <Compile Include="Database.fs" />
     <Compile Include="Json.fs" />
+    <Compile Include="Word.fs" />
     <Compile Include="Summary.fs" />
     <Compile Include="Note.fs" />
     <Compile Include="Program.fs" />
diff --git a/api/Program.fs b/api/Program.fs
index 9a5a5ad..45e7a08 100644
--- a/api/Program.fs
+++ b/api/Program.fs
@@ -153,6 +153,7 @@ webHost [||] {
           get "/api/diary/{id}" Note.noteByIdPartDebug
           put "/api/diary/{id}" Note.addNotePart
           get "/api/todo"  Note.todoListsHandler
+          get "/api/random-word" Word.getRandomWord 
         ]
 
     use_middleware serveVueFiles
diff --git a/api/Word.fs b/api/Word.fs
new file mode 100644
index 0000000..e840eaa
--- /dev/null
+++ b/api/Word.fs
@@ -0,0 +1,13 @@
+module Word
+
+open System
+
+let randomWords =
+    [  ] // Add more words as needed
+
+let getRandomWord =
+    fun ctx ->
+        let random = Random()
+        let word = randomWords.[random.Next(randomWords.Length)]
+        // refresh note summary
+        Falco.Request.mapRoute (ignore) (fun _ -> {| word = word |} |> Json.Response.ofJson) ctx
diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
index 47d53db..74dd861 100644
--- a/web/src/components/DiaryEditor.vue
+++ b/web/src/components/DiaryEditor.vue
@@ -1,15 +1,5 @@
 <template>
   <div class="content">
-    <div class="nav">
-      {{ time }}
-      <a href="#">{{ date }}</a>
-      <a v-if="date != today" :href="'/view?date=' + today">Today</a>
-      <a v-if="date == today" href="/todo">Todo</a>
-      <a href="content">
-        <Icon :icon="icons.tableOfContents" />
-        <Icon v-if="loading" icon="line-md:loading-alt-loop" />
-      </a>
-    </div>
     <div class="editor">
       <el-tiptap :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate" @onInit="onInit"></el-tiptap>
     </div>
@@ -42,14 +32,9 @@ const props = defineProps({
 });
 
 
-const now = ref(moment());
 const loading = ref(true);
-const timeFormat = 'h:mm:ss a';
 const last_note_json = ref(null);
 const content = ref(null);
-const icons = {
-  tableOfContents,
-};
 const extensions = createExtensions();
 const json = ref(null);
 
@@ -58,14 +43,6 @@ onMounted(() => {
   const interval = setInterval(() => now.value = moment(), 1000);
 });
 
-const today = computed(() => {
-  return now.value.format('YYYYMMDD');
-});
-
-const time = computed(() => {
-  return now.value.format(timeFormat);
-});
-
 const mutation = useMutation({
   mutationFn: async () => {
     const response = await axios.put(`/api/diary/${props.date}`, {
@@ -122,6 +99,11 @@ const onInit = async ({ editor }) => {
       editor.setContent(lastNoteJson);
     }
   } catch (error) {
+    if (error.response && error.response.status === 401) {
+      // Use the correct router method in the Vue 3 setup
+      router.push({ name: 'login' });
+    }
+    console.error('Error updating diary:', error);
     console.error('Error fetching diary content:', error);
   } finally {
     loading.value = false;
@@ -130,9 +112,8 @@ const onInit = async ({ editor }) => {
 </script>
 
 <style>
-.content {
-  max-width: 65rem;
-  margin: auto;
+pre code {
+  font-family: "Fira Code", Courier, Monaco, monospace;
 }
 
 .nav {
@@ -141,10 +122,6 @@ const onInit = async ({ editor }) => {
   justify-content: space-between;
 }
 
-pre code {
-  font-family: "Fira Code", Courier, Monaco, monospace;
-}
-
 .nav a {
   display: inline-block;
   text-decoration: none;
diff --git a/web/src/router.js b/web/src/router.js
index 58d33c8..491e05a 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -14,7 +14,7 @@ export default new Router({
       name: 'home',
       component: Home
     },
-    { path: '/login', component: Login },
+    { path: '/login', component: Login, name: 'login' },
     { path: '/logout', component: Logout },
     {
       path: '/content',
diff --git a/web/src/util.js b/web/src/util.js
index 5b814d4..a012713 100644
--- a/web/src/util.js
+++ b/web/src/util.js
@@ -13,4 +13,4 @@ export function parseJwt (token) {
     }).join(''))
   
     return JSON.parse(jsonPayload)
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 7c6fec9..7943bc9 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,15 +1,72 @@
 <template>
-  <DiaryEditor :date="date"></DiaryEditor>
+  <div>
+    <div class="nav">
+      {{ time }}
+      <div>
+        <a @click="navigateDate(-1)">
+          <Icon icon="grommet-icons:form-previous" width="1.2rem" height="1.2rem" />
+        </a>
+        <a href="#">{{ date }}</a>
+        <a @click="navigateDate(1)">
+          <Icon icon="grommet-icons:form-next" width="1.2rem" height="1.2rem" />
+        </a>
+      </div>
+      <a v-if="date != today" :href="'/view?date=' + today">Today</a>
+      <a v-if="date == today" href="/todo">Todo</a>
+      <a href="content">
+        <Icon :icon="icons.tableOfContents" />
+      </a>
+    </div>
+    <div class="content">
+      <DiaryEditor :date="date"></DiaryEditor>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import moment from 'moment';
+import { Icon } from '@iconify/vue2';
+import tableOfContents from '@iconify/icons-mdi/table-of-contents';
 import DiaryEditor from "@/components/DiaryEditor";
-import { get_date_of_today } from "../util.js";
 
-const date = ref(get_date_of_today());
+const now = ref(moment());
+const date = ref(moment().format('YYYYMMDD'))
+const timeFormat = 'h:mm:ss a';
+const icons = {
+  tableOfContents,
+};
 
 onMounted(() => {
-  date.value = get_date_of_today();
+  // eslint-disable-next-line no-unused-vars
+  date.value = now.value.format("YYYYMMDD")
+  const interval = setInterval(() => now.value = moment(), 1000);
 });
+
+const today = computed(() => {
+  return now.value.format('YYYYMMDD');
+});
+
+
+function navigateDate(offset) {
+  const newDate = moment(now.value).add(offset, 'days');
+  if (newDate > today) {
+    alert("can not be in the future")
+    return
+  }
+  router.push(`/view?date=${newDate.format('YYYYMMDD')}`);
+}
+
+const time = computed(() => {
+  return now.value.format(timeFormat);
+});
+
+
 </script>
+
+<style>
+.content {
+  max-width: 65rem;
+  margin: auto;
+}
+</style>
\ No newline at end of file

From abe5c8fd08dc54b0eb5e6c05055ba0dabb1e1c57 Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sat, 21 Sep 2024 11:58:35 +0800
Subject: [PATCH 2/2] Refactor DiaryEditor and Home components: - Add loading
 icon to DiaryEditor. - Remove unnecessary interval and styles from
 DiaryEditor. - Update navigation links in NavBar and Home. - Improve date
 navigation in Home. - Scope styles to components.

---
 web/src/components/DiaryEditor.vue | 25 ++-------
 web/src/components/NavBar.vue      |  2 +-
 web/src/views/Home.vue             | 84 +++++++++++++++++++-----------
 3 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
index 74dd861..e55618c 100644
--- a/web/src/components/DiaryEditor.vue
+++ b/web/src/components/DiaryEditor.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="content">
     <div class="editor">
-      <el-tiptap :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate" @onInit="onInit"></el-tiptap>
+      <el-tiptap :key="'editor-' + date" :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate" @onInit="onInit"></el-tiptap>
     </div>
+    <Icon v-if="loading" icon="line-md:loading-alt-loop" />
   </div>
 </template>
 
@@ -38,10 +39,6 @@ const content = ref(null);
 const extensions = createExtensions();
 const json = ref(null);
 
-onMounted(() => {
-  // eslint-disable-next-line no-unused-vars
-  const interval = setInterval(() => now.value = moment(), 1000);
-});
 
 const mutation = useMutation({
   mutationFn: async () => {
@@ -111,26 +108,10 @@ const onInit = async ({ editor }) => {
 };
 </script>
 
-<style>
+<style scoped>
 pre code {
   font-family: "Fira Code", Courier, Monaco, monospace;
 }
 
-.nav {
-  margin: 1em 1em 1rem 1em;
-  display: flex;
-  justify-content: space-between;
-}
 
-.nav a {
-  display: inline-block;
-  text-decoration: none;
-  border-radius: 5%;
-}
-
-/* Change the link color on hover */
-.nav a:hover {
-  background-color: rgb(223, 214, 214);
-  color: white;
-}
 </style>
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index 2fb420e..57cf9db 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
         <div class="nav">
-                <a v-if="date != today" :href="'/view?date=' + today">Diary</a>
+                <a v-if="date != today" href="/">Diary</a>
                 <a href="content">
                         <Icon :icon="icons.tableOfContents" />
                         <Icon v-if="loading" icon="line-md:loading-alt-loop" />
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 7943bc9..c34aa3e 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,25 +1,27 @@
 <template>
-  <div>
+  <div class="content">
     <div class="nav">
       {{ time }}
-      <div>
-        <a @click="navigateDate(-1)">
-          <Icon icon="grommet-icons:form-previous" width="1.2rem" height="1.2rem" />
-        </a>
-        <a href="#">{{ date }}</a>
-        <a @click="navigateDate(1)">
-          <Icon icon="grommet-icons:form-next" width="1.2rem" height="1.2rem" />
-        </a>
+      <div class="date-nav">
+        <div @click="navigateDate(-1)" class="icon-container">
+          <Icon icon="grommet-icons:form-previous" width="1.2rem" />
+        </div>
+        <div>
+          {{ displayDate }}
+        </div>
+        <div v-if="date < today" @click="navigateDate(1)" class="icon-container">
+          <Icon icon="grommet-icons:form-next" width="1.2rem" />
+        </div>
+        <div v-if="date != today" @click="navigateDateToToday" class="icon-container">
+          <Icon icon="fluent:arrow-next-16-regular" width="1.2rem" />
+        </div>
       </div>
-      <a v-if="date != today" :href="'/view?date=' + today">Today</a>
-      <a v-if="date == today" href="/todo">Todo</a>
+      <a href="/todo">Todo</a>
       <a href="content">
-        <Icon :icon="icons.tableOfContents" />
+        <Icon :icon="tableOfContents" />
       </a>
     </div>
-    <div class="content">
-      <DiaryEditor :date="date"></DiaryEditor>
-    </div>
+    <DiaryEditor :date="date"></DiaryEditor>
   </div>
 </template>
 
@@ -30,12 +32,9 @@ import { Icon } from '@iconify/vue2';
 import tableOfContents from '@iconify/icons-mdi/table-of-contents';
 import DiaryEditor from "@/components/DiaryEditor";
 
+
 const now = ref(moment());
 const date = ref(moment().format('YYYYMMDD'))
-const timeFormat = 'h:mm:ss a';
-const icons = {
-  tableOfContents,
-};
 
 onMounted(() => {
   // eslint-disable-next-line no-unused-vars
@@ -47,26 +46,53 @@ const today = computed(() => {
   return now.value.format('YYYYMMDD');
 });
 
+const time = computed(() => {
+  const timeFormat = 'h:mm:ss a';
+  return now.value.format(timeFormat);
+});
+
+const displayDate = computed(() => {
+  if (date.value == today.value) {
+    return 'Today'
+  } else {
+    return date.value
+  }
+})
 
 function navigateDate(offset) {
-  const newDate = moment(now.value).add(offset, 'days');
-  if (newDate > today) {
-    alert("can not be in the future")
-    return
+  const newDate = moment(date.value).add(offset, 'days').format("YYYYMMDD");
+  if (newDate > today.value) {
+    alert("can not into future")
   }
-  router.push(`/view?date=${newDate.format('YYYYMMDD')}`);
+  date.value = newDate
 }
 
-const time = computed(() => {
-  return now.value.format(timeFormat);
-});
-
+function navigateDateToToday() {
+  date.value = today.value
+}
 
 </script>
 
-<style>
+<style scoped>
 .content {
   max-width: 65rem;
   margin: auto;
 }
+
+.nav {
+  margin: 1em 1em 1rem 1em;
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav .date-nav {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+}
 </style>
\ No newline at end of file