From 5a8a7e4293131512dd0f3bf36c86363d2015b42a Mon Sep 17 00:00:00 2001
From: johndoe4 <jonher@riseup.net>
Date: Tue, 23 May 2023 01:30:53 +0200
Subject: [PATCH] Adding Starttime to Eventcards and Header

---
 src/components/Event/EventCard.vue     | 11 ++++++
 src/components/Event/StartTimeIcon.vue | 53 ++++++++++++++++++++++++++
 src/views/Event/EventView.vue          |  8 ++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/components/Event/StartTimeIcon.vue

diff --git a/src/components/Event/EventCard.vue b/src/components/Event/EventCard.vue
index c2c24f964..103ba9dc7 100644
--- a/src/components/Event/EventCard.vue
+++ b/src/components/Event/EventCard.vue
@@ -58,6 +58,16 @@
             :date="event.beginsOn.toString()"
           />
         </div>
+        <div
+          class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end"
+          :class="{ 'sm:hidden': mode === 'row' }"
+        >
+          <start-time-icon
+            :small="true"
+            v-if="!mergedOptions.hideDate"
+            :date="event.beginsOn.toString()"
+          />
+        </div>
         <span
           class="text-gray-700 dark:text-white font-semibold hidden"
           :class="{ 'sm:block': mode === 'row' }"
@@ -161,6 +171,7 @@ import {
   organizerAvatarUrl,
 } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import StartTimeIcon from "@/components/Event/StartTimeIcon.vue";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import { EventStatus } from "@/types/enums";
 import RouteName from "../../router/name";
diff --git a/src/components/Event/StartTimeIcon.vue b/src/components/Event/StartTimeIcon.vue
new file mode 100644
index 000000000..406366fd9
--- /dev/null
+++ b/src/components/Event/StartTimeIcon.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    :class="{ small }"
+    :style="`--small: ${smallStyle}`"
+  >
+    <div class="starttime-container-content font-semibold">
+      <Clock class="clock-icon"/><time :datetime="dateObj.toISOString()">{{
+        time 
+      }}</time>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { localeShortWeekDayNames } from "@/utils/datetime";
+import { computed } from "vue";
+import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue";
+
+const props = withDefaults(
+  defineProps<{
+    date: string;
+    small?: boolean;
+  }>(),
+  { small: false }
+);
+
+const dateObj = computed<Date>(() => new Date(props.date));
+
+const time = computed<string>(() =>
+  dateObj.value.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })
+);
+
+const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
+</script>
+
+<style lang="scss" scoped>
+div.starttime-container {
+  width: auto;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+  height: calc(40px * var(--small));
+
+  }
+  .starttime-container-content {
+    font-size: calc(1rem * var(--small));
+    padding: 0 0.5rem;
+  }
+
+  .clock-icon { 
+    vertical-align: middle;
+    padding-right: 0.2rem;
+    display: inline-block;
+  }
+</style>
diff --git a/src/views/Event/EventView.vue b/src/views/Event/EventView.vue
index 9f79acdbf..a02c717f2 100755
--- a/src/views/Event/EventView.vue
+++ b/src/views/Event/EventView.vue
@@ -18,6 +18,13 @@
           />
         </div>
 
+        <div class="start-time-icon-wrapper relative" v-if="event?.beginsOn">
+          <start-time-icon
+            :date="event.beginsOn.toString()"
+            class="absolute right-3 -top-16"
+          />
+        </div>
+
         <section class="intro px-2 pt-4" dir="auto">
           <div class="flex flex-wrap gap-2 justify-end">
             <div class="flex-1 min-w-[300px]">
@@ -289,6 +296,7 @@ import {
   usernameWithDomain,
 } from "@/types/actor";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import StartTimeIcon from "@/components/Event/StartTimeIcon.vue";
 import SkeletonDateCalendarIcon from "@/components/Event/SkeletonDateCalendarIcon.vue";
 import Earth from "vue-material-design-icons/Earth.vue";
 import Link from "vue-material-design-icons/Link.vue";