ColorRecipesExplorer
/
Frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 1 Wiki Activity

#13 Use new API for app's logo and icon

This commit is contained in:
William Nolin 2021-09-07 15:53:32 -04:00
parent d64aaf8201
commit ae5dac1040
9 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app.component.ts
View File

@ -5,7 +5,6 @@ import {SubscribingComponent} from './modules/shared/components/subscribing.comp
import {ActivatedRoute, Router} from '@angular/router'
import {ErrorService} from './modules/shared/service/error.service'
import {ConfigService} from './modules/shared/service/config.service'
import {Config} from './modules/shared/model/config.model'
import {environment} from '../environments/environment'
@Component({
@ -38,7 +37,7 @@ export class AppComponent extends SubscribingComponent {
online => this.isServerOnline = online
)
this.favIcon.href = environment.apiUrl + "/file?path=images%2Ficon"
this.favIcon.href = environment.apiUrl + "/config/icon"
}
reload() {

32
src/app/modules/configuration/config-editor.html
View File

@ -11,23 +11,23 @@
<div class="d-flex flex-column" style="gap: 1.5rem">
<cre-config-section *ngIf="!emergencyMode" label="Apparence">
<cre-config-list>
<!-- <cre-image-config-->
<!-- label="Logo"-->
<!-- tooltip="Affiché dans la bannière de l'application web. Il peut être nécessaire de forcer le-->
<!-- rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches-->
<!-- 'Ctrl+F5')."-->
<!-- [configControl]="getConfigControl(keys.INSTANCE_LOGO_PATH)" previewWidth="170px"-->
<!-- (invalidFormat)="invalidFormatConfirmBox.show()">-->
<!-- </cre-image-config>-->
<cre-image-config
label="Logo"
tooltip="Affiché dans la bannière de l'application web. Il peut être nécessaire de forcer le
rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches
'Ctrl+F5')."
[configControl]="getConfigControl(keys.INSTANCE_LOGO_SET)" previewWidth="170px"
(invalidFormat)="invalidFormatConfirmBox.show()">
</cre-image-config>
<!-- <cre-image-config-->
<!-- label="Icône"-->
<!-- tooltip="Affiché dans l'onglet de la page dans le navigateur. Il peut être nécessaire de forcer le-->
<!-- rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches-->
<!-- 'Ctrl+F5')."-->
<!-- [configControl]="getConfigControl(keys.INSTANCE_ICON_PATH)" previewWidth="32px"-->
<!-- (invalidFormat)="invalidFormatConfirmBox.show()">-->
<!-- </cre-image-config>-->
<cre-image-config
label="Icône"
tooltip="Affiché dans l'onglet de la page dans le navigateur. Il peut être nécessaire de forcer le
rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches
'Ctrl+F5')."
[configControl]="getConfigControl(keys.INSTANCE_ICON_SET)" previewWidth="32px"
(invalidFormat)="invalidFormatConfirmBox.show()">
</cre-image-config>
</cre-config-list>
</cre-config-section>

4
src/app/modules/configuration/config-editor.ts
View File

@ -16,8 +16,8 @@ export class CreConfigEditor extends ErrorHandlingComponent {
keys = {
INSTANCE_NAME: Config.INSTANCE_NAME,
INSTANCE_LOGO_PATH: Config.INSTANCE_LOGO_PATH,
INSTANCE_ICON_PATH: Config.INSTANCE_ICON_PATH,
INSTANCE_LOGO_SET: Config.INSTANCE_LOGO_SET,
INSTANCE_ICON_SET: Config.INSTANCE_ICON_SET,
INSTANCE_URL: Config.INSTANCE_URL,
DATABASE_URL: Config.DATABASE_URL,
DATABASE_USER: Config.DATABASE_USER,

2
src/app/modules/configuration/config-image.html
View File

@ -18,7 +18,7 @@
<div class="image-wrapper d-flex flex-column justify-content-end">
<div>
<img
[src]="updatedImage ? updatedImage : configuredImageUrl"
[src]="updatedImage ? updatedImage : imageUrl"
[attr.width]="previewWidth ? previewWidth : null"
class="mat-elevation-z3"/>
</div>

20
src/app/modules/configuration/config.ts
View File

@ -1,10 +1,20 @@
import {AfterViewInit, Component, ContentChild, Directive, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core'
import {
AfterViewInit,
Component,
ContentChild,
Directive,
EventEmitter,
Input,
Output,
ViewChild,
ViewEncapsulation
} from '@angular/core'
import {ConfigService} from '../shared/service/config.service'
import {Config, ConfigControl} from '../shared/model/config.model'
import {SubscribingComponent} from '../shared/components/subscribing.component'
import {ErrorService} from '../shared/service/error.service'
import {ActivatedRoute, Router} from '@angular/router'
import {formatDate, formatDateTime, getFileUrl, readFile} from '../shared/utils/utils'
import {formatDate, formatDateTime, getConfiguredImageUrl, getFileUrl, readFile} from '../shared/utils/utils'
import {AbstractControl} from '@angular/forms'
import {CrePromptDialog} from '../shared/components/dialogs/dialogs'
@ -121,9 +131,9 @@ export class CreImageConfig extends _CreConfigBase {
readFile(file, (content) => this.updatedImage = content)
}
get configuredImageUrl(): string {
return getFileUrl(this.config.content)
get imageUrl(): string {
const path = this.config.key == Config.INSTANCE_ICON_SET ? 'icon' : 'logo'
return getConfiguredImageUrl(path)
}
}

2
src/app/modules/shared/components/header/header.component.ts
View File

@ -66,7 +66,7 @@ export class HeaderComponent extends SubscribingComponent {
}
get logoUrl(): string {
return environment.apiUrl + "/file?path=images%2Flogo&mediaType=image/png"
return environment.apiUrl + "/config/logo"
}
set activeLink(link: string) {

8
src/app/modules/shared/model/config.model.ts
View File

@ -3,8 +3,8 @@ import {filterMap} from '../utils/map.utils'
export class Config {
static readonly INSTANCE_NAME = 'instance.name'
static readonly INSTANCE_LOGO_PATH = 'instance.logo.path'
static readonly INSTANCE_ICON_PATH = 'instance.icon.path'
static readonly INSTANCE_LOGO_SET = 'instance.logo.set'
static readonly INSTANCE_ICON_SET = 'instance.icon.set'
static readonly INSTANCE_URL = 'instance.url'
static readonly DATABASE_URL = 'database.url'
static readonly DATABASE_USER = 'database.user'
@ -20,8 +20,8 @@ export class Config {
static readonly OPERATING_SYSTEM = 'env.os'
static readonly IMAGE_CONFIG_KEYS = [
Config.INSTANCE_LOGO_PATH,
Config.INSTANCE_ICON_PATH
Config.INSTANCE_LOGO_SET,
Config.INSTANCE_ICON_SET
]
static readonly PASSWORD_CONFIG_KEYS = [

9
src/app/modules/shared/service/config.service.ts
View File

@ -39,11 +39,12 @@ export class ConfigService {
}
setImage(key: string, image: File): Observable<void> {
const body = new FormData()
body.append('key', key)
body.append('image', image)
const path = key == Config.INSTANCE_ICON_SET ? 'icon' : 'logo';
return this.api.put<void>('/config/image', body)
const body = new FormData()
body.append(path, image)
return this.api.put<void>(`/config/${path}`, body)
}
restart(): Observable<void> {

4
src/app/modules/shared/utils/utils.ts
View File

@ -60,3 +60,7 @@ export function readFile(file: File, consumer: (any) => void) {
export function getFileUrl(path: string) {
return `${environment.apiUrl}/file?path=${encodeURIComponent(path)}`
}
export function getConfiguredImageUrl(path: string) {
return `${environment.apiUrl}/config/${path}`
}