diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-10-17 15:44:35 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-10-17 15:44:35 +1100 |
| commit | aab4fbb2e15d9fea526400e33c8304bf3efba086 (patch) | |
| tree | 501bb7953c02fcc84762b2faade303e7f1cfd005 /src/components/TimeLine.vue | |
| parent | 5c9771e612105ed85e3318f578b84cfb07b656e8 (diff) | |
Display event data from server
Add queryServer()
Add image display
Add conversions from JSON responses to HistDate and HistEvent
Diffstat (limited to 'src/components/TimeLine.vue')
| -rw-r--r-- | src/components/TimeLine.vue | 11 |
1 files changed, 7 insertions, 4 deletions
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, |