76 lines
No EOL
1.9 KiB
Vue
76 lines
No EOL
1.9 KiB
Vue
<template>
|
|
<v-list-item class="pa-0" three-line>
|
|
<EventDate :date="event.start" />
|
|
<v-list-item-content>
|
|
<v-list-item-title class="text-h6 text-md-h5 mt-0 mb-1">
|
|
{{ event.summary }}
|
|
</v-list-item-title>
|
|
<v-list-item-subtitle
|
|
v-if="event.description"
|
|
class="text-subtitle-2 text-md-subtitle-1 mt-0 mb-2"
|
|
>
|
|
{{ event.description }}
|
|
</v-list-item-subtitle>
|
|
<v-list-item-subtitle
|
|
class="
|
|
d-inline-block
|
|
text-truncate
|
|
thw-heading-font
|
|
blue-grey--text
|
|
text--darken-1
|
|
font-weight-bold
|
|
ma-0
|
|
"
|
|
>
|
|
{{ data_string }}
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
import { DateTime, DurationLikeObject } from "luxon";
|
|
import { EventModel } from "./EventModel";
|
|
import EventDate from "./EventDate.vue";
|
|
|
|
@Component({
|
|
components: {
|
|
EventDate,
|
|
},
|
|
})
|
|
export default class EventItem extends Vue {
|
|
@Prop()
|
|
private readonly event!: EventModel;
|
|
|
|
private get data_string(): string {
|
|
const locale_string = this.event.start.toLocaleString(
|
|
DateTime.DATETIME_MED_WITH_WEEKDAY
|
|
);
|
|
|
|
// decide which duration units to include
|
|
let units: (keyof DurationLikeObject)[] = ["hours"];
|
|
|
|
if (this.event.duration.as("days") >= 1) {
|
|
// include days if duration is at least one day
|
|
units.push("days");
|
|
}
|
|
|
|
if (!Number.isInteger(this.event.duration.as("hours"))) {
|
|
// include minutes if duration in hours is not a whole number
|
|
units.push("minutes");
|
|
}
|
|
|
|
const duration_string = this.event.duration
|
|
// "..." is the spread operator
|
|
.shiftTo(...units)
|
|
.mapUnits((x) => Math.round(x))
|
|
.toHuman();
|
|
|
|
return `${locale_string} (${duration_string})`;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |