Mostly have live scrolling working.
This commit is contained in:
parent
994b26b2bd
commit
8239a096c8
14
lifetracker-vue/package-lock.json
generated
14
lifetracker-vue/package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"appwrite": "^11.0.0",
|
||||
"axios": "^1.4.0",
|
||||
"handsontable": "^12.3.3",
|
||||
"luxon": "^3.3.0",
|
||||
"moment": "^2.29.4",
|
||||
"node": "^20.0.0",
|
||||
"pinia": "^2.0.35",
|
||||
@ -1295,6 +1296,14 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/luxon": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
|
||||
"integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.25.9",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
||||
@ -3196,6 +3205,11 @@
|
||||
"yallist": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"luxon": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
|
||||
"integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg=="
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.25.9",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"appwrite": "^11.0.0",
|
||||
"axios": "^1.4.0",
|
||||
"handsontable": "^12.3.3",
|
||||
"luxon": "^3.3.0",
|
||||
"moment": "^2.29.4",
|
||||
"node": "^20.0.0",
|
||||
"pinia": "^2.0.35",
|
||||
|
||||
@ -21,6 +21,14 @@
|
||||
filter: contrast(85%);
|
||||
}
|
||||
|
||||
.invert {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.day-of-week{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.handsontable * {
|
||||
border: 0px !important;
|
||||
text-align: center !important;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Client, Databases, Account, Query } from "appwrite";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
class AppwriteService {
|
||||
databaseId = 'lifetracker-db';
|
||||
@ -40,12 +41,25 @@ class AppwriteService {
|
||||
return await this.getUser();
|
||||
}
|
||||
|
||||
getEntries = async () => {
|
||||
getEntries = async (date=null, numEntries=25) => {
|
||||
if(date == null){date = DateTime.now()}
|
||||
|
||||
date = DateTime.fromISO(date);
|
||||
|
||||
var firstEntry = (await this.database.listDocuments(
|
||||
this.databaseId, this.collectionId,
|
||||
[Query.orderAsc("date"),Query.limit(1)])
|
||||
).documents[0];
|
||||
var referenceDate = DateTime.fromISO(firstEntry.date).toUTC();
|
||||
|
||||
var offset = Math.floor(date.diff(referenceDate).as("days")) - 1;
|
||||
|
||||
return (await this.database.listDocuments(
|
||||
this.databaseId, this.collectionId,
|
||||
[
|
||||
Query.orderAsc("date"),
|
||||
//Query.limit(365)
|
||||
Query.offset(offset),
|
||||
Query.limit(numEntries)
|
||||
]
|
||||
)
|
||||
).documents;
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
import { useDatabaseStore } from "@/stores/database"
|
||||
import Api from "@/services/Api"
|
||||
import appwrite from '@/services/appwrite';
|
||||
import moment from 'moment';
|
||||
import { DateTime } from "luxon";
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, toRaw, reactive } from 'vue';
|
||||
import { HotTable } from '@handsontable/vue3';
|
||||
import { registerAllModules } from 'handsontable/registry';
|
||||
import 'handsontable/dist/handsontable.full.css';
|
||||
@ -15,6 +15,21 @@ import Handsontable from 'handsontable/base';
|
||||
// register Handsontable's modules
|
||||
registerAllModules();
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
function getHourClass(i) {
|
||||
const colorMapping = {
|
||||
0: "black",
|
||||
@ -29,6 +44,9 @@ function getHourClass(i) {
|
||||
9: "darkred",
|
||||
10: "lime"
|
||||
}
|
||||
if(i > 10){
|
||||
i = Math.round(i/10) - 1
|
||||
}
|
||||
if (i == null) {
|
||||
return "";
|
||||
}
|
||||
@ -58,14 +76,21 @@ const ExampleComponent = defineComponent({
|
||||
data() {
|
||||
return {
|
||||
entries: [],
|
||||
numEntries: 25,
|
||||
offset: 0,
|
||||
hotSettings: {
|
||||
autoRowSize: true,
|
||||
columns: [
|
||||
{
|
||||
readOnly: true,
|
||||
data: "date",
|
||||
renderer(instance, td, row, col, prop, value) {
|
||||
var date = new moment(value).utc().format("MM/DD");
|
||||
td.className = "color-black";
|
||||
var date = DateTime.fromISO(value).toUTC().toFormat("MM/dd");
|
||||
var today = DateTime.now().toFormat("MM/dd");
|
||||
if(today == date){
|
||||
td.className = "color-black invert";
|
||||
}
|
||||
else{td.className = "color-black";}
|
||||
td.innerText = date;
|
||||
return td;
|
||||
}
|
||||
@ -74,8 +99,13 @@ const ExampleComponent = defineComponent({
|
||||
readOnly: true,
|
||||
data: "date",
|
||||
renderer(instance, td, row, col, prop, value) {
|
||||
var date = new moment(value).utc().format("ddd")
|
||||
td.innerText = date;
|
||||
var date = DateTime.fromISO(value).toUTC();
|
||||
var today = DateTime.now().toFormat("MM/dd");
|
||||
if(date.toFormat("MM/dd") == today){
|
||||
td.className = "color-black invert day-of-week";
|
||||
}
|
||||
else{td.className = "color-black day-of-week";}
|
||||
td.innerText = date.toFormat("EEE");
|
||||
return td;
|
||||
}
|
||||
},
|
||||
@ -91,7 +121,7 @@ const ExampleComponent = defineComponent({
|
||||
rowHeights: '22px',
|
||||
colWidths(i) {
|
||||
if((i > 1) && (i < 26)){
|
||||
return "40px";
|
||||
return "50px";
|
||||
}
|
||||
else if(i == 27){
|
||||
return "1000px";
|
||||
@ -105,6 +135,7 @@ const ExampleComponent = defineComponent({
|
||||
},
|
||||
afterChange: (changes) => {
|
||||
this.fixSelectionBug();
|
||||
//this.setActiveHourHeader();
|
||||
if (changes != null) {
|
||||
var entry = this.entries[changes[0][0]];
|
||||
entry.date = entry.date.replace(/T.*/, "");
|
||||
@ -118,22 +149,67 @@ const ExampleComponent = defineComponent({
|
||||
},
|
||||
async mounted(){
|
||||
this.user = await appwrite.getUser();
|
||||
this.entries = await appwrite.getEntries();
|
||||
this.entries = await appwrite.getEntries(null,5);
|
||||
this.updateTable();
|
||||
this.subscribe();
|
||||
this.fixSelectionBug();
|
||||
},
|
||||
created () {
|
||||
window.addEventListener('wheel', debounce(this.handleScroll, 300, true));
|
||||
},
|
||||
unmounted () {
|
||||
window.removeEventListener('wheel', debounce(this.handleScroll, 300, true));
|
||||
},
|
||||
methods: {
|
||||
setActiveHourHeader(){
|
||||
var timeString = DateTime.now().toFormat("hh a");
|
||||
var currentTimeHeader = Array.from(document.querySelectorAll("th"))
|
||||
.find(el => el.innerText == timeString);
|
||||
currentTimeHeader.className = "invert";
|
||||
},
|
||||
async handleScroll(e){
|
||||
var offset;
|
||||
if(e.deltaY > 0){
|
||||
var lastDate = DateTime.fromISO(
|
||||
this.entries[
|
||||
this.hotRef
|
||||
.getPlugin('autoRowSize')
|
||||
.getLastVisibleRow()
|
||||
].date).toUTC().plus({ days: 1 });
|
||||
console.log("Grabbing 5 more entries starting at " + lastDate.toISO());
|
||||
var newEntries = await appwrite.getEntries(
|
||||
lastDate.plus({ days: 1 })
|
||||
, 5);
|
||||
newEntries.forEach((e) => {
|
||||
this.entries.push(e);
|
||||
})
|
||||
}
|
||||
else{
|
||||
var firstDate = DateTime.fromISO(
|
||||
this.entries[
|
||||
this.hotRef
|
||||
.getPlugin('autoRowSize')
|
||||
.getFirstVisibleRow()
|
||||
].date).toUTC().minus({ days: 1 });
|
||||
console.log("Grabbing 5 previous entries ending at " + firstDate.toISO());
|
||||
var newEntries = await appwrite.getEntries(
|
||||
firstDate.minus({ days: 6 })
|
||||
, 5);
|
||||
var entries = this.entries;
|
||||
newEntries.reverse().forEach((e) => {
|
||||
entries.unshift(e);
|
||||
})
|
||||
this.entries = entries;
|
||||
}
|
||||
},
|
||||
fixSelectionBug(){
|
||||
if(this.hotRef){
|
||||
var offset = (this.hotRef.getRowHeight() + 1) * this.entries.length;//document.querySelector(".wtHider").clientHeight;
|
||||
var offset = (this.hotRef.getRowHeight()) * (this.entries.length + 1) + 2;//document.querySelector(".wtHider").clientHeight;
|
||||
document.querySelector(".htBorders div").style.top = "-" + offset + "px";
|
||||
}
|
||||
},
|
||||
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(/.+\./,"");
|
||||
@ -172,7 +248,9 @@ export default ExampleComponent;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <button @click="updateTable">Fetch</button>
|
||||
<button @click="concatEntries">Fuck</button>
|
||||
<!-- <div>{{ entries }}</div>
|
||||
|
||||
<ul>
|
||||
<li v-for="e in entries" :key="e">
|
||||
{{ e }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user