From 3f3cf55fa23588f20e4038ece8126c0f5680d0d6 Mon Sep 17 00:00:00 2001 From: DavidMockler Date: Mon, 29 Jul 2024 17:20:12 +0100 Subject: [PATCH] Implemented basic thumbnail support for DR library Also increased the file transfer capacity of the nginx server to 15mb --- .../endpoint/drStory/verifiedCollection.ts | 6 +++-- api/src/models/drStory.ts | 3 +++ .../src/app/core/services/dr-story.service.ts | 25 +++++++++++++---- .../dr-story-creation-dialog.component.html | 13 +++++++-- .../dr-story-creation-dialog.component.scss | 18 +++++++++++-- .../dr-story-creation-dialog.component.ts | 27 +++++++++++++++++++ .../digital-reader.component.ts | 12 ++++++--- .../dr-story-drawer.component.html | 4 ++- .../dr-story-drawer.component.scss | 3 ++- ngapp/src/app/translation.ts | 6 +++++ 10 files changed, 100 insertions(+), 17 deletions(-) diff --git a/api/src/endpoint/drStory/verifiedCollection.ts b/api/src/endpoint/drStory/verifiedCollection.ts index 411338d55..140e9cc42 100644 --- a/api/src/endpoint/drStory/verifiedCollection.ts +++ b/api/src/endpoint/drStory/verifiedCollection.ts @@ -16,12 +16,14 @@ const handler = async (req, res) => { {$project: { title: 1, ownerDoc: {$first: '$ownerDocArr'}, - collections: 1 + collections: 1, + thumbnail: 1, }}, {$project: { title: 1, ownerRole: '$ownerDoc.role', - collections: 1 + collections: 1, + thumbnail: 1, }}, {$match: { ownerRole: "ADMIN" diff --git a/api/src/models/drStory.ts b/api/src/models/drStory.ts index bef6b05e0..8652f4efa 100644 --- a/api/src/models/drStory.ts +++ b/api/src/models/drStory.ts @@ -18,6 +18,9 @@ const DigitalReaderStory = new Schema( collections: { type: Array, // possibility for multiple dialects }, + thumbnail: { + type: String, + }, story : { content: { diff --git a/ngapp/src/app/core/services/dr-story.service.ts b/ngapp/src/app/core/services/dr-story.service.ts index 49784428e..2b3a2708e 100644 --- a/ngapp/src/app/core/services/dr-story.service.ts +++ b/ngapp/src/app/core/services/dr-story.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; //import { DigitalReaderStory } from 'app/core/models/dr-story'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { HttpHeaders } from '@angular/common/http'; import { Router } from '@angular/router'; import { AuthenticationService } from 'app/core/services/authentication.service'; @@ -9,7 +9,7 @@ import { EngagementService } from 'app/core/services/engagement.service'; import { EventType } from 'app/core/models/event'; import { TranslationService } from 'app/core/services/translation.service'; import config from 'abairconfig'; -import { firstValueFrom, tap } from 'rxjs'; +import { firstValueFrom, tap, catchError } from 'rxjs'; import { DigitalReaderStory } from 'app/core/models/drStory'; @@ -105,9 +105,18 @@ export class DigitalReaderStoryService { // convert the uploaded file to html const formData = new FormData(); formData.append('docx', req); + + //try { const convertedHtml = await firstValueFrom( this.http.post(this.baseUrl + 'digitalReader/docx2html', formData) - ); + ).catch((err: HttpErrorResponse) => { + alert(err.error) + alert(err) + //throw new Error() + return null; + }); + + if (!convertedHtml) return null // TODO : add html sanitisation !!******* // *CODE GOES HERE* @@ -141,12 +150,17 @@ export class DigitalReaderStoryService { console.log(constructJSON(parsedSegmentedDoc.body))*/ return parsedSegmentedDoc + + /*} catch (error) { + alert(error.message) + }*/ } - saveDRStory(title: string, /*dialects: Array*/collections: Array, story: Object, isPublic: Boolean) { + saveDRStory(title: string, /*dialects: Array*/collections: Array, thumbnail:string, story: Object, isPublic: Boolean) { const drStoryObj = { title: title, collections: collections, + thumbnail: thumbnail, //text: text, story: story, public: isPublic, @@ -154,7 +168,8 @@ export class DigitalReaderStoryService { //createdWithPrompts: createdWithPrompts, //activeRecording: null }; - console.log(drStoryObj); + console.log('here!') + console.log(drStoryObj.thumbnail); this.engagement.addEvent(EventType['CREATE-DR-STORY'], {storyObject: drStoryObj}); return this.http.post<{id: string}>(this.baseUrl + 'drStory/create', drStoryObj); } diff --git a/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.html b/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.html index 1b998209d..05b424de6 100644 --- a/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.html +++ b/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.html @@ -15,10 +15,19 @@

{{ data.title }}


-
{{ collection }}
 +
{{ collection }}

- {{ data.data[2][2] }}: + + {{ data.data[2][2] }}:
+
+ + + +
{{ this.thumbnail.name }}
+

+ {{ data.data[2][3] }}: diff --git a/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.scss b/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.scss index f0cf2b5a1..490055881 100644 --- a/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.scss +++ b/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.scss @@ -65,11 +65,25 @@ h2 { padding-right: 10px; }*/ -.viewStoryBtn { +.selectionBtn { padding: 7px; background-color: var(--scealai-green); color: white; border-radius: 4px; text-decoration:none; - text-align: center; + text-align: center; +} + +input[type="file"] { + display: none; +} + +.selectionBtn:hover { + cursor: pointer; +} + +.singleLineText { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.ts b/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.ts index bc4776b98..0121aee7e 100644 --- a/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.ts +++ b/ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.ts @@ -33,6 +33,7 @@ export class DigitalReaderStoryCreationDialogComponent { public dialectMapping: Object; public collectionOptions: Array; public inputs: Object; + public thumbnail: File | null = null; //pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf"; copyIconClicked: boolean = false; @@ -59,8 +60,34 @@ export class DigitalReaderStoryCreationDialogComponent { donegal: false },*/ collections: this.data.collections, + thumbnail: '', public: false } } + + processThumbnail(files: FileList) { + if (files.length>0) { + const tmp = files[0] + console.log(tmp) + if (tmp.type.startsWith("image/")) { + + this.thumbnail = tmp; + + console.log(this.thumbnail); + + const reader = new FileReader(); + reader.onload = (e) => { + //img.src = e.target.result; + //console.log(e.target?.result) + this.inputs['thumbnail'] = e.target?.result + }; + reader.readAsDataURL(tmp); + } else { + alert(this.ts.l.must_be_image) + } + } else { + this.thumbnail = null; + } + } } diff --git a/ngapp/src/app/nav-bar/digital-reader/digital-reader.component.ts b/ngapp/src/app/nav-bar/digital-reader/digital-reader.component.ts index 2f5d1425e..33aee66d1 100644 --- a/ngapp/src/app/nav-bar/digital-reader/digital-reader.component.ts +++ b/ngapp/src/app/nav-bar/digital-reader/digital-reader.component.ts @@ -92,14 +92,14 @@ export class DigitalReaderComponent implements OnInit { async convertDocxToHTML() { - //only for testing if (this.docxFile) { this.convertedHTMLDoc = await this.drStoryService.processUploadedFile(this.docxFile) if (this.convertedHTMLDoc instanceof Document) { console.log('file converted successfully!') } else { - alert('could not convert docx file') + this.docxFile = null + this.storyState = '' } } @@ -118,7 +118,7 @@ export class DigitalReaderComponent implements OnInit { this.ts.l.enter_title, //this.dialectOptions, this.adminCollectionOptions, - [this.ts.l.title, this.ts.l.collections_default, this.ts.l.make_public], + [this.ts.l.title, this.ts.l.collections_default, this.ts.l.thumbnail, this.ts.l.make_public], ], collections: this.defaultCollectionSelections, userRole: this.user.role, @@ -129,6 +129,7 @@ export class DigitalReaderComponent implements OnInit { }); console.log(this.dialogRef) + console.log(this.user.role) this.dialogRef.afterClosed().subscribe(async (res: any) => { @@ -166,6 +167,9 @@ export class DigitalReaderComponent implements OnInit { if (Array.isArray(collections) && collections.length===0 && user && user.role=='ADMIN') collections = ['other_stories'] + let thumbnail = '' + if (res.thumbnail) thumbnail = res.thumbnail + //if (Array.isArray(dialects) && dialects.length!==0) { this.storyState = 'processing' @@ -189,7 +193,7 @@ export class DigitalReaderComponent implements OnInit { this.drStoryService //.saveDRStory(res.title, dialects, story, res.public) - .saveDRStory(res.title, collections, story, res.public) + .saveDRStory(res.title, collections, thumbnail, story, res.public) .subscribe({ next: () => { console.log('a response was received') diff --git a/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.html b/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.html index c104f08c2..03503f17c 100644 --- a/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.html +++ b/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.html @@ -41,7 +41,9 @@
- image + + + image
diff --git a/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.scss b/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.scss index b1a8180bd..00306a4a5 100644 --- a/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.scss +++ b/ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.scss @@ -97,7 +97,8 @@ .imgContainer { width: auto; - height: 200px; + //height: 200px; + height: 180px; } .storyImg { diff --git a/ngapp/src/app/translation.ts b/ngapp/src/app/translation.ts index 7f5723d98..0498d11c9 100644 --- a/ngapp/src/app/translation.ts +++ b/ngapp/src/app/translation.ts @@ -212,6 +212,12 @@ const translations = { collections_default: { ga: 'Cnuasaigh (is é "other_stories" an réamhshocrú)', en: 'Collections (default: "other_stories")' }, + thumbnail: { + ga: 'mioníomhá', + en: 'thumbnail' }, + must_be_image: { + ga: 'Caithfidh an comhad bheith ina íomhá (.png, .jpg, .jpeg)', + en: 'Uploaded file must be an image (.png, .jpg, .jpeg)'}, /*adminStoryCollectionOpts: { leaving_cert_stories: { ga: 'Prós Comónta Ainmnithe don Ardteistiméireacht',