inviton-powerduck 0.0.136 → 0.0.138

package/components/input/translate.tsx

@@ -0,0 +1,100 @@
+import type { Language } from '../../common/enums/language';
+import type { ILocalizedText } from '../../common/localized-text';
+import type LocalizedText from '../../common/localized-text';
+import { Prop } from 'vue-facing-decorator';
+import PowerduckState from '../../app/powerduck-state';
+import { TsxComponentExtendedBase } from '../../app/vuestsx-extended';
+import { Component } from '../../app/vuetsx';
+import { LanguageUtils } from '../../common/utils/language-utils';
+import TextButton from '../button/text-button';
+
+interface TranslateArgs {
+	value: ILocalizedText | LocalizedText;
+	currentLangId: Language;
+	langArr: LanguageUtils.LanguageListItem[];
+	changeValue: (langId: Language, value: string) => void;
+	getActualValue: (langId: Language, value: ILocalizedText | LocalizedText) => string;
+	apiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
+}
+
+export class TranslateGetRequest {
+	fromLang: string;
+	toLang: string[];
+	text: string;
+}
+
+export class TranslateGetResponse {
+	result: LocalizedText;
+}
+
+@Component
+export default class Translate extends TsxComponentExtendedBase<TranslateArgs> implements TranslateArgs {
+	@Prop() value: ILocalizedText | LocalizedText;
+	@Prop() currentLangId: Language;
+	@Prop() langArr: LanguageUtils.LanguageListItem[];
+	@Prop() apiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
+	@Prop() changeValue: (langId: Language, value: string) => void;
+	@Prop() getActualValue: (langId: Language, value: ILocalizedText | LocalizedText) => string;
+	translateLoading = false;
+
+	async translateValue(
+		value: string,
+		fromLang: Language,
+		langArr: LanguageUtils.LanguageListItem[],
+	) {
+		console.log('value', value);
+		this.translateLoading = true;
+		const toLang = langArr.filter(x => !this.getActualValue(x.id, this.value))?.map(x => x.id);
+		console.log('toland', toLang, langArr);
+		if (toLang.length === 0) {
+			this.translateLoading = false;
+			return;
+		}
+
+		const resp = await this.tryGetDataByArgs<TranslateGetResponse, TranslateGetRequest>({
+			blockRoot: false,
+			apiMethod: this.apiMethod,
+			requestArgs: {
+				fromLang,
+				toLang,
+				text: value,
+			},
+		});
+
+		if (resp?.result != null) {
+			for (const key in resp.result) {
+				const langCode = LanguageUtils.getLanguageEnum(key);
+				this.changeValue(langCode, resp.result[key]);
+			}
+		} else {
+			console.error('Error while getting translation');
+		}
+
+		this.translateLoading = false;
+	}
+
+	render(h) {
+		return this.translateLoading
+			? (
+					<div class="d-flex flex-row gap-1 align-items-center">
+						<div class="spinner-border spinner-border-sm" role="status">
+							<span class="sr-only">Loading...</span>
+						</div>
+						<span>Translating...</span>
+					</div>
+				)
+			: (
+					<TextButton
+						icon="icon icon-translate"
+						text={PowerduckState.getResourceValue('translateFromThisLanguage')}
+						clicked={() => {
+							this.translateValue(
+								this.getActualValue(this.currentLangId, this.value),
+								this.currentLangId,
+								this.langArr,
+							);
+						}}
+					/>
+				);
+	}
+}

package/components/modal/modal.tsx

@@ -314,5 +314,5 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 }
 
 const Modal = toNative(ModalComponent);
-export const ModalType = typeof Modal.prototype;
+export type ModalType = typeof Modal.prototype;
 export default Modal;

package/components/photos/photo-manager.tsx

@@ -56,13 +56,11 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 			return [];
 		}
 
-		return this.photos.map((p, i) => {
-			return {
-				Id: p.id as any,
-				ImageUrl: p.fullPath, // this.getFullPath(p),
-				SortOrder: p.sortOrder,
-			};
-		});
+		return this.photos.map((p, i) => ({
+			Id: p.id as any,
+			ImageUrl: p.fullPath, // this.getFullPath(p),
+			SortOrder: p.sortOrder,
+		}));
 	}
 
 	getFullPath(img: Photo) {
@@ -71,7 +69,7 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 
 	parseServerResponse(resp): DropzoneGalleryItem {
 		if (resp.fileData == null) {
-			throw 'break';
+			throw new Error('break');
 		}
 
 		const retVal: PhotoManagerUberModel = resp.fileData;
@@ -90,7 +88,7 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 
 	render(h) {
 		if (this.photos == null) {
-			throw 'Photo collection cannot be null, always has to be at least empty array';
+			throw new Error('Photo collection cannot be null, always has to be at least empty array');
 		}
 
 		this.photos.forEach((p, i) => {
@@ -132,8 +130,6 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 					changed={(items) => {
 						const itemsClone = [...(items || [])];
 
-						console.log(items);
-
 						this.photos.splice(0, this.photos.length);
 						for (const p of itemsClone) {
 							this.photos.push({

package/components/share/share-modal.tsx

@@ -30,7 +30,7 @@ class ShareModalComponent extends TsxComponent<ShareComponentBindingArgs> implem
 					// on success
 				})
 				.catch((error) => {
-					console.log('Error sharing:', error);
+					console.error('Error sharing:', error);
 				});
 
 			return;

package/components/share/share.tsx

@@ -23,7 +23,7 @@ export class ShareHelper {
 				// on success
 			})
 			.catch((error) => {
-				console.log('Error sharing:', error);
+				console.error('Error sharing:', error);
 			});
 	}
 }

package/components/svg/skilift-svg.tsx

@@ -1,6 +1,6 @@
-export const SKILIFT_SVG: string = `
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
-  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
-    <path d="M3911 4254 l-1153 -354 -40 34 c-77 66 -211 76 -290 20 -57 -40 -107 -107 -114 -153 l-6 -38 -1127 -345 -1126 -345 -3 -103 c-2 -94 -1 -102 15 -98 10 3 529 161 1154 353 l1135 347 43 -28 42 -29 -5 -55 c-2 -30 -21 -279 -42 -552 l-38 -498 -360 0 c-200 0 -390 -5 -426 -11 -173 -27 -319 -153 -371 -320 -18 -56 -19 -99 -19 -594 0 -495 1 -538 19 -594 50 -161 183 -281 350 -317 98 -20 1924 -20 2022 0 167 36 300 156 350 317 18 56 19 99 19 588 0 444 -2 536 -16 586 -44 170 -197 307 -374 335 -36 5 -227 10 -426 10 l-360 0 -38 498 c-21 273 -40 522 -43 552 -5 53 -4 56 25 73 40 23 72 69 93 131 l17 49 153 48 c85 26 309 95 499 153 852 260 1595 488 1598 490 1 2 1 48 0 103 l-3 100 -1154 -353z m-1913 -2666 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z"/>
-  </g>
-</svg>`;
+export const SKILIFT_SVG: string = `
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
+    <path d="M3911 4254 l-1153 -354 -40 34 c-77 66 -211 76 -290 20 -57 -40 -107 -107 -114 -153 l-6 -38 -1127 -345 -1126 -345 -3 -103 c-2 -94 -1 -102 15 -98 10 3 529 161 1154 353 l1135 347 43 -28 42 -29 -5 -55 c-2 -30 -21 -279 -42 -552 l-38 -498 -360 0 c-200 0 -390 -5 -426 -11 -173 -27 -319 -153 -371 -320 -18 -56 -19 -99 -19 -594 0 -495 1 -538 19 -594 50 -161 183 -281 350 -317 98 -20 1924 -20 2022 0 167 36 300 156 350 317 18 56 19 99 19 588 0 444 -2 536 -16 586 -44 170 -197 307 -374 335 -36 5 -227 10 -426 10 l-360 0 -38 498 c-21 273 -40 522 -43 552 -5 53 -4 56 25 73 40 23 72 69 93 131 l17 49 153 48 c85 26 309 95 499 153 852 260 1595 488 1598 490 1 2 1 48 0 103 l-3 100 -1154 -353z m-1913 -2666 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z"/>
+  </g>
+</svg>`;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.136",
+	"version": "0.0.138",
 	"files": [
 		"app/",
 		"common/",
@@ -49,6 +49,7 @@
 		"jquery-minicolors": "2.1.10",
 		"jquery-resizable": "1.0.6",
 		"jspreadsheet-ce": "^4.15.0",
+		"jsuites": "5.11.0",
 		"leaflet": "^1.9.4",
 		"leaflet.markercluster": "^1.5.3",
 		"mark.js": "8.11.1",