aboutsummaryrefslogtreecommitdiff
path: root/src/components/announcement_editor/announcement_editor.vue
blob: e2418b8d49261f0c0199190f13510a996f677e40 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
  <div class="announcement-editor">
    <textarea
      ref="textarea"
      v-model="announcement.content"
      class="post-textarea"
      rows="1"
      cols="1"
      :placeholder="$t('announcements.post_placeholder')"
      :disabled="disabled"
    />
    <span class="announcement-metadata">
      <label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
      <input
        id="announcement-start-time"
        v-model="announcement.startsAt"
        :type="announcement.allDay ? 'date' : 'datetime-local'"
        :disabled="disabled"
      >
    </span>
    <span class="announcement-metadata">
      <label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
      <input
        id="announcement-end-time"
        v-model="announcement.endsAt"
        :type="announcement.allDay ? 'date' : 'datetime-local'"
        :disabled="disabled"
      >
    </span>
    <span class="announcement-metadata">
      <Checkbox
        id="announcement-all-day"
        v-model="announcement.allDay"
        :disabled="disabled"
      />
      <label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label>
    </span>
  </div>
</template>

<script src="./announcement_editor.js"></script>

<style lang="scss">
    .announcement-editor {
      display: flex;
      align-items: stretch;
      flex-direction: column;
      .announcement-metadata {
        margin-top: 0.5em;
      }
    }
</style>