aknuth/vokabeltraining
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

include fabric.js + Bugs

Browse Source
This commit is contained in:
Andreas Knuth
2024-11-17 16:49:46 +01:00
parent 21cde45999
commit 3be7a9cdec
8 changed files with 1540 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/upload-image-modal/upload-image-modal.component.html
View File

@@ -1,31 +1,39 @@
<!-- src/app/upload-image-modal.component.html -->
<div id="uploadImageModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
<div class="relative w-full h-full max-w-md md:h-auto">
<div class="relative bg-white rounded-lg shadow">
<button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" data-modal-hide="uploadImageModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Schließen</span>
</button>
<div class="p-6">
<h3 class="mb-4 text-xl font-medium text-gray-900">Bild zu Deck hinzufügen</h3>
<form (submit)="uploadImage($event)">
<div #uploadImageModal id="uploadImageModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
<div class="relative w-full h-full max-w-2xl md:h-auto">
<div class="relative bg-white rounded-lg shadow">
<button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" (click)="closeModal()">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Schließen</span>
</button>
<div class="p-6">
<h3 class="mb-4 text-xl font-medium text-gray-900">Bild zu Deck hinzufügen</h3>
<!-- Formular sichtbar, solange formVisible true ist -->
<div *ngIf="formVisible">
<div class="mb-4">
<label for="imageFile" class="block text-sm font-medium text-gray-700">Bild hochladen</label>
<input type="file" id="imageFile" (change)="onFileChange($event)" accept="image/*" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
</div>
<div class="mb-4">
<label for="imageText" class="block text-sm font-medium text-gray-700">Text zur Vokabel</label>
<input type="text" id="imageText" [(ngModel)]="imageText" name="imageText" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
</div>
<input type="hidden" [value]="deckName" />
<button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
Hochladen
</button>
</form>
</div>
<!-- Canvas sichtbar, sobald upload erfolgreich ist -->
<div *ngIf="canvasVisible">
<canvas #canvas class="border border-gray-300 rounded"></canvas>
</div>
<!-- Statusanzeige -->
<div *ngIf="processingStatus" class="mt-4">
<p class="text-sm text-gray-700">{{ processingStatus }}</p>
</div>
<!-- Ladeanzeige -->
<div *ngIf="loading" class="mt-4">
<p class="text-sm text-gray-700">Verarbeitung läuft...</p>
</div>
</div>
</div>
</div>
</div>