Skip to content

Commit

Permalink
further dev :S
Browse files Browse the repository at this point in the history
  • Loading branch information
@mono424
mono424 committed Aug 28, 2023
1 parent 0f32725 commit 797d00d
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 24 deletions.
46 changes: 23 additions & 23 deletions web/template/partial/course/manage/lecture-management-card.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
{{end}}
</p>
</div>
<div x-show="lecture.data.isConverting" class="p-4" x-init="lecture.data.keepProgressesUpdated()">
<div x-show="lecture.data.isConverting" class="p-4" x-init="lecture.keepProgressesUpdated()">
<span class="text-1 font-semibold text-sm">Converting:</span>
<template x-for="p in lecture.data.transcodingProgresses">
<div class="w-full ml-2">
Expand Down Expand Up @@ -113,7 +113,7 @@
aria-labelledby="menu-button" tabindex="-1">
<span class="py-1" role="none">
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
<template x-for="file in lecture.data.getDownloads()">
<template x-for="file in lecture.getDownloads()">
<a :href="file.DownloadURL" download
class="hover:bg-gray-100 text-3 dark:hover:bg-gray-600
block px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md"
Expand Down Expand Up @@ -184,29 +184,29 @@
class="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 border border-black rounded shadow-md overflow-hidden"
>
<div>
<button @click="lecture.data.startSingleEdit(); closeMoreDropdown();"
<button @click="lecture.startSingleEdit(); closeMoreDropdown();"
class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
Edit Lecture
</button>
<button @click="lecture.data.deleteLecture(); closeMoreDropdown();"
<button @click="lecture.deleteLecture(); closeMoreDropdown();"
class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
Delete Lecture
</button>
<button x-text="lecture.data.private?'Make public': 'Make private'"
class="block w-full px-4 py-2 text-left text-sm"
@click="lecture.data.toggleVisibility(); closeMoreDropdown()"
@click="lecture.toggleVisibility(); closeMoreDropdown()"
x-show="lecture.data.isRecording"
:class="lecture.data.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
Make private
</button>
</div>
<template x-if="lecture.data.seriesIdentifier.length > 0">
<div class="border-t border-black">
<button @click="lecture.data.startSeriesEdit(); closeMoreDropdown();"
<button @click="lecture.startSeriesEdit(); closeMoreDropdown();"
class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
Edit Series
</button>
<button @click="lecture.data.deleteLectureSeries(); closeMoreDropdown();"
<button @click="lecture.deleteLectureSeries(); closeMoreDropdown();"
class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
Delete Series
</button>
Expand All @@ -218,7 +218,7 @@
</div>

<button x-show="lecture.data.uiEditMode == 0"
@click="lecture.data.startSingleEdit(); closeMoreDropdown();"
@click="lecture.startSingleEdit(); closeMoreDropdown();"
class="bg-gray-100 dark:bg-gray-900 w-full py-2 mt-2 rounded-b">
<span class="text-gray-700 dark:text-gray-300">Edit Lecture</span>
</button>
Expand All @@ -245,10 +245,10 @@
<span class="text-green-400" x-text="lecture.data.newCombinedVideo.name"></span>
</template>
</div>
<div x-on:click="() => { $event.stopPropagation(); lecture.data.newCombinedVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
<div x-on:click="() => { $event.stopPropagation(); lecture.data.newCombinedVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
<i class="fa fa-xmark text-3"></i>
</div>
<input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCombinedVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
<input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCombinedVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
<div x-show="lecture.data.isSaving && lecture.data.newCombinedVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
<span x-text="`${progress.COMB}%`"></span>
</div>
Expand All @@ -267,10 +267,10 @@
<span class="text-green-400" x-text="lecture.data.newPresentationVideo.name"></span>
</template>
</div>
<div x-on:click="() => { $event.stopPropagation(); lecture.data.newPresentationVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
<div x-on:click="() => { $event.stopPropagation(); lecture.data.newPresentationVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
<i class="fa fa-xmark text-3"></i>
</div>
<input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newPresentationVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
<input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newPresentationVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
<div x-show="lecture.data.isSaving && lecture.data.newPresentationVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
<span x-text="`${progress.PRES}%`"></span>
</div>
Expand All @@ -290,10 +290,10 @@
<span class="text-green-400" x-text="lecture.data.newCameraVideo.name"></span>
</template>
</div>
<div x-on:click="() => { $event.stopPropagation(); lecture.data.newCameraVideo = null; lecture.data.updateIsDirty(); }" x-show="lecture.data.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
<div x-on:click="() => { $event.stopPropagation(); lecture.data.newCameraVideo = null; lecture.updateIsDirty(); }" x-show="lecture.data.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
<i class="fa fa-xmark text-3"></i>
</div>
<input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCameraVideo = $event.target.files[0]; lecture.data.updateIsDirty(); }" />
<input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.data.newCameraVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
<div x-show="lecture.data.isSaving && lecture.data.newCameraVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
<span x-text="`${progress.CAM}%`"></span>
</div>
Expand All @@ -308,7 +308,7 @@
<input :id="id"
class="grow tl-input" type="text"
x-model="lecture.data.newName"
x-on:keyup="lecture.data.updateIsDirty()"
x-on:keyup="lecture.updateIsDirty()"
placeholder="Lecture 2: Dark-Patterns I"
autocomplete="off">
</article>
Expand All @@ -317,13 +317,13 @@
class="w-full">
<label :for="id" class="hidden">Lecture description</label>
<textarea :id="id"
@drop.prevent="(e) => lecture.data.onFileDrop(e)"
@drop.prevent="(e) => lecture.onFileDrop(e)"
@dragover.prevent=""
class="tl-textarea grow"
placeholder="Add a nice description, links, and more. You can use Markdown. Drop files here."
autocomplete="off"
x-model="lecture.data.newDescription"
x-on:keyup="lecture.data.updateIsDirty()"></textarea>
x-on:keyup="lecture.updateIsDirty()"></textarea>
</article>
<article class="flex justify-center">
<span class="text-xs text-3 my-auto">Attach files or URL to files by Drag & Drop in the description field.</span>
Expand Down Expand Up @@ -358,7 +358,7 @@
<span>Select Lecture Hall</span>
<select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
:id="id"
x-on:change="lecture.data.updateIsDirty()"
x-on:change="lecture.updateIsDirty()"
x-model="lecture.data.newLectureHallId">
<option class="text-gray-700 dark:text-gray-300" value="0">
Self streaming
Expand Down Expand Up @@ -386,7 +386,7 @@
</div>
</article>

<template x-if="lecture.data.hasAttachments()">
<template x-if="lecture.data.hasAttachments">
<article>
<h6 class="text-sm text-5 font-light border-b dark:border-gray-600">Attachments</h6>
<ul class="list-disc grid py-2 ml-6">
Expand All @@ -397,7 +397,7 @@
<span class="text-xs font-semibold text-3 my-auto"
x-text="file.friendlyName"></span>
<button class="px-3"
@click="lecture.data.deleteFile(file.id)">
@click="lecture.deleteFile(file.id)">
<i class="fa fa-xmark"></i>
</button>
</section>
Expand Down Expand Up @@ -427,7 +427,7 @@
<div class="mt-6 flex items-center justify-between">
<section class="flex items-center py-1 px-3">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" @change="lecture.data.updateIsDirty()"
<input type="checkbox" value="" class="sr-only peer" @change="lecture.updateIsDirty()"
x-model="lecture.data.newIsChatEnabled">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-600
dark:peer-focus:ring-indigo-600 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full
Expand All @@ -438,12 +438,12 @@
</label>
</section>
<div>
<button :disabled="lecture.data.isSaving" @click="lecture.data.discardEdit();"
<button :disabled="lecture.data.isSaving" @click="lecture.discardEdit();"
class="px-8 py-3 text-2 text-white rounded bg-indigo-500/70 hover:bg-indigo-500/90 dark:bg-indigo-500/10 disabled:opacity-20 dark:hover:bg-indigo-500/20 mr-4">
Discard Changes
</button>
<button
@click="lecture.data.saveEdit();"
@click="lecture.saveEdit();"
:disabled="!lecture.data.isDirty || lecture.data.isSaving"
class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
x-text="lecture.data.isSaving ? 'loading ...' : (lecture.data.uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
Expand Down
1 change: 1 addition & 0 deletions web/ts/api/admin-lecture-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export interface Lecture {
transcodingProgresses: any[];

// Clientside computed fields
hasAttachments: boolean;
startDate: Date;
startDateFormatted: string;
startTimeFormatted: string;
Expand Down
4 changes: 3 additions & 1 deletion web/ts/data-store/admin-lecture-list.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { StreamableMapProvider } from "./provider";
import {AdminLectureList, Lecture, UpdateLectureMetaRequest} from "../api/admin-lecture-list";
import {Time} from "../utilities/time";
import {FileType} from "../edit-course";

const dateFormatOptions: Intl.DateTimeFormatOptions = {
weekday: "long",
Expand All @@ -17,6 +17,8 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
protected async fetcher(courseId: number): Promise<Lecture[]> {
const result = await AdminLectureList.get(courseId);
return result.map((s) => {
s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);

s.startDate = new Date(s.start);
s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
Expand Down

0 comments on commit 797d00d

Please sign in to comment.