Add override for the event name in timetable

Add timetableName field to events that override which name is shown in
the timetable in order to allow using a custom condensed title in the
timetable for short events.

components/DiffScheduleEvent.vue

@@ -11,6 +11,12 @@
 			:after="event.name"
 			:state
 		/>
+		<DiffFieldString
+			title="Timetable Name"
+			:before="event.serverTimetableName"
+			:after="event.timetableName"
+			:state
+		/>
 		<DiffFieldString
 			title="Host"
 			:before="event.serverHost"

components/TableScheduleEvents.vue

@@ -9,6 +9,7 @@
 				<tr>
 					<th>id</th>
 					<th>name</th>
+					<th>timetableName</th>
 					<th>host</th>
 					<th>notice</th>
 					<th>description</th>
@@ -32,6 +33,13 @@
 								v-model="event.name"
 							>
 						</td>
+						<td>
+							<input
+								type="text"
+								:disabled="!canEdit(event)"
+								v-model="event.timetableName"
+							>
+						</td>
 						<td>
 							<input
 								type="text"
@@ -83,6 +91,12 @@
 								v-model="newEventName"
 							>
 						</td>
+						<td>
+							<input
+								type="text"
+								v-model="newEventShortName"
+							>
+						</td>
 						<td>
 							<input
 								type="text"
@@ -129,6 +143,7 @@
 					>
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
+						<td>{{ event.timetableName }}</td>
 						<td>{{ event.host }}</td>
 						<td class="preWrap">{{ event.notice }}</td>
 						<td class="preWrap">{{ event.description }}</td>
@@ -157,6 +172,7 @@ function canEdit(event: ClientScheduleEvent) {
 }
 
 const newEventName = ref("");
+const newEventShortName = ref("");
 const newEventHost = ref("");
 const newEventNotice = ref("");
 const newEventDescription = ref("");
@@ -178,6 +194,7 @@ function newEvent() {
 		schedule.value,
 		schedule.value.nextClientId--,
 		newEventName.value,
+		newEventShortName.value,
 		!newEventPublic.value,
 		newEventHost.value,
 		false,
@@ -189,6 +206,7 @@ function newEvent() {
 	);
 	schedule.value.events.add(event);
 	newEventName.value = "";
+	newEventShortName.value = "";
 	newEventHost.value = "";
 	newEventNotice.value = "";
 	newEventDescription.value = "";

components/Timetable.vue

@@ -106,7 +106,7 @@
 							:title="cell.event?.name"
 						>
 							{{ cell.event?.notice ? "⚠️" : undefined }}
-							{{ cell.event?.name }}
+							{{ cell.event?.timetableName || cell.event?.name }}
 						</td>
 					</tr>
 				</template>