LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Added translations

Browse Source
This commit is contained in:
Mawoka
2023-06-12 19:34:22 +02:00
parent e1f58e1728
commit 2357f634e6
7 changed files with 157 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/edit/files/+page.svelte
+55 -15
View File
@@ -10,6 +10,9 @@
// import MediaComponent from '$lib/editor/MediaComponent.svelte';
import BrownButton from '$lib/components/buttons/brown.svelte';
import { onMount } from 'svelte';
import Uploader from './uploader.svelte';
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
export let data: PageData;
let edit_popup = null;
@@ -38,9 +41,15 @@
edit_popup = null;
window.location.reload();
};
const delete_image = async (id: string) => {
await fetch(`/api/v1/storage/meta/${id}`, { method: 'DELETE' });
window.location.reload();
};
</script>
<div>
<Uploader />
<div class="grid grid-cols-1 lg:grid-cols-2 p-4 gap-4">
{#each images as image}
<div
@@ -51,19 +60,49 @@
src="/api/v1/storage/download/{image.id}"
class="m-auto h-auto w-auto max-h-[30vh]"
loading="lazy"
alt={image.alt_text || 'Not available'}
alt={image.alt_text || $t('file_dashboard.not_available')}
/>
<div class="flex flex-col my-auto ml-4">
<p>Size: {(image.size / (1024 * 1024)).toFixed(2)} Mib</p>
<p>Caption: {image.alt_text ?? 'MISSING!'}</p>
<p>Filename: {image.filename ?? 'Unset'}</p>
<p>Uploaded: {new Date(image.uploaded_at).toLocaleString()}</p>
<p>Imported: {image.imported ? 'Yes' : 'No'}</p>
<BrownButton
on:click={() => {
edit_popup = image;
}}>Edit Details</BrownButton
>
<p>
{$t('file_dashboard.size', {
size: (image.size / (1024 * 1024)).toFixed(2)
})}
</p>
<p>
{$t('file_dashboard.caption', {
caption: image.alt_text ?? $t('file_dashboard.missing')
})}
</p>
<p>
{$t('file_dashboard.filename', {
filename: image.filename ?? $t('file_dashboard.missing')
})}
</p>
<p>
{$t('file_dashboard.uploaded', {
date: new Date(image.uploaded_at).toLocaleString()
})}
</p>
<p>
{$t('file_dashboard.imported', {
yes_or_no: image.imported ? $t('words.yes') : $t('words.no')
})}
</p>
<div class="flex flex-col gap-2">
<BrownButton
on:click={() => {
edit_popup = image;
}}
>{$t('file_dashboard.edit_details')}
</BrownButton>
{#if image.quiztivities.length === 0 && image.quizzes.length === 0}
<BrownButton
on:click={() => {
delete_image(image.id);
}}>{$t('file_dashboard.delete_image')}</BrownButton
>
{/if}
</div>
</div>
</div>
{/each}
@@ -77,12 +116,13 @@
on:click={close_popup_handler}
>
<div class="w-auto h-auto m-auto rounded bg-white dark:bg-gray-700 p-4">
<h1 class="text-2xl text-center">Edit the image</h1>
<h1 class="text-2xl text-center">{$t('file_dashboard.edit_the_image')}</h1>
<form class="flex flex-col" on:submit|preventDefault={save_image_metadata}>
<div class="flex flex-row">
<div class="flex flex-col mr-4">
<label for="name" class="m-auto">Filename</label>
<label for="alt_text" class="m-auto">Alt Text</label>
<label for="name" class="m-auto">{$t('file_dashboard.filename_word')}</label
>
<label for="alt_text" class="m-auto">{$t('file_dashboard.alt_text')}</label>
</div>
<div class="flex flex-col gap-3">
<input
@@ -101,7 +141,7 @@
</div>
</div>
<div class="mt-4">
<BrownButton type="submit">Save</BrownButton>
<BrownButton type="submit">{$t('words.save')}</BrownButton>
</div>
</form>
</div>
frontend/src/routes/edit/files/uploader.svelte
+33
View File
@@ -0,0 +1,33 @@
<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
import Spinner from '$lib/Spinner.svelte';
let uppyOpen = false;
let edit_id = null;
let selected_question = undefined;
let data = { cover_image: undefined };
$: {
if (data.cover_image) {
window.location.reload();
}
}
</script>
{#await import('$lib/editor/uploader.svelte')}
<Spinner my_20={false} />
{:then c}
<svelte:component
this={c.default}
bind:modalOpen={uppyOpen}
bind:edit_id
bind:data
bind:selected_question
video_upload={true}
library_enabled={false}
/>
{/await}
frontend/src/routes/edit/videos/+page.svelte
+13 -9
View File
@@ -13,6 +13,8 @@
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
import BrownButton from '$lib/components/buttons/brown.svelte';
import { navbarVisible } from '$lib/stores';
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
let file_input: HTMLInputElement;
navbarVisible.set(false);
@@ -153,10 +155,10 @@
{#if status === Status.Compressing || status === Status.CompressDone}
<table>
<tr>
<th>Speed</th>
<th>Progress</th>
<th>Time elapsed</th>
<th>Time remaining</th>
<th>{$t('words.speed')}</th>
<th>{$t('words.progress')}</th>
<th>{$t('video_uploader.time_elapsed')}</th>
<th>{$t('video_uploader.time_remaining')}</th>
</tr>
<tr>
<td>{stats.speed}</td>
@@ -172,9 +174,9 @@
{:else if status === Status.Uploading}
<table>
<tr>
<th>Progress</th>
<th>Time elapsed</th>
<th>Time remaining</th>
<th>{$t('words.progress')}</th>
<th>{$t('video_uploader.time_elapsed')}</th>
<th>{$t('video_uploader.time_remaining')}</th>
</tr>
<tr>
<td>{Math.round(upload_stats.progress * 100)}%</td>
@@ -188,7 +190,8 @@
<div class="flex relative my-2">
<div class="w-full">
<BrownButton disabled={status !== Status.CompressDone} on:click={upload_video}>
Upload {file_size_in_mi ? `${file_size_in_mi.toFixed(2)}Mi` : ''}</BrownButton
{$t('words.upload')}
{file_size_in_mi ? `(${file_size_in_mi.toFixed(2)} Mi)` : ''}</BrownButton
>
</div>
<span
@@ -197,7 +200,8 @@
/>
</div>
<div class="flex justify-center">
<BrownButton on:click={compress_video} disabled={status !== Status.Idle}>Submit</BrownButton
<BrownButton on:click={compress_video} disabled={status !== Status.Idle}
>{$t('words.submit')}</BrownButton
>
</div>
</div>