Colors and styles; Live up and down with appwrite

lifetracker-server/src/app.js

@@ -6,6 +6,7 @@ const sdk = require('node-appwrite')
 const client = new sdk.Client()
 const databases = new sdk.Databases(client)
 const strftime = require('strftime')
+const { entries } = require('./import.js')
 client
     .setEndpoint('http://ryanpandya.com:8080/v1') // Your API Endpoint
     .setProject('lifetracker') // Your project ID

lifetracker-server/src/import.js

@@ -22,10 +22,10 @@ var data = fs.readFileSync('data.csv')
         var comments = entry.slice(27).filter(x => x != "").join().replace(/^"/,"").replace(/"$/,'')
         
         var dbEntry = {
-            Date: date,
-            Hours: hours,
-            Mood: mood,
-            Comments: comments
+            date: date,
+            hours: hours,
+            mood: mood,
+            comments: comments
         };
         client
             .setEndpoint('http://ryanpandya.com:8080/v1') // Your API Endpoint

lifetracker-vue/package-lock.json

@@ -12,6 +12,7 @@
         "appwrite": "^11.0.0",
         "axios": "^1.4.0",
         "handsontable": "^12.3.3",
+        "moment": "^2.29.4",
         "node": "^20.0.0",
         "pinia": "^2.0.35",
         "vue": "^3.2.47",

lifetracker-vue/package.json

@@ -14,6 +14,7 @@
     "appwrite": "^11.0.0",
     "axios": "^1.4.0",
     "handsontable": "^12.3.3",
+    "moment": "^2.29.4",
     "node": "^20.0.0",
     "pinia": "^2.0.35",
     "vue": "^3.2.47",

lifetracker-vue/src/assets/colors.css

@@ -0,0 +1,69 @@
+:root{
+    --white: white;
+    --black: #273036;
+    --red: #c71634;
+    --cyan: #005744;
+    --pink: #ff65ae;
+    --blue: #00a9b3;
+    --green: #189749;
+    --yellow: #fff336;
+    --orange: #ff6d01;
+    --purple: #5b3ab1;
+    --darkred: #ff2816;
+    --lime: #bfff55;
+}
+
+.handsontable * {
+    border: 0px !important;
+    text-align: center !important;
+    vertical-align: middle !important;
+    font-size: 15px;
+}
+
+.handsontable td, .handsontable th{
+    font-family: monospace;
+    color: var(--white);
+    background: var(--black);
+}
+
+th{
+    color: gray !important;
+}
+td.color-black{
+    background: var(--black);
+}
+td.color-red{
+    background: var(--red);
+}
+td.color-blue{
+    background: var(--blue);
+}
+td.color-green{
+    background: var(--green);
+}
+td.color-purple{
+    background: var(--purple);
+}
+td.color-lime{
+    background: var(--lime);
+    color: var(--black);
+}
+td.color-cyan{
+    background: var(--cyan);
+}
+td.color-darkred{
+    background: var(--darkred);
+}
+td.color-pink{
+    background: var(--pink);
+}
+td.color-orange{
+    background: var(--orange);
+}
+td.color-yellow{
+    background: var(--yellow);
+    color: var(--black);
+}
+h2{
+    color:green;
+}

lifetracker-vue/src/components/AuthNav.vue

@@ -8,7 +8,9 @@ storeSession.connect();
 
 <template>
     <div v-if="!storeSession.isConnected">
-        Not connected.
+        <button @click="storeSession.loginAsRyan()">
+            Connect
+        </button>
     </div>
     <div v-if="storeSession.isConnected">
         Connected as {{ storeSession.session.userId }}.

lifetracker-vue/src/services/appwrite.js

@@ -1,4 +1,4 @@
-import { Client, Databases, Account } from "appwrite";
+import { Client, Databases, Account, Query } from "appwrite";
 
 class AppwriteService {
     databaseId = 'lifetracker-db';
@@ -41,7 +41,11 @@ class AppwriteService {
     }
 
     getEntries = async () => {
-        return (await this.database.listDocuments(this.databaseId, this.collectionId)).documents;
+        return (await this.database.listDocuments(
+            this.databaseId, this.collectionId,
+            [Query.orderAsc("date")]
+        )
+        ).documents;
     }
 
     logout = () => {

lifetracker-vue/src/stores/session.ts

@@ -18,18 +18,23 @@ export const useSessionStore = defineStore({
   },
   actions: {
     logout() {
-      const promise = account.deleteSession(this.session.id);
+      const promise = account.deleteSession(this.session['id']);
       var self = this;
-      promise.then(function (response) {
-          self.session = {
+      promise.then(
+        function (response) {
+          self.session = [
+            {
               email: '',
               userId: '',
               id: '',
-          };
+            },
+          ];
           console.log(response); // Success
-      }, function (error) {
+        },
+        function (error) {
           console.log(error); // Failure
-      });
+        }
+      );
     },
     connect() {
       const promise = account.getSession('current');
@@ -56,6 +61,9 @@ export const useSessionStore = defineStore({
         }
       );
     },
+    loginAsRyan() {
+      this.login('ryan@ryanpandya.com', 'A(84)o9@38appwrite');
+    },
     login(email: string, password: string) {
       console.log(this.session);
       const promise = account.createEmailSession(email, password);
@@ -65,15 +73,18 @@ export const useSessionStore = defineStore({
         id: '',
       };
       var self = this;
-      promise.then(function (response) {
+      promise.then(
+        function (response) {
           session.email = response.providerUid;
           session.userId = response.userId;
           session.id = response.$id;
           console.log('Logged in');
           self.session = session;
-      }, function (error) {
+        },
+        function (error) {
           console.log('Error');
-      });
+        }
+      );
     },
   },
 });

lifetracker-vue/src/views/TableView.vue

@@ -2,7 +2,7 @@
 import { useDatabaseStore } from "@/stores/database"
 import Api from "@/services/Api"
 import appwrite from '@/services/appwrite';
-
+import moment from 'moment';
 </script>
 
 <script>
@@ -10,10 +10,45 @@ import { defineComponent } from 'vue';
 import { HotTable } from '@handsontable/vue3';
 import { registerAllModules } from 'handsontable/registry';
 import 'handsontable/dist/handsontable.full.css';
+import '../assets/colors.css';
 import Handsontable from 'handsontable/base';
 // register Handsontable's modules
 registerAllModules();
 
+function getHourClass(i) {
+  const colorMapping = {
+    0: "black",
+    1: "red",
+    2: "cyan",
+    3: "pink",
+    4: "blue",
+    5: "green",
+    6: "yellow",
+    7: "orange",
+    8: "purple",
+    9: "darkred",
+    10: "lime"
+  }
+  if (i == null) {
+      return "";
+    }
+    else {
+      return "color-" + colorMapping[i];
+    }
+}
+
+function hourCol(t) {
+  return {
+    data: "hours." + t,
+    type: 'numeric',
+    renderer(instance, td, row, col, prop, value) {
+      td.className = getHourClass(value);
+      td.innerText = value == null ? value : parseFloat(value);
+              return td;
+            }
+  }
+}
+
 const colHeaders = ["DATE", "DAY", "12 AM"]
     .concat(Array.from(new Array(11), (x, y) => y+1 + " AM") )
     .concat(Array.from(new Array(12), (x, y) => y+1 + " PM") )
@@ -26,21 +61,37 @@ const ExampleComponent = defineComponent({
       hotSettings: {
         columns: [
           {
-            type: 'text',
-            data: "date"
+            readOnly: true,
+            data: "date",
+            renderer(instance, td, row, col, prop, value) {
+              var date = new moment(value).utc().format("MM/DD");
+              td.className = "color-black";
+              td.innerText = date;
+              return td;
+            }
           },
-          { renderer: 'text'},
-          Array.from(new Array(24), (a, b) => { renderer: 'hour'}),
-          { renderer: 'text'},
-          { renderer: 'text'}
+          {
+            readOnly: true,
+            data: "date",
+            renderer(instance, td, row, col, prop, value) {
+              var date = new moment(value).utc().format("ddd")
+              td.innerText = date;
+              return td;
+            }
+          },
+          Array.from(new Array(24), (_, t) => hourCol(t)),
+          { data: "mood", type: "numeric" },
+          { data: "comments", style: "text-align:left;" }
         ].flat(),
         colHeaders: colHeaders,
         rowHeaders: false,
         readOnly: false,
         height: 'auto',
-        afterChange: () => {
-          if (this.hotRef) {
-            console.log(this.hotRef.getSourceData());
+        afterChange: (changes) => {
+          if (changes != null) {
+            var entry = this.entries[changes[0][0]];
+            entry.date = entry.date.replace(/T.*/, "");
+            appwrite.updateEntry(entry);
           }
         },
         licenseKey: 'non-commercial-and-evaluation'
@@ -58,6 +109,7 @@ const ExampleComponent = defineComponent({
     subscribe(){
             console.log("subscribing");
       appwrite.subscribe((payload) => {
+        console.log("Caught " + payload);
                 var event = payload.events.filter((e) => 
                     e.match(/databases\.\*\.collections\.\*\.documents\.\*\.\w+/)
                 )[0].replace(/.+\./,"");
@@ -96,12 +148,12 @@ export default ExampleComponent;
 </script>
 
 <template>
-  <button @click="updateTable">Fetch</button>
+  <!-- <button @click="updateTable">Fetch</button>
 <ul>
     <li v-for="e in entries" :key="e">
       {{ e }}
     </li>
-  </ul>
+  </ul> -->
   <hot-table ref="wrapper" :settings="hotSettings" :data="entries"></hot-table>
 </template>