Subscribe to appwrite updates; hot-reload table

lifetracker-server/src/app.js

@@ -28,7 +28,7 @@ app.get('/database', (req, res) => {
 })
 
 app.get('/entry/:date', (req, res) => {
-  var date = strftime("%x", new Date(req.params['date']) );
+  var date = new Date(req.params['date']).toISOString().replace(/T.*/,"");
   console.log("Fetching entry for " + date);
   
   const promise = databases.listDocuments('lifetracker-db', 'ryan');

lifetracker-vue/src/services/appwrite.js

@@ -0,0 +1,52 @@
+import { Client, Databases, Account } from "appwrite";
+
+class AppwriteService {
+    databaseId = 'lifetracker-db';
+    collectionId = "ryan";
+    constructor() {
+        this.appwrite = new Client().setEndpoint("http://ryanpandya.com:8080/v1").setProject("lifetracker")
+        this.database = new Databases(this.appwrite);
+        this.account = new Account(this.appwrite);
+    }
+
+    subscribe = (callback) => {
+        return this.appwrite.subscribe('databases.lifetracker-db.collections.ryan.documents', callback);
+            // "databases.${this.databaseId}.collections.${this.collectionId}.documents", callback);
+      }      
+
+    addEntry = async ({ date, hours, mood, comments }) => {
+        await this.database.createDocument(this.databaseId, this.collectionId, 
+            date,
+            { date: new Date(date), hours: hours, mood: mood, comments: comments });
+    }
+
+    deleteEntry = async (entryId) => {
+        await this.database.deleteDocument(this.databaseId, this.collectionId, entryId);
+    }
+
+    updateEntry = async ({ date, hours, mood, comments }) => {
+        var hours = JSON.parse("[" + hours + "]")
+        await this.database.updateDocument(this.databaseId, this.collectionId, 
+            date,
+            { date: new Date(date), hours: hours, mood: mood, comments: comments });
+    }
+
+    getUser = async () => {
+        return await this.account.get();
+    }
+
+    login = async () => {
+        await this.account.createAnonymousSession();
+        return await this.getUser();
+    }
+
+    getEntries = async () => {
+        return (await this.database.listDocuments(this.databaseId, this.collectionId)).documents;
+    }
+
+    logout = () => {
+        return this.appwrite.account.deleteSession('current');
+    }
+}
+
+export default new AppwriteService()

lifetracker-vue/src/views/DatabaseView.vue

@@ -1,23 +1,61 @@
 <script setup>
 import { useSessionStore } from "../stores/session";
 import Api from "@/services/Api";
+
+import appwrite from '@/services/appwrite';
+
 const storeSession = useSessionStore();
 </script>
 
 <script>
 var email; var userId; var password; var session;
 export default {
-    mounted(){
+    async mounted(){
+        this.user = await appwrite.getUser();
+        this.entries = await appwrite.getEntries();
+        this.subscribe();
     },
     data(){
             return {
-                entries: []
+                user: null,
+                entries: [],
+                testEntry: {
+                    date: "2023-12-18",
+                    hours: [1, 2, 3],
+                    mood: 5,
+                    comments: "Moot"
+                }
             }
         },
     methods: {
-        async getDatabase() {
-            const response = await Api().get("database");
-            this.entries = response.data;
+        async getEntries() {
+            this.entries = appwrite.getEntries();
+        },
+        subscribe(){
+            console.log("subscribing");
+            appwrite.subscribe((payload) => {
+                var event = payload.events.filter((e) => 
+                    e.match(/databases\.\*\.collections\.\*\.documents\.\*\.\w+/)
+                )[0].replace(/.+\./,"");
+                switch (event) {
+                case 'create':
+                    this.entries.push(payload.payload)
+                    this.entries = this.entries
+                    break
+                case 'update':
+                    this.entries = this.entries.map((day) => {
+                    if (day.$id === payload.payload.$id) {
+                        return payload.payload
+                    } else {
+                        return day
+                    }
+                    })
+                    break
+                case 'delete':
+                    this.entries = this.entries.filter((day) => day.$id !== payload.payload.$id)
+                    break
+                }
+            })
         }
     }
 }
@@ -38,6 +76,20 @@ export default {
     <div v-if="storeSession.isConnected">
         <h2>Welcome back, {{ storeSession.session.userId }}!</h2>
 
+        <div>
+            {{ entries }}
+        </div>
+
+        <ul>
+            <li><input v-model='testEntry.date'/></li>
+            <li><input v-model='testEntry.hours'/></li>
+            <li><input v-model='testEntry.mood'/></li>
+            <li><input v-model='testEntry.comments'/></li>
+        </ul>
+        <button @click="appwrite.addEntry(testEntry)">Add Entry</button>
+        <button @click="appwrite.updateEntry(testEntry)">Update Entry</button>
+        <button @click="appwrite.deleteEntry(testEntry.date)">Delete Entry</button>
+
         <div class="flex">
             <button @click="storeSession.logout()">Log Out</button>
         </div>

lifetracker-vue/src/views/TableView.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { useDatabaseStore } from "@/stores/database"
 import Api from "@/services/Api"
+import appwrite from '@/services/appwrite';
+
 </script>
 
 <script>
@@ -20,12 +22,12 @@ const colHeaders = ["DATE", "DAY", "12 AM"]
 const ExampleComponent = defineComponent({
   data() {
     return {
-        entries: [
-        ],
+        entries: [],
       hotSettings: {
         columns: [
           {
-            renderer: 'date'
+            type: 'text',
+            data: "date"
           },
           { renderer: 'text'},
           Array.from(new Array(24), (a, b) => { renderer: 'hour'}),
@@ -46,16 +48,42 @@ const ExampleComponent = defineComponent({
       hotRef: null
     }
   },
-  mounted() {
+  async mounted(){
+        this.user = await appwrite.getUser();
+        this.entries = await appwrite.getEntries();
+        this.updateTable();
+        this.subscribe();
     },
   methods: {
-    fetch(){
+    subscribe(){
+            console.log("subscribing");
+            appwrite.subscribe((payload) => {
+                var event = payload.events.filter((e) => 
+                    e.match(/databases\.\*\.collections\.\*\.documents\.\*\.\w+/)
+                )[0].replace(/.+\./,"");
+                switch (event) {
+                case 'create':
+                    this.entries.push(payload.payload)
+                    this.entries = this.entries
+                    break
+                case 'update':
+                    this.entries = this.entries.map((day) => {
+                    if (day.$id === payload.payload.$id) {
+                        return payload.payload
+                    } else {
+                        return day
+                    }
+                    })
+                    break
+                case 'delete':
+                    this.entries = this.entries.filter((day) => day.$id !== payload.payload.$id)
+                    break
+                }
+            })
+          },
+    updateTable(){
      this.hotRef = this.$refs.wrapper.hotInstance;
-    const storeDatabase = useDatabaseStore();
-    storeDatabase.fetchEntries();
-    this.entries = storeDatabase.entries;
      this.hotRef.loadData(this.entries);
-
     }
   },
   components: {
@@ -68,7 +96,12 @@ export default ExampleComponent;
 </script>
 
 <template>
-    <button @click="fetch">Fetch</button>
+  <button @click="updateTable">Fetch</button>
+<ul>
+    <li v-for="e in entries" :key="e">
+      {{ e }}
+    </li>
+  </ul>
   <hot-table ref="wrapper" :settings="hotSettings" :data="entries"></hot-table>
 </template>