60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<v-list-item class="pa-0" three-line>
|
||
|
|
<div>
|
||
|
|
<span class="text-h4 text-md-h3">{{ start_day }}</span>
|
||
|
|
<span class="text-h5 text-md-h4 grey--text text--darken-1">{{
|
||
|
|
start_month
|
||
|
|
}}</span>
|
||
|
|
</div>
|
||
|
|
<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="thw-heading-font 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 } from "luxon";
|
||
|
|
import Event from "./event";
|
||
|
|
|
||
|
|
@Component
|
||
|
|
export default class EventItem extends Vue {
|
||
|
|
@Prop()
|
||
|
|
private readonly event!: Event;
|
||
|
|
|
||
|
|
private get start_day(): string {
|
||
|
|
return this.event.start.toFormat("dd.");
|
||
|
|
}
|
||
|
|
|
||
|
|
private get start_month(): string {
|
||
|
|
return this.event.start.toFormat("MM.");
|
||
|
|
}
|
||
|
|
|
||
|
|
private get data_string(): string {
|
||
|
|
const locale_string = this.event.start
|
||
|
|
.setLocale(navigator.language)
|
||
|
|
.toLocaleString(DateTime.DATETIME_MED);
|
||
|
|
|
||
|
|
// TODO: if applicable, include days and/or minutes.
|
||
|
|
const duration_string = this.event.duration.shiftTo("hours").toHuman();
|
||
|
|
|
||
|
|
return locale_string + " (" + duration_string + ")";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|