FarmMaps/FarmMapsLib
14
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Angular v20

Browse Source
This commit is contained in:
Peter (extern)
2026-01-20 17:11:03 +01:00
parent 4bef16aa2b
commit 429ab24408
47 changed files with 6654 additions and 2864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
projects/common/src/fm/components/app/app.component.html
View File

@@ -1,47 +1,51 @@
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async),'pagemode':(isPageMode|async),'appmode':!(isPageMode|async)}">
<nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
<div class="container-fluid p-3 justify-content-start">
<div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div>
<button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
<router-outlet name="menu" class="ms-4"></router-outlet>
<div class="collapse navbar-collapse pageonly">
<a class="btn btn-primary ms-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
<span *ngIf="(user|async)==null" i18n>Sign in</span>
<span *ngIf="(user|async)!=null" i18n>To app</span>
</a>
</div>
</div>
</nav>
<div class="body">
<router-outlet></router-outlet>
</div>
<fm-menu-background [visible]="menuVisible|async"></fm-menu-background>
<fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
<div class="container-fluid">
<div class="body">
<div class="d-flex flex-row">
<div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome($event)"><router-outlet name="side-panel-logo"></router-outlet></div>
<div class="mt-2 mb-2 ms-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
</div>
<div class="d-flex flex-column cards">
<router-outlet name="side-panel-menu"></router-outlet>
</div>
</div>
</div>
</fm-side-panel>
<ng-container *ngIf="showUploadProgress">
<fm-resumable-file-upload></fm-resumable-file-upload>
</ng-container>
<div class="user-menu apponly">
<fm-setting-menu [user]="user|async" [showMenu]="settingMenuVisible|async" [backgroundColor]="settingMenuBackgroundColor|async"></fm-setting-menu>
<fm-help-menu [user]="user|async" [showMenu]="helpMenuVisible|async"></fm-help-menu>
<fm-notification-menu [user]="user|async" [unread]="unreadNotifications|async" [showMenu]="notificationMenuVisible|async"></fm-notification-menu>
<fm-app-menu [user]="user|async" [showMenu]="appMenuVisible|async"></fm-app-menu>
<fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
</div>
<div class="healthstatus-container online apponly" [ngClass]="{'online' :(isOnline|async)}">
<div class="healthstatus alert alert-danger m-0" >
<span i18n>Not connected, make sure your device has an active internet connection</span>
</div>
</div>
</div>
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async),'pagemode':(isPageMode|async),'appmode':!(isPageMode|async)}">
<nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
<div class="container-fluid p-3 justify-content-start">
<div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div>
<button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
<router-outlet name="menu" class="ms-4"></router-outlet>
<div class="collapse navbar-collapse pageonly">
<a class="btn btn-primary ms-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
@if ((user|async)==null) {
<span i18n>Sign in</span>
}
@if ((user|async)!=null) {
<span i18n>To app</span>
}
</a>
</div>
</div>
</nav>
<div class="body">
<router-outlet></router-outlet>
</div>
<fm-menu-background [visible]="menuVisible|async"></fm-menu-background>
<fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
<div class="container-fluid">
<div class="body">
<div class="d-flex flex-row">
<div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome($event)"><router-outlet name="side-panel-logo"></router-outlet></div>
<div class="mt-2 mb-2 ms-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
</div>
<div class="d-flex flex-column cards">
<router-outlet name="side-panel-menu"></router-outlet>
</div>
</div>
</div>
</fm-side-panel>
@if (showUploadProgress) {
<fm-resumable-file-upload></fm-resumable-file-upload>
}
<div class="user-menu apponly">
<fm-setting-menu [user]="user|async" [showMenu]="settingMenuVisible|async" [backgroundColor]="settingMenuBackgroundColor|async"></fm-setting-menu>
<fm-help-menu [user]="user|async" [showMenu]="helpMenuVisible|async"></fm-help-menu>
<fm-notification-menu [user]="user|async" [unread]="unreadNotifications|async" [showMenu]="notificationMenuVisible|async"></fm-notification-menu>
<fm-app-menu [user]="user|async" [showMenu]="appMenuVisible|async"></fm-app-menu>
<fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
</div>
<div class="healthstatus-container online apponly" [ngClass]="{'online' :(isOnline|async)}">
<div class="healthstatus alert alert-danger m-0" >
<span i18n>Not connected, make sure your device has an active internet connection</span>
</div>
</div>
</div>

4
projects/common/src/fm/components/app/app.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit, OnDestroy, Inject, Optional, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener, Input } from '@angular/core';
import { Component, OnInit, OnDestroy, Inject, Optional, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener, Input, DOCUMENT } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
import { Meta, Title, MetaDefinition } from '@angular/platform-browser'; import { DOCUMENT } from "@angular/common";
import { Meta, Title, MetaDefinition } from '@angular/platform-browser';
import { Subscription, Observable } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { Store, Action } from '@ngrx/store';

7
projects/common/src/fm/components/back-button/back-button.component.html
View File

@@ -1,4 +1,5 @@
<div *ngIf="show()" class="back-button mb-2">
@if (show()) {
<div class="back-button mb-2">
<i class="fal fa-arrow-left"></i>&nbsp;<span i18n="@FmBackButton">Back</span>
</div>
</div>
}

48
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html
View File

@@ -5,32 +5,34 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="cropper">
<div *ngIf="!isImageLoaded" class="no-image" (click)="fileInput.click()">
<i class="fal fa-image"></i>
<div i18n>No image selected</div>
</div>
<image-cropper #imageCropper output="base64"
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[format]="imageType"
[aspectRatio]="aspectRatio"
[autoCrop]="true"
[resizeToWidth]="maxWidth"
[roundCropper]="roundImage"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded($event)"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
[imageURL]="imageUrl"
></image-cropper>
@if (!isImageLoaded) {
<div class="no-image" (click)="fileInput.click()">
<i class="fal fa-image"></i>
<div i18n>No image selected</div>
</div>
}
<image-cropper #imageCropper output="base64"
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[format]="imageType"
[aspectRatio]="aspectRatio"
[autoCrop]="true"
[resizeToWidth]="maxWidth"
[roundCropper]="roundImage"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded($event)"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
[imageURL]="imageUrl"
></image-cropper>
</div>
<input #fileInput type="file" (change)="fileChangeEvent($event)" style="display:none" accept="image/*"/>
<span class="btn btn-primary" (click)="fileInput.click()" i18n>Select image</span>
<input #fileInput type="file" (change)="fileChangeEvent($event)" style="display:none" accept="image/*"/>
<span class="btn btn-primary" (click)="fileInput.click()" i18n>Select image</span>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" i18n [disabled]="!isImageLoaded" (click)="save()">Apply</button>
<button type="submit" class="btn btn-primary" i18n [disabled]="!isImageLoaded" (click)="save()">Apply</button>
<button type="button" autofocus class="btn btn-secondary" (click)="modal.close('Save click')" i18n="@@buttonCancel">Cancel</button>
</div>
</div>
</ng-template>

34
projects/common/src/fm/components/gradient-select/gradient-select.component.html
View File

@@ -1,16 +1,28 @@
<div *ngIf="gradientItems" class="form-control gradient-select" (click)="handleToggleList()">
<div *ngIf="selectedItem">
<div *ngIf="showLabel">{{selectedItem?.name}}</div>
<fm-gradient [gradientItem]="selectedItem"></fm-gradient>
</div>
@if (gradientItems) {
<div class="form-control gradient-select" (click)="handleToggleList()">
@if (selectedItem) {
<div>
@if (showLabel) {
<div>{{selectedItem?.name}}</div>
}
<fm-gradient [gradientItem]="selectedItem"></fm-gradient>
</div>
}
<div class="gradient-list" [ngClass]="{'visible':listVisible}">
<ul *ngIf="gradientItems">
<li *ngFor="let item of gradientItems" (click)="handleSelect(item)" [ngClass]="{'bg-primary':isSelected(item),'text-white':isSelected(item)} ">
<div>{{item?.name}}</div>
<div><fm-gradient [gradientItem]="item"></fm-gradient></div>
@if (gradientItems) {
<ul>
@for (item of gradientItems; track item) {
<li (click)="handleSelect(item)" [ngClass]="{'bg-primary':isSelected(item),'text-white':isSelected(item)} ">
<div>{{item?.name}}</div>
<div><fm-gradient [gradientItem]="item"></fm-gradient></div>
</li>
}
</ul>
<div *ngIf="showAdd" class="addGradient"><a href="#" i18n (click)="handleAdd($event)" >Add gradient</a></div>
}
@if (showAdd) {
<div class="addGradient"><a href="#" i18n (click)="handleAdd($event)" >Add gradient</a></div>
}
</div>
</div>
</div>
}

2
projects/common/src/fm/components/item-link/item-link.component.html
View File

@@ -1 +1 @@
<span class="item-link" (click)="copylink(copiedtt)" triggers="manual" ngbTooltip="Link copied" #copiedtt="ngbTooltip" ><i ngbTooltip='Copy link' class="fa-solid fa-link"></i> <span *ngIf="showText" i18n>Copy link</span></span>
<span class="item-link" (click)="copylink(copiedtt)" triggers="manual" ngbTooltip="Link copied" #copiedtt="ngbTooltip" ><i ngbTooltip='Copy link' class="fa-solid fa-link"></i> @if (showText) {<span i18n>Copy link</span>}</span>

26
projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
View File

@@ -2,19 +2,29 @@
<div>
<div class="card">
<div class="card-header p-3 bg-primary text-white">
<span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
<span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
@if (uploadService.isUploading) {
<span>Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
}
@if (uploadService.isUploading == false) {
<span>Uploaded <span>{{uploadService.files.length}}</span> files</span>
}
<span title="Cancel" class="fal fa-times float-end" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-end me-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
</div>
<div [ngClass]="{'minimized': uploadService.isMinimized }">
<div class="card-block p-3">
<ul class="list-unstyled">
<li *ngFor="let file of uploadService.files" class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
<div *ngIf="file.success == false"><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fal fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fal fa-check"></span></div>
<div *ngIf="file.success"><a href="#" (click)="handleUploadedFileClick($event,file)" class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</a><span class="fal fa-check"></span></div>
<div class="progress-container"><div class="progress-bar" [style.width]="file.progress+'%'"></div></div>
<div class="errormessage">{{file.errorMessage}}</div>
</li>
@for (file of uploadService.files; track file) {
<li class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
@if (file.success == false) {
<div><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fal fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fal fa-check"></span></div>
}
@if (file.success) {
<div><a href="#" (click)="handleUploadedFileClick($event,file)" class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</a><span class="fal fa-check"></span></div>
}
<div class="progress-container"><div class="progress-bar" [style.width]="file.progress+'%'"></div></div>
<div class="errormessage">{{file.errorMessage}}</div>
</li>
}
</ul>
</div>
</div>

30
projects/common/src/fm/components/side-panel/side-panel.component.html
View File

@@ -1,14 +1,16 @@
<div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left,'extrawide':extrawide}" [ngStyle]="{'top':top}">
<div *ngIf="collapsable" class="arrow rounded-end p-2" (click)="handleToggleClick($event)">
<i class="fal fa-chevron-left" aria-hidden="true"></i>
</div>
<div draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
<div></div>
<span class="rounded"></span>
</div>
<div class="content">
<ng-content>
</ng-content>
</div>
</div>
<div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left,'extrawide':extrawide}" [ngStyle]="{'top':top}">
@if (collapsable) {
<div class="arrow rounded-end p-2" (click)="handleToggleClick($event)">
<i class="fal fa-chevron-left" aria-hidden="true"></i>
</div>
}
<div draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
<div></div>
<span class="rounded"></span>
</div>
<div class="content">
<ng-content>
</ng-content>
</div>
</div>

6
projects/common/src/fm/components/tag-input/tag-input.component.html
View File

@@ -1,6 +1,8 @@
<div class="tags">
<span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i
(click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input
@for (tag of tags; track tag) {
<span class="tag rounded bg-primary text-white"><span>{{tag}}</span> <i
(click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span>
}<input
type="text" #tagInputElement
(blur)="handleBlur($event, false)"
(keyup)="handleKeyUp($event)"

24
projects/common/src/fm/components/thumbnail/thumbnail.component.html
View File

@@ -1,9 +1,15 @@
<div #thumbnail class="thumbnail" [style.background-color]="itemTypeService.getColor(item.itemType)" >
<div class="content">
<img *ngIf="hasThumbnail()" class="card-img-top" [src]="getThumbnailUrl(item)" />
<div *ngIf="!hasThumbnail()" class="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
<div *ngIf="canEdit()" class="edit btn btn-secondary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
</div>
</div>
<fm-edit-image-modal #modal (changed)="onChanged($event)"></fm-edit-image-modal>
<div #thumbnail class="thumbnail" [style.background-color]="itemTypeService.getColor(item.itemType)" >
<div class="content">
@if (hasThumbnail()) {
<img class="card-img-top" [src]="getThumbnailUrl(item)" />
}
@if (!hasThumbnail()) {
<div class="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
}
@if (canEdit()) {
<div class="edit btn btn-secondary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
}
</div>
</div>
<fm-edit-image-modal #modal (changed)="onChanged($event)"></fm-edit-image-modal>

32
projects/common/src/fm/components/user-menu/user-menu.component.html
View File

@@ -1,17 +1,23 @@
<div>
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
<span *ngIf="user"><fm-avatar [user]="user" size="40"></fm-avatar></span>
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
<div class="card" *ngIf="user">
<div class="card-body">
<div class="username">{{user.name}}</div>
<div *ngIf="getProvider(); let provider">
<small><span i18n>Provider</span><span> {{provider}}</span></small>
</div>
<div><a href="#" (click)="logout($event)" i18n>logout</a></div>
</div>
</div>
<router-outlet name="user-menu"></router-outlet>
<div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
@if (user) {
<span><fm-avatar [user]="user" size="40"></fm-avatar></span>
}
<div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
@if (user) {
<div class="card">
<div class="card-body">
<div class="username">{{user.name}}</div>
@if (getProvider(); as provider) {
<div>
<small><span i18n>Provider</span><span> {{provider}}</span></small>
</div>
}
<div><a href="#" (click)="logout($event)" i18n>logout</a></div>
</div>
</div>
}
<router-outlet name="user-menu"></router-outlet>
</div>
</div>
</div>

4
projects/common/src/fm/shared/accesstoken.interceptor.ts
View File

@@ -1,5 +1,5 @@
import { Injectable, Injector, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common'
import { Injectable, Injector, Inject, DOCUMENT } from '@angular/core';
import { AppConfig } from "./app.config";
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { OAuthService } from 'angular-oauth2-oidc';

2
projects/common/tsconfig.lib.json
View File

@@ -3,7 +3,7 @@
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"module": "es2015",
"moduleResolution": "node",
"moduleResolution": "bundler",
"declaration": true,
"sourceMap": true,
"inlineSources": true,

6
projects/common/tsconfig.lib.prod.json
View File

@@ -3,7 +3,7 @@
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"module": "es2015",
"moduleResolution": "node",
"moduleResolution": "bundler",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
@@ -18,9 +18,7 @@
],
"paths": {
"@angular/*": [
"node_modules/@angular/*"
"node_modules/@angular/*"
]
}
},