Add Plan page with day planner

frontend/package-lock.json

@@ -10,8 +10,10 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
         "@tsconfig/svelte": "^3.0.0",
+        "shortid": "^2.2.16",
         "svelte": "^3.49.0",
         "svelte-check": "^2.8.0",
+        "svelte-dnd-action": "^0.9.21",
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.6.4",
@@ -1202,6 +1204,21 @@
         "rimraf": "^2.5.2"
       }
     },
+    "node_modules/shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "dev": true,
+      "dependencies": {
+        "nanoid": "^2.1.0"
+      }
+    },
+    "node_modules/shortid/node_modules/nanoid": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==",
+      "dev": true
+    },
     "node_modules/sorcery": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@@ -1287,6 +1304,12 @@
         "svelte": "^3.24.0"
       }
     },
+    "node_modules/svelte-dnd-action": {
+      "version": "0.9.21",
+      "resolved": "https://registry.npmjs.org/svelte-dnd-action/-/svelte-dnd-action-0.9.21.tgz",
+      "integrity": "sha512-uSiaGiSY5KCTx5OtColSk/1qFFUAzGvnoQYDE5xfOmcyvf3lAI1IjPv0p0LRKrTudS9rGZYWPx44qsD09ER6QQ==",
+      "dev": true
+    },
     "node_modules/svelte-hmr": {
       "version": "0.14.12",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",
@@ -2214,6 +2237,23 @@
         "rimraf": "^2.5.2"
       }
     },
+    "shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^2.1.0"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "2.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==",
+          "dev": true
+        }
+      }
+    },
     "sorcery": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@@ -2275,6 +2315,12 @@
         "typescript": "*"
       }
     },
+    "svelte-dnd-action": {
+      "version": "0.9.21",
+      "resolved": "https://registry.npmjs.org/svelte-dnd-action/-/svelte-dnd-action-0.9.21.tgz",
+      "integrity": "sha512-uSiaGiSY5KCTx5OtColSk/1qFFUAzGvnoQYDE5xfOmcyvf3lAI1IjPv0p0LRKrTudS9rGZYWPx44qsD09ER6QQ==",
+      "dev": true
+    },
     "svelte-hmr": {
       "version": "0.14.12",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",

frontend/package.json

@@ -12,8 +12,10 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
+    "shortid": "^2.2.16",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
+    "svelte-dnd-action": "^0.9.21",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",

frontend/src/app.css

@@ -27,7 +27,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  place-items: top;
   min-width: 320px;
   min-height: 100vh;
 }

frontend/src/assets/ellipsis-vertical-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M64 360c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zm0-160c30.9 0 56 25.1 56 56s-25.1 56-56 56s-56-25.1-56-56s25.1-56 56-56zM120 96c0 30.9-25.1 56-56 56S8 126.9 8 96S33.1 40 64 40s56 25.1 56 56z"/></svg>

frontend/src/assets/mountain-sun-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M560 160c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80zM55.9 512H381.1h75H578.9c33.8 0 61.1-27.4 61.1-61.1c0-11.2-3.1-22.2-8.9-31.8l-132-216.3C495 196.1 487.8 192 480 192s-15 4.1-19.1 10.7l-48.2 79L286.8 81c-6.6-10.6-18.3-17-30.8-17s-24.1 6.4-30.8 17L8.6 426.4C3 435.3 0 445.6 0 456.1C0 487 25 512 55.9 512z"/></svg>

frontend/src/components/Body.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { curTab } from '../stores/appStore';
     import Journal from './journal/Journal.svelte';
-    import Plan from './Plan.svelte';
+    import Plan from './plan/Plan.svelte';
 </script>
 
 <div class="main">

frontend/src/components/Main.svelte

@@ -11,5 +11,13 @@
 <style>
     .Main {
         vertical-align: top;
+        width: 100%;
+        /* position: relative; */
+    }
+
+    @media screen and (min-width: 550px) {
+        .Main {
+            width: 550px;
+        }
     }
 </style>

frontend/src/components/Plan.svelte

@@ -1,3 +0,0 @@
-<div style="width:100%;">
-  <h1>Plan</h1>
-</div>

frontend/src/components/inputs/InputText.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
-    export let val : any;
-    export let onInput : () => void;
+    export let val : string;
+    export let onInput : () => void = () => {};
+    export let onBlur: () => void = () => {};
+    export let onKeypress: (e: KeyboardEvent) => void = (e: KeyboardEvent) => {};
+    export let doAutofocus: boolean = false;
+    export let placeholder: string = "";
+    
+    function init(elem: HTMLInputElement) {
+        if (doAutofocus) {
+            elem.focus();
+        }
+    }
 </script>
 
-<input type="text" bind:value={val} on:input={onInput} size=10/>
+<input tabindex="1" type="text" placeholder={placeholder} bind:value={val} on:input={onInput} on:blur={onBlur} on:keypress={onKeypress} use:init size=10/>
+<!-- <input tabindex="1" type="text" placeholder={placeholder} bind:value={val} on:input={onInput} on:blur={onBlur} on:keypress={()=>{}} use:init size=10/> -->
 
 <style>
     input[type=text] {

frontend/src/components/inputs/MultiItemTextInput.svelte

@@ -5,6 +5,7 @@
 
     export let textArray : Array<string> = [];
     export let onInput : () => void;
+    export let onBlur : () => void = () => {};
     
 
     function update() {
@@ -23,8 +24,11 @@
     });
 </script>
 
+<!-- <div on:blur={onBlur}> -->
 <div>
     {#each textArray as inTxt}
-        <Text bind:val={inTxt} onInput={updateInput}/>
+        <!-- <Text bind:val={inTxt} onInput={updateInput} onBlur={onBlur}/> -->
+        <!-- <Text bind:val={inTxt} onInput={updateInput} placeholder={"New Item"}/> -->
+        <Text bind:val={inTxt} onInput={updateInput} onBlur={onBlur} placeholder={"New Item"}/>
     {/each}
 </div>

frontend/src/components/journal/Journal.svelte

@@ -3,7 +3,7 @@
 
     import sunImg from '../../assets/sun-solid.svg';
     import moonImg from '../../assets/moon-solid.svg';
-    import { dashApi } from '../../stores/apiStore'
+    import { journalApi } from '../../stores/apiStore'
     import type { JournalEntry } from '../../dashclient'
     import { dateUpdate, currentDate } from '../../stores/appStore'
     import * as TxtArr from '../../modules/arrayHelpers';
@@ -34,7 +34,7 @@
         }
     }
     
-    function prepareJournalEntryForWrite(entry: JournalEntry) {
+    function prepareJournalEntryForWrite(entry: JournalEntry): JournalEntry {
         let je = {...entry};
 
         je.thankful = TxtArr.prepareTextArrayForWrite(je.thankful);
@@ -49,7 +49,7 @@
     }
     
     async function fetchJournal() {
-        dashApi.getJournalEntryForDate({'date': $currentDate}).then(resp => (initJournalEntry(resp)));
+        journalApi.getJournalEntryForDate({'date': $currentDate}).then(resp => (initJournalEntry(resp)));
     }
 
     onMount(() => {
@@ -61,7 +61,7 @@
         clearTimeout(updateTimeout);
         
         updateTimeout = setTimeout(function() {
-            dashApi.writeJournalEntry({journalEntry: prepareJournalEntryForWrite(journalEntry)});
+            journalApi.writeJournalEntry({journalEntry: prepareJournalEntryForWrite(journalEntry)});
         }, 1000);
     }
 </script>
@@ -103,22 +103,22 @@
 </div>
 
 <style>
-    .journalTime {
+    /* .journalTime {
         width: 100%;
         position: relative;
     }
-    
+     */
     .JournalSubcategory {
         width: 90%;
         margin: auto;
     }
 
-    @media screen and (min-width: 550px) {
+    /* @media screen and (min-width: 550px) {
         .journalTime {
             width: 550px;
         }
     }
-    
+     */
     .JournalText {
         width: 100%;
     }
@@ -130,6 +130,7 @@
         box-shadow: 1px 1px 4px grey;
         resize: none;
         columns: 15;
+        font-size: 16px;
     }
     
     .TimeIcon {

frontend/src/components/plan/Plan.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import shortid  from 'shortid';
+
+    import sunSolid from '../../assets/sun-solid.svg';
+    import sunRegular from '../../assets/sun-regular.svg';
+    import mountainSun from '../../assets/mountain-sun-solid.svg';
+    import moonSolid from '../../assets/moon-solid.svg';
+    import type { PlanDay } from '../../dashclient'
+    import { dateUpdate, currentDate } from '../../stores/appStore'
+    import { planApi } from '../../stores/apiStore'
+    import type { PlanItem } from '../../stores/planStore'
+    import PlanDndList from './PlanDndList.svelte'
+    import InvertableIcon from '../inputs/InvertableIcon.svelte';
+
+    let updateTimeout: NodeJS.Timeout;
+    
+    interface DayItems {
+        morning: Array<PlanItem>,
+        midday: Array<PlanItem>,
+        afternoon: Array<PlanItem>,
+        evening: Array<PlanItem>
+    }
+
+    let planDay: PlanDay = {
+        date: $currentDate,
+        morning: [],
+        midday: [],
+        afternoon: [],
+        evening: []
+    };
+
+    let planDayItems: DayItems = {
+        morning: [],
+        midday: [],
+        afternoon: [],
+        evening: []
+    };
+    
+    function arrayToItems(arr: Array<string>): Array<PlanItem> {
+        let items: Array<PlanItem> = [];
+        
+        if (arr) {
+            arr.forEach((it) => {
+                if (it.trim().length != 0) {
+                    items.push({id: shortid.generate(), text:it});
+                }
+            })
+        }
+        
+        return items;
+    }
+
+    function itemsToArray(items: Array<PlanItem>): Array<string> {
+        let arr: Array<string> = [];
+
+        items.forEach((it) => {
+            if (it.text.trim().length != 0) {
+                arr.push(it.text);
+            }
+        })
+        
+        return arr;
+    }
+    
+    function initPlanDay(plan: PlanDay) {
+        console.log(plan);
+        planDay = plan;
+        planDayItems = {
+            morning: arrayToItems(planDay.morning),
+            midday: arrayToItems(planDay.midday),
+            afternoon: arrayToItems(planDay.afternoon),
+            evening: arrayToItems(planDay.evening)
+        }
+    }
+
+    function preparePlanDayForWrite(items: DayItems): PlanDay {
+        planDay.morning = itemsToArray(items.morning);
+        planDay.midday = itemsToArray(items.midday);
+        planDay.afternoon = itemsToArray(items.afternoon);
+        planDay.evening = itemsToArray(items.evening);
+
+        return planDay;
+    }
+
+    async function fetchPlan() {
+        planApi.getPlanDayForDate({'date': $currentDate}).then(resp => (initPlanDay(resp)));
+    }
+
+    onMount(() => {
+        $dateUpdate = fetchPlan;
+        fetchPlan();
+    });
+    
+    function onInput() {
+        console.log("input");
+        clearTimeout(updateTimeout);
+        
+        updateTimeout = setTimeout(function() {
+            planApi.savePlanForDay({planDay: preparePlanDayForWrite(planDayItems)});
+        }, 1000);
+    }
+</script>
+
+<div class="plan">
+    <div class="timeOfDay">
+        <div class="timeIcon">
+            <InvertableIcon label="morgens" icon={sunRegular}/> 
+        </div>
+        <PlanDndList bind:items={planDayItems.morning} onInput={onInput}/>
+    </div>
+
+    <div class="timeOfDay">
+        <div class="timeIcon">
+            <InvertableIcon label="mittags" icon={sunSolid}/> 
+        </div>
+        <PlanDndList bind:items={planDayItems.midday} onInput={onInput}/>
+    </div>
+
+    <div class="timeOfDay">
+        <div class="timeIcon">
+            <InvertableIcon label="nachmittags" icon={mountainSun}/> 
+        </div>
+        <PlanDndList bind:items={planDayItems.afternoon} onInput={onInput}/>
+    </div>
+
+    <div class="timeOfDay">
+        <div class="timeIcon">
+            <InvertableIcon label="abends" icon={moonSolid}/> 
+        </div>
+        <PlanDndList bind:items={planDayItems.evening} onInput={onInput}/>
+    </div>
+</div>
+
+<style>
+    .plan {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+    }
+
+    .timeOfDay {
+        min-width: 130px;
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    .timeIcon {
+        /* position: absolute;
+        float: left; */
+        height: 2rem;
+        width: 2rem;
+        margin: 0 auto;
+        margin-bottom: 10px;
+        margin-top: 5px;
+    }
+</style>

frontend/src/components/plan/PlanDndList.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    import {dndzone} from 'svelte-dnd-action';
+    import {flip} from 'svelte/animate';
+
+    import type { PlanItem } from '../../stores/planStore'
+    import PlanInput from './PlanInput.svelte'
+    import MultiItemTextInput from '../inputs/MultiItemTextInput.svelte'
+    import Text from '../inputs/InputText.svelte';
+    import shortid from 'shortid'
+
+    export let items: Array<{id: number, text: string}> = [];
+    export let onInput: () => void;
+    
+    const flipDurationMs = 200;
+
+    function handleSort(e: any) {
+      let sortedItems: Array<PlanItem> = [];
+      
+      e.detail.items.forEach((it: PlanItem) => {
+        if (it.text.trim().length != 0) {
+          sortedItems.push(it);
+        }
+        
+      });
+
+      items = sortedItems;
+
+      onInput();
+    }
+    
+    let newItem: string = "";
+
+    function onInputNewItem() {
+      if (newItem.trim().length != 0) {
+        items = [...items, {id: shortid.generate(), text: newItem}];
+      }
+      newItem = "";
+
+      onInput();
+    }
+    
+    function onKeypress(e: KeyboardEvent, ) {
+      if(e.key == "Enter") {
+        onInputNewItem();
+      }
+    }
+</script>
+
+<div class="newItemInput">
+  <Text bind:val={newItem} onInput={onInput} onBlur={onInputNewItem} onKeypress={onKeypress} placeholder={"New Item"}/>
+  <!-- <MultiItemTextInput bind:textArray={newArray} onInput={onInput} onBlur={onInputNewItem}/> -->
+</div>
+<section contenteditable="true" use:dndzone={{items, flipDurationMs}} on:consider={handleSort} on:finalize={handleSort}>
+  <!-- <div class="planItems"> -->
+      {#each items as item(item.id)}
+          <div class="planRow" animate:flip={{duration:flipDurationMs}}>
+            <div class="planInput">
+              <PlanInput bind:text={item.text} onInput={onInput}/>
+            </div>
+          </div>
+      {/each}
+  <!-- </div> -->
+</section>
+
+<style>
+  .planItems {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .planInput {
+    width: 80%;
+  }
+  
+  .planRow {
+    /* display: flex; */
+    width: 100%;
+    min-height: 1rem;
+  }
+  
+  .newItemInput {
+    width: 90%;
+  }
+  
+</style>

frontend/src/components/plan/PlanInput.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import InputText from '../inputs/InputText.svelte'
+
+  export let text: string;
+  export let onInput: () => void;
+  export let onBlur: () => void = () => {};
+
+  let doEdit: boolean = false;
+  
+  function onClick() {
+    doEdit = !doEdit;
+  }
+  
+  function handleBlur() {
+    doEdit = !doEdit;
+    onBlur();
+  }
+</script>
+
+{#if doEdit}
+  <InputText bind:val={text} onInput={onInput} onBlur={handleBlur} doAutofocus={true}/> 
+{:else}
+  <div class="editableEntry" on:click={onClick}>
+    <b>{text}</b>
+  </div>
+{/if}
+
+<style>
+  .editableEntry {
+    width: 100%;
+  }
+</style>

frontend/src/components/tabs/TabBar.svelte

@@ -14,7 +14,9 @@
 </script>
 
 <div class="TabBar">
-<DatePicker/>
+    <div class="datePicker">
+        <DatePicker/>
+    </div>
 <InvertableButton label="Journal" icon={penImg} clickHandler={()=>{clickHandler("Journal")}}/>
 <InvertableButton label="Plan" icon={calendarImg} clickHandler={()=>{clickHandler("Plan")}}/>
 <InvertableButton label="Tracking" icon={chartImg} clickHandler={()=>{clickHandler("Tracking")}}/>
@@ -29,8 +31,13 @@
         display: flex;
         flex-wrap: wrap;
         /* for horizontal aligning of child divs */
-        justify-content: center;
+        /* justify-content: center; */
         /* for vertical aligning */
         align-items: center;
+        gap: 5px;
+    }
+    
+    .datePicker {
+        margin-right: auto;
     }
 </style>

frontend/src/dashclient/apis/JournalApi.ts

@@ -37,7 +37,7 @@ export interface WriteJournalEntryRequest {
 /**
  * 
  */
-export class DefaultApi extends runtime.BaseAPI {
+export class JournalApi extends runtime.BaseAPI {
 
     /**
      */
@@ -51,7 +51,7 @@ export class DefaultApi extends runtime.BaseAPI {
         const headerParameters: runtime.HTTPHeaders = {};
 
         const response = await this.request({
-            path: `/journal/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(String(requestParameters.date.toISOString().substring(0,10)))),
+            path: `/journal/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(requestParameters.date.toISOString().substring(0,10))),
             method: 'DELETE',
             headers: headerParameters,
             query: queryParameters,
@@ -78,7 +78,7 @@ export class DefaultApi extends runtime.BaseAPI {
         const headerParameters: runtime.HTTPHeaders = {};
 
         const response = await this.request({
-            path: `/journal/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(String(requestParameters.date.toISOString().substring(0,10)))),
+            path: `/journal/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(requestParameters.date.toISOString().substring(0,10))),
             method: 'GET',
             headers: headerParameters,
             query: queryParameters,

frontend/src/dashclient/apis/PlanApi.ts

@@ -0,0 +1,234 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Dash API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import * as runtime from '../runtime';
+import type {
+  PlanDay,
+  PlanMonth,
+  PlanWeek,
+} from '../models';
+import {
+    PlanDayFromJSON,
+    PlanDayToJSON,
+    PlanMonthFromJSON,
+    PlanMonthToJSON,
+    PlanWeekFromJSON,
+    PlanWeekToJSON,
+} from '../models';
+
+export interface GetPlanDayForDateRequest {
+    date: Date;
+}
+
+export interface GetPlanMonthForDateRequest {
+    date: Date;
+}
+
+export interface GetPlanWeekForDateRequest {
+    date: Date;
+}
+
+export interface SavePlanForDayRequest {
+    planDay: PlanDay;
+}
+
+export interface SavePlanForMonthRequest {
+    planMonth: PlanMonth;
+}
+
+export interface SavePlanForWeekRequest {
+    planWeek: PlanWeek;
+}
+
+/**
+ * 
+ */
+export class PlanApi extends runtime.BaseAPI {
+
+    /**
+     */
+    async getPlanDayForDateRaw(requestParameters: GetPlanDayForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<PlanDay>> {
+        if (requestParameters.date === null || requestParameters.date === undefined) {
+            throw new runtime.RequiredError('date','Required parameter requestParameters.date was null or undefined when calling getPlanDayForDate.');
+        }
+
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/plan/day/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(requestParameters.date.toISOString().substring(0,10))),
+            method: 'GET',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => PlanDayFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async getPlanDayForDate(requestParameters: GetPlanDayForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<PlanDay> {
+        const response = await this.getPlanDayForDateRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async getPlanMonthForDateRaw(requestParameters: GetPlanMonthForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<PlanMonth>> {
+        if (requestParameters.date === null || requestParameters.date === undefined) {
+            throw new runtime.RequiredError('date','Required parameter requestParameters.date was null or undefined when calling getPlanMonthForDate.');
+        }
+
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/plan/month/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(requestParameters.date.toISOString().substring(0,10))),
+            method: 'GET',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => PlanMonthFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async getPlanMonthForDate(requestParameters: GetPlanMonthForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<PlanMonth> {
+        const response = await this.getPlanMonthForDateRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async getPlanWeekForDateRaw(requestParameters: GetPlanWeekForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<PlanWeek>> {
+        if (requestParameters.date === null || requestParameters.date === undefined) {
+            throw new runtime.RequiredError('date','Required parameter requestParameters.date was null or undefined when calling getPlanWeekForDate.');
+        }
+
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        const response = await this.request({
+            path: `/plan/week/entry/{date}`.replace(`{${"date"}}`, encodeURIComponent(requestParameters.date.toISOString().substring(0,10))),
+            method: 'GET',
+            headers: headerParameters,
+            query: queryParameters,
+        }, initOverrides);
+
+        return new runtime.JSONApiResponse(response, (jsonValue) => PlanWeekFromJSON(jsonValue));
+    }
+
+    /**
+     */
+    async getPlanWeekForDate(requestParameters: GetPlanWeekForDateRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<PlanWeek> {
+        const response = await this.getPlanWeekForDateRaw(requestParameters, initOverrides);
+        return await response.value();
+    }
+
+    /**
+     */
+    async savePlanForDayRaw(requestParameters: SavePlanForDayRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<void>> {
+        if (requestParameters.planDay === null || requestParameters.planDay === undefined) {
+            throw new runtime.RequiredError('planDay','Required parameter requestParameters.planDay was null or undefined when calling savePlanForDay.');
+        }
+
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        headerParameters['Content-Type'] = 'application/json';
+
+        const response = await this.request({
+            path: `/plan/day/entry/`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+            body: PlanDayToJSON(requestParameters.planDay),
+        }, initOverrides);
+
+        return new runtime.VoidApiResponse(response);
+    }
+
+    /**
+     */
+    async savePlanForDay(requestParameters: SavePlanForDayRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<void> {
+        await this.savePlanForDayRaw(requestParameters, initOverrides);
+    }
+
+    /**
+     */
+    async savePlanForMonthRaw(requestParameters: SavePlanForMonthRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<void>> {
+        if (requestParameters.planMonth === null || requestParameters.planMonth === undefined) {
+            throw new runtime.RequiredError('planMonth','Required parameter requestParameters.planMonth was null or undefined when calling savePlanForMonth.');
+        }
+
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        headerParameters['Content-Type'] = 'application/json';
+
+        const response = await this.request({
+            path: `/plan/month/entry/`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+            body: PlanMonthToJSON(requestParameters.planMonth),
+        }, initOverrides);
+
+        return new runtime.VoidApiResponse(response);
+    }
+
+    /**
+     */
+    async savePlanForMonth(requestParameters: SavePlanForMonthRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<void> {
+        await this.savePlanForMonthRaw(requestParameters, initOverrides);
+    }
+
+    /**
+     */
+    async savePlanForWeekRaw(requestParameters: SavePlanForWeekRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<void>> {
+        if (requestParameters.planWeek === null || requestParameters.planWeek === undefined) {
+            throw new runtime.RequiredError('planWeek','Required parameter requestParameters.planWeek was null or undefined when calling savePlanForWeek.');
+        }
+
+        const queryParameters: any = {};
+
+        const headerParameters: runtime.HTTPHeaders = {};
+
+        headerParameters['Content-Type'] = 'application/json';
+
+        const response = await this.request({
+            path: `/plan/week/entry/`,
+            method: 'POST',
+            headers: headerParameters,
+            query: queryParameters,
+            body: PlanWeekToJSON(requestParameters.planWeek),
+        }, initOverrides);
+
+        return new runtime.VoidApiResponse(response);
+    }
+
+    /**
+     */
+    async savePlanForWeek(requestParameters: SavePlanForWeekRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<void> {
+        await this.savePlanForWeekRaw(requestParameters, initOverrides);
+    }
+
+}

frontend/src/dashclient/apis/index.ts

@@ -1,3 +1,4 @@
 /* tslint:disable */
 /* eslint-disable */
-export * from './DefaultApi';
+export * from './JournalApi';
+export * from './PlanApi';

frontend/src/dashclient/models/PlanDay.ts

@@ -0,0 +1,114 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Dash API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { exists, mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface PlanDay
+ */
+export interface PlanDay {
+    /**
+     * 
+     * @type {Date}
+     * @memberof PlanDay
+     */
+    date: Date;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof PlanDay
+     */
+    morning?: Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof PlanDay
+     */
+    midday?: Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof PlanDay
+     */
+    afternoon?: Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof PlanDay
+     */
+    evening?: Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof PlanDay
+     */
+    pleasant?: Array<string>;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof PlanDay
+     */
+    reminders?: Array<string>;
+}
+
+/**
+ * Check if a given object implements the PlanDay interface.
+ */
+export function instanceOfPlanDay(value: object): boolean {
+    let isInstance = true;
+    isInstance = isInstance && "date" in value;
+
+    return isInstance;
+}
+
+export function PlanDayFromJSON(json: any): PlanDay {
+    return PlanDayFromJSONTyped(json, false);
+}
+
+export function PlanDayFromJSONTyped(json: any, ignoreDiscriminator: boolean): PlanDay {
+    if ((json === undefined) || (json === null)) {
+        return json;
+    }
+    return {
+        
+        'date': (new Date(json['date'])),
+        'morning': !exists(json, 'morning') ? undefined : json['morning'],
+        'midday': !exists(json, 'midday') ? undefined : json['midday'],
+        'afternoon': !exists(json, 'afternoon') ? undefined : json['afternoon'],
+        'evening': !exists(json, 'evening') ? undefined : json['evening'],
+        'pleasant': !exists(json, 'pleasant') ? undefined : json['pleasant'],
+        'reminders': !exists(json, 'reminders') ? undefined : json['reminders'],
+    };
+}
+
+export function PlanDayToJSON(value?: PlanDay | null): any {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    return {
+        
+        'date': (value.date.toISOString().substr(0,10)),
+        'morning': value.morning,
+        'midday': value.midday,
+        'afternoon': value.afternoon,
+        'evening': value.evening,
+        'pleasant': value.pleasant,
+        'reminders': value.reminders,
+    };
+}
+

frontend/src/dashclient/models/PlanMonth.ts

@@ -0,0 +1,74 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Dash API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { exists, mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface PlanMonth
+ */
+export interface PlanMonth {
+    /**
+     * 
+     * @type {Date}
+     * @memberof PlanMonth
+     */
+    date: Date;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof PlanMonth
+     */
+    items?: Array<string>;
+}
+
+/**
+ * Check if a given object implements the PlanMonth interface.
+ */
+export function instanceOfPlanMonth(value: object): boolean {
+    let isInstance = true;
+    isInstance = isInstance && "date" in value;
+
+    return isInstance;
+}
+
+export function PlanMonthFromJSON(json: any): PlanMonth {
+    return PlanMonthFromJSONTyped(json, false);
+}
+
+export function PlanMonthFromJSONTyped(json: any, ignoreDiscriminator: boolean): PlanMonth {
+    if ((json === undefined) || (json === null)) {
+        return json;
+    }
+    return {
+        
+        'date': (new Date(json['date'])),
+        'items': !exists(json, 'items') ? undefined : json['items'],
+    };
+}
+
+export function PlanMonthToJSON(value?: PlanMonth | null): any {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    return {
+        
+        'date': (value.date.toISOString().substr(0,10)),
+        'items': value.items,
+    };
+}
+

frontend/src/dashclient/models/PlanWeek.ts

@@ -0,0 +1,81 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Dash API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { exists, mapValues } from '../runtime';
+import type { PlanWeekItem } from './PlanWeekItem';
+import {
+    PlanWeekItemFromJSON,
+    PlanWeekItemFromJSONTyped,
+    PlanWeekItemToJSON,
+} from './PlanWeekItem';
+
+/**
+ * 
+ * @export
+ * @interface PlanWeek
+ */
+export interface PlanWeek {
+    /**
+     * 
+     * @type {Date}
+     * @memberof PlanWeek
+     */
+    date: Date;
+    /**
+     * 
+     * @type {Array<PlanWeekItem>}
+     * @memberof PlanWeek
+     */
+    items?: Array<PlanWeekItem>;
+}
+
+/**
+ * Check if a given object implements the PlanWeek interface.
+ */
+export function instanceOfPlanWeek(value: object): boolean {
+    let isInstance = true;
+    isInstance = isInstance && "date" in value;
+
+    return isInstance;
+}
+
+export function PlanWeekFromJSON(json: any): PlanWeek {
+    return PlanWeekFromJSONTyped(json, false);
+}
+
+export function PlanWeekFromJSONTyped(json: any, ignoreDiscriminator: boolean): PlanWeek {
+    if ((json === undefined) || (json === null)) {
+        return json;
+    }
+    return {
+        
+        'date': (new Date(json['date'])),
+        'items': !exists(json, 'items') ? undefined : ((json['items'] as Array<any>).map(PlanWeekItemFromJSON)),
+    };
+}
+
+export function PlanWeekToJSON(value?: PlanWeek | null): any {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    return {
+        
+        'date': (value.date.toISOString().substr(0,10)),
+        'items': value.items === undefined ? undefined : ((value.items as Array<any>).map(PlanWeekItemToJSON)),
+    };
+}
+

frontend/src/dashclient/models/PlanWeekItem.ts

@@ -0,0 +1,82 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Dash API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { exists, mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface PlanWeekItem
+ */
+export interface PlanWeekItem {
+    /**
+     * 
+     * @type {string}
+     * @memberof PlanWeekItem
+     */
+    item: string;
+    /**
+     * 
+     * @type {number}
+     * @memberof PlanWeekItem
+     */
+    numTodos?: number;
+    /**
+     * 
+     * @type {number}
+     * @memberof PlanWeekItem
+     */
+    numDone?: number;
+}
+
+/**
+ * Check if a given object implements the PlanWeekItem interface.
+ */
+export function instanceOfPlanWeekItem(value: object): boolean {
+    let isInstance = true;
+    isInstance = isInstance && "item" in value;
+
+    return isInstance;
+}
+
+export function PlanWeekItemFromJSON(json: any): PlanWeekItem {
+    return PlanWeekItemFromJSONTyped(json, false);
+}
+
+export function PlanWeekItemFromJSONTyped(json: any, ignoreDiscriminator: boolean): PlanWeekItem {
+    if ((json === undefined) || (json === null)) {
+        return json;
+    }
+    return {
+        
+        'item': json['item'],
+        'numTodos': !exists(json, 'numTodos') ? undefined : json['numTodos'],
+        'numDone': !exists(json, 'numDone') ? undefined : json['numDone'],
+    };
+}
+
+export function PlanWeekItemToJSON(value?: PlanWeekItem | null): any {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    return {
+        
+        'item': value.item,
+        'numTodos': value.numTodos,
+        'numDone': value.numDone,
+    };
+}
+

frontend/src/dashclient/models/index.ts

@@ -1,3 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 export * from './JournalEntry';
+export * from './PlanDay';
+export * from './PlanMonth';
+export * from './PlanWeek';
+export * from './PlanWeekItem';

frontend/src/stores/apiStore.ts

@@ -1,4 +1,4 @@
-import { Configuration, DefaultApi } from "../dashclient";
+import { Configuration, JournalApi, PlanApi } from "../dashclient";
 
 console.log(window.location.origin)
 
@@ -6,4 +6,5 @@ const configuration = new Configuration({
   basePath: "http://192.168.0.181:8080/api/v1",
 });
 
-export const dashApi = new DefaultApi(configuration);
+export const journalApi = new JournalApi(configuration);
+export const planApi = new PlanApi(configuration);

frontend/src/stores/appStore.ts

@@ -1,6 +1,7 @@
 import { writable, readable } from 'svelte/store';
 
-export const curTab = writable("Journal");
+// export const curTab = writable("Journal");
+export const curTab = writable("Plan");
 
 export const currentDate = writable<Date>(new Date());
 

frontend/src/stores/planStore.ts

@@ -0,0 +1,4 @@
+export interface PlanItem {
+  id: number,
+  text: string
+}