Subscribe to appwrite updates; hot-reload table
This commit is contained in:
parent
e0cf8a8236
commit
5aa0458097
@ -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');
|
||||
|
||||
52
lifetracker-vue/src/services/appwrite.js
Normal file
52
lifetracker-vue/src/services/appwrite.js
Normal file
@ -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()
|
||||
@ -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>
|
||||
|
||||
@ -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(){
|
||||
this.hotRef = this.$refs.wrapper.hotInstance;
|
||||
const storeDatabase = useDatabaseStore();
|
||||
storeDatabase.fetchEntries();
|
||||
this.entries = storeDatabase.entries;
|
||||
this.hotRef.loadData(this.entries);
|
||||
|
||||
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;
|
||||
this.hotRef.loadData(this.entries);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -68,8 +96,13 @@ export default ExampleComponent;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="fetch">Fetch</button>
|
||||
<hot-table ref="wrapper" :settings="hotSettings" :data="entries"></hot-table>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user