diff options
| -rw-r--r-- | src/App.vue | 37 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 11 | ||||
| -rw-r--r-- | src/lib.ts | 65 |
3 files changed, 82 insertions, 31 deletions
diff --git a/src/App.vue b/src/App.vue index 24da714..9ac8e3f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -38,7 +38,7 @@ import PlusIcon from './components/icon/PlusIcon.vue'; import SettingsIcon from './components/icon/SettingsIcon.vue'; import HelpIcon from './components/icon/HelpIcon.vue'; // Other -import {HistDate, TimelineState, HistEvent, getUnitDiff, MONTH_SCALE, DAY_SCALE, stepDate} from './lib'; +import {HistDate, TimelineState, HistEvent, queryServer, HistEventJson, jsonToHistEvent} from './lib'; import {useStore} from './store'; // Refs @@ -100,34 +100,19 @@ function onTimelineRemove(idx: number){ // Event data const eventMap: Ref<Map<number, HistEvent>> = ref(new Map()); // Maps event IDs to HistEvents -let nextEventId = 0; // For generating placeholder events -function onEventReq(startDate: HistDate, endDate: HistDate){ - // Get number of existing events in range - let numExisting = 0; - for (let event of eventMap.value.values()){ - if (!event.start.isEarlier(startDate) && !endDate.isEarlier(event.start)){ - numExisting += 1; - } +async function onEventReq(startDate: HistDate, endDate: HistDate){ + // Get events from server + let urlParams = new URLSearchParams({type: 'events', range: `${startDate}.${endDate}`, limit: '10'}); + let responseObj: HistEventJson[] = await queryServer(urlParams); + if (responseObj == null){ + return; } - // Possibly add new events - let tempScale = 1; - let numUnits = getUnitDiff(startDate, endDate, tempScale); - if (numUnits < 2){ - tempScale = MONTH_SCALE; - numUnits = getUnitDiff(startDate, endDate, tempScale); - if (numUnits < 2){ - tempScale = DAY_SCALE; - numUnits = getUnitDiff(startDate, endDate, tempScale); + // Add to map + for (let eventObj of responseObj){ + if (!eventMap.value.has(eventObj.id)){ + eventMap.value.set(eventObj.id, jsonToHistEvent(eventObj)); } } - for (let i = 0; i < 3 - numExisting; i++){ - let start = startDate.clone(); - let steps = Math.floor(Math.random() * (numUnits + 1)); - stepDate(start, tempScale, {count: steps, inplace: true}); - let event = {id: nextEventId, title: `Event ${nextEventId}`, start, startUpper: null, end: null, endUpper: null}; - eventMap.value.set(event.id, event); - nextEventId += 1; - } } // For resize handling diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index d71176f..da2c571 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -31,7 +31,7 @@ <div v-for="id in eventIdToPos.keys()" :key="id" class="absolute bg-black text-white border border-white rounded animate-fadein" :style="eventStyles(id)"> - {{eventMap.get(id)!.id}} + {{eventMap.get(id)!.title}} </div> <!-- Buttons --> <icon-button :size="30" class="absolute top-2 right-2" @@ -51,7 +51,7 @@ import MinusIcon from './icon/MinusIcon.vue'; // Other import {WRITING_MODE_HORZ, MIN_DATE, MAX_DATE, MONTH_SCALE, DAY_SCALE, SCALES, MIN_CAL_DATE, HistDate, stepDate, inDateScale, getScaleRatio, getUnitDiff, getDaysInMonth, moduloPositive, TimelineState, - HistEvent} from '../lib'; + HistEvent, getImagePath} from '../lib'; import {useStore} from '../store'; // Refs @@ -266,8 +266,8 @@ const eventIdToPos = computed(() => { // Maps visible event IDs to x-pos, y-pos, let posFrac = unitOffset / numUnits; let posX = props.vert ? minorAxisStep : availLen.value * posFrac; let posY = props.vert ? availLen.value * posFrac : minorAxisStep; - idToPos.set(event.id, [posX, posY, 50, 50]); - minorAxisStep += 5; + idToPos.set(event.id, [posX, posY, 100, 100]); + minorAxisStep += 10; } // If more events could be displayed, notify parent if (idToPos.size < 3){ @@ -726,11 +726,14 @@ function tickLabelStyles(idx: number){ } function eventStyles(eventId: number){ const [x, y, w, h] = eventIdToPos.value.get(eventId)!; + let event = props.eventMap.get(eventId)!; return { left: x + 'px', top: y + 'px', width: w + 'px', height: h + 'px', + backgroundImage: `url(${getImagePath(event.imgId)})`, + backgroundSize: 'cover', transitionProperty: skipTransition.value ? 'none' : 'all', transitionDuration, transitionTimingFunction, @@ -107,7 +107,11 @@ export class HistDate { return this.day + this.month * 50 + this.year * 1000; } toString(){ - return `${this.year}-${this.month}-${this.day}`; + if (this.isEarlier(MIN_CAL_DATE)){ + return `${this.year}`; + } else { + return `${this.year}-${this.month}-${this.day}`; + } } getDayDiff(other: HistDate){ const jdn2 = gregorianToJdn(this.year, this.month, this.day); @@ -302,4 +306,63 @@ export type HistEvent = { startUpper: HistDate | null, end: HistDate | null, endUpper: HistDate | null, + ctg: string, + imgId: number, + pop: number, }; + +// For server requests +const SERVER_DATA_URL = (new URL(window.location.href)).origin + '/data/' +const SERVER_IMG_PATH = '/hist_data/img/' +export async function queryServer(params: URLSearchParams){ + // Construct URL + const url = new URL(SERVER_DATA_URL); + url.search = params.toString(); + // Query server + let responseObj; + try { + const response = await fetch(url.toString()); + responseObj = await response.json(); + } catch (error){ + console.log(`Error with querying ${url.toString()}: ${error}`); + return null; + } + return responseObj; +} +export function getImagePath(imgId: number): string { + return SERVER_IMG_PATH + String(imgId) + '.jpg'; +} +// For server responses +export type HistDateJson = { + gcal: boolean | null, + year: number, + month: number | null, + day: number | null, +} +export type HistEventJson = { + id: number, + title: string, + start: HistDateJson, + startUpper: HistDateJson | null, + end: HistDateJson | null, + endUpper: HistDateJson | null, + ctg: string, + imgId: number, + pop: number, +} +export function jsonToHistDate(json: HistDateJson){ + return new HistDate(json.year, json.month == null ? 1 : json.month, json.day == null ? 1 : json.day); +} +export function jsonToHistEvent(json: HistEventJson){ + return { + id: json.id, + title: json.title, + start: jsonToHistDate(json.start), + startUpper: json.startUpper == null ? null : jsonToHistDate(json.startUpper), + end: json.end == null ? null : jsonToHistDate(json.end), + endUpper: json.endUpper == null ? null : jsonToHistDate(json.endUpper), + ctg: json.ctg, + imgId: json.imgId, + pop: json.pop, + }; +} |