83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<q-card
|
||
|
|
class="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%) justify-start content-center items-center "
|
||
|
|
bordered
|
||
|
|
>
|
||
|
|
{{ event.type.name }}
|
||
|
|
|
||
|
|
<div v-if="event.description" class=" col-12 q-px-sm" style="font-size: 10px">
|
||
|
|
Info
|
||
|
|
{{ event.description }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-for="(job, index) in event.jobs" v-bind:key="index">
|
||
|
|
<q-separator style="justify-start content-center" />
|
||
|
|
<div>{{ job.start | formatToHour }} - {{ job.end | formatToHour }}</div>
|
||
|
|
<div>
|
||
|
|
{{ job.type.name }}
|
||
|
|
</div>
|
||
|
|
<div class="col-12 q-px-sm" style="font-size: 10px">
|
||
|
|
{{ job.comment }}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<q-select
|
||
|
|
filled
|
||
|
|
v-model="availableUsers"
|
||
|
|
multiple
|
||
|
|
:options="availableUsers"
|
||
|
|
use-chips
|
||
|
|
stack-label
|
||
|
|
label="Dienste"
|
||
|
|
class="col-12 q-px-sm"
|
||
|
|
style="font-size: 10px "
|
||
|
|
counter
|
||
|
|
:max-values="job.required_services"
|
||
|
|
>
|
||
|
|
</q-select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, ref } from '@vue/composition-api';
|
||
|
|
import { Store } from 'vuex';
|
||
|
|
import { StateInterface } from 'src/store';
|
||
|
|
import { ScheduleInterface } from '../../../store/schedule';
|
||
|
|
import { date } from 'quasar';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
event: FG.Event;
|
||
|
|
}
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'Eventslot',
|
||
|
|
components: {},
|
||
|
|
props: {
|
||
|
|
event: {
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
formatToHour: function(value: Date) {
|
||
|
|
if (value) {
|
||
|
|
return date.formatDate(value, 'HH:mm');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setup(props: Props, { root }) {
|
||
|
|
const store = <Store<StateInterface>>root.$store;
|
||
|
|
const state = <ScheduleInterface>store.state.schedule;
|
||
|
|
const availableUsers = null;
|
||
|
|
const refreshKey = ref(0);
|
||
|
|
|
||
|
|
return {
|
||
|
|
refreshKey,
|
||
|
|
availableUsers
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|