Manuel Tauber 2024-08-12 10:28:16 +02:00
commit 8283019dca
14 changed files with 168 additions and 96 deletions

View File

@ -1,5 +1,7 @@
<h2 style="font-family: Roboto;">Möchten Sie das Preset {{preset.name}} wirklich löschen?</h2>
<mat-dialog-actions align="end">
<button mat-raised-button style="margin-right: 3px;" matDialogClose>Abbrechen</button>
<button mat-raised-button color = "primary" style="margin-left: 3px;" (click)="deletePreset()" matDialogClose>Löschen</button>
</mat-dialog-actions>
<div style="padding: 20px;">
<h2 style="line-height: 1.2;">Möchten Sie das Preset <span style="color: #ef6c00;">{{preset.name}}</span> wirklich löschen?</h2>
<mat-dialog-actions align="end">
<button mat-flat-button style="letter-spacing: 0px;" matDialogClose>Abbrechen</button>
<button mat-flat-button style="letter-spacing: 0px; color: white;" color="primary" (click)="deletePreset()" matDialogClose>Löschen</button>
</mat-dialog-actions>
</div>

View File

@ -1,17 +1,15 @@
.container {
width: 100%;
display: flex;
/* display: flex;
flex-direction: row;
justify-content: center;
justify-content: center; */
}
.filterHeading {
font-family: Roboto;
}
.filterBox {
width: 90%;
align-self: center;
padding: 30px;
}
.buttonBox {
@ -23,10 +21,10 @@
.dot-badge {
background-color: #00a79d;
color: #00a79d;
width: 10px;
/* Breite des Punkts */
height: 10px;
/* Höhe des Punkts */
margin-left: 2px;
margin-bottom: 2px;
padding: 4px;
border-radius: 50%;
/* Rundung des Punkts */
}
}

View File

@ -108,13 +108,12 @@
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
<mat-panel-title>{{this.languageService.lMap.get('filterDilogIntervalTitle')}}<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
class="dot-badge"></mat-badge></mat-panel-title>
<mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
<mat-panel-description>{{this.languageService.lMap.get('filterDialogInterval')}}</mat-panel-description>
</mat-expansion-panel-header>
<mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete
mit Intervall > 1 Jahr!</mat-checkbox>
<mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">{{this.languageService.lMap.get('filterDialogIntervalCheck')}}</mat-checkbox>
</mat-expansion-panel>
</mat-accordion>
@ -174,10 +173,13 @@
<br><br> -->
<br>
<mat-dialog-actions align="end">
<button mat-raised-button style="margin-right: 3px;"
matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button>
<button mat-raised-button color="primary" style="margin-left: 3px;"
(click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
<button mat-raised-button matDialogClose>
<mat-icon>close</mat-icon> {{this.languageService.lMap.get('filterDialogCancel')}}
</button>
<button mat-raised-button color="primary" style="color: white;" (click)="mapFilter()">
<mat-icon>filter_list</mat-icon> {{this.languageService.lMap.get('filterDilogButton')}}
</button>
</mat-dialog-actions>
</div>
</div>

View File

@ -1,4 +1,4 @@
<p style="font-family:arial; margin-top: -3%;">{{this.languageService.lMap.get('implementerDialogHeading')}}</p>
<p style="margin-top: -3%;">{{this.languageService.lMap.get('implementerDialogHeading')}}</p>
<mat-form-field appearance="fill" >
<mat-label>{{this.languageService.lMap.get('implementerDialogLabel')}}</mat-label>
<mat-select [disabled]="diasbled" (selectionChange)="enableButton()" [(ngModel)]="selectedValue" name="state">

View File

@ -124,6 +124,7 @@ export class LanguageService {
this.deMap.set('filterDilogPaketTypeText', 'einen oder mehrere, exakte Eingabe');
this.deMap.set('filterDilogDate', 'Datum');
this.deMap.set('filterDilogDateText', 'Geplantes Start-Datum: Von / Bis');
this.deMap.set('filterDilogIntervalTitle', 'Intervall');
this.deMap.set('filterDilogSearchText', 'Text durchsuchen');
this.deMap.set('filterDialogSearchSg', 'Supportgruppe suchen & auswählen');
@ -134,17 +135,18 @@ export class LanguageService {
this.deMap.set('filterDilogSearchTo', 'Bis');
this.enMap.set('filterDialogShortDesc', 'Short description');
this.enMap.set('filterDialogShortDescText', 'entering a text part filters all matching packages');
this.enMap.set('filterDialogShortDescText', 'Entering a text part filters all matching packages');
this.enMap.set('filterDilogSg', 'Support group');
this.enMap.set('filterDilogSgText', 'in the role of planning IH or cost manager (one)');
this.enMap.set('filterDilogSgText', 'In the role of planning IH or cost manager (one)');
this.enMap.set('filterDilogState', 'State');
this.enMap.set('filterDilogStateText', '(one or more) of the package');
this.enMap.set('filterDilogStateText', '(One or more) of the package');
this.enMap.set('filterDilogContract', 'Contract');
this.enMap.set('filterDilogContractText', 'Contract / provider cluster (one or more)');
this.enMap.set('filterDilogPaketType', 'Package type');
this.enMap.set('filterDilogPaketTypeText', 'one or more, exact input');
this.enMap.set('filterDilogDate', 'Date');
this.enMap.set('filterDilogDateText', 'Planned start date: from / to');
this.enMap.set('filterDilogIntervalTitle', 'Interval');
this.enMap.set('filterDilogSearchText', 'Text search');
this.enMap.set('filterDialogSearchSg', 'Search & select support group');
@ -154,6 +156,11 @@ export class LanguageService {
this.enMap.set('filterDilogSearchFrom', 'From');
this.enMap.set('filterDilogSearchTo', 'Until');
this.enMap.set('filterDialogInterval', 'Packages with interval > one year');
this.deMap.set('filterDialogInterval', 'Pakete mit Intervall > ein Jahr');
this.enMap.set('filterDialogIntervalCheck', 'Show only packages with interval > one year!');
this.deMap.set('filterDialogIntervalCheck', 'Zeige nur Pakete mit Intervall > ein Jahr!');
this.enMap.set('filterDilogButton', 'Apply Filters');
this.deMap.set('filterDilogButton', 'Filter anwenden');
this.deMap.set('filterDialogCancel', 'Abbrechen');

View File

@ -6,11 +6,6 @@
min-height: 3em;
}
.custom-form-field {
height: 56px;
align-items: center;
}
.custom-form-field .form-field-container {
display: flex;
align-items: center;
@ -18,10 +13,16 @@
}
.custom-form-field input[matInput] {
flex: 1;
margin-left: 8px;
line-height: 1;
}
.custom-form-field mat-checkbox {
margin-right: 8px;
mat-chip {
display: flex;
align-items: center;
vertical-align: middle;
line-height: 1;
}
mat-icon {
vertical-align: middle;
}

View File

@ -1,12 +1,12 @@
<div class="chip-list-wrapper">
<mat-chip-listbox #chipList>
<ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
<mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
<mat-chip (click)="removeChip(select)" style="background-color: #00a79d;">
{{ select.item }}
<mat-icon class="mat-chip-remove">cancel</mat-icon>
</mat-chip>
</ng-container>
<mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">...
<mat-chip *ngIf="selectData.length>20">...
{{selectData.length-20}} weitere
</mat-chip>
</mat-chip-listbox>

View File

@ -2,7 +2,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
/* overflow: hidden; */
}
.splitter {
@ -15,7 +15,6 @@
color: rgba(41, 46, 50, 0.8);
padding-left: 10px;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
@ -105,6 +104,56 @@
}
}
.detailsButton {
display: flex;
align-items: center;
padding: 8px; /* Adjust padding as needed */
height: 40px; /* Ensure enough height for the slide toggle */
}
mat-slide-toggle {
margin-bottom: 0; /* Prevent margin collapse */
}
mat-button-toggle-group {
.mat-button-toggle-checked {
background-color: #ef6c00 !important; /* Orange background */
color: white !important; /* Text color */
}
.mat-button-toggle-checked:hover {
background-color: darken(#ef6c00, 10%) !important; /* Darker orange on hover */
}
}
.detailsButton {
display: flex;
align-items: center;
mat-slide-toggle.mat-primary .mat-slide-toggle-thumb {
background-color: #ef6c00 !important; /* Orange thumb */
}
mat-slide-toggle.mat-primary .mat-slide-toggle-bar {
background-color: rgba(239, 108, 0, 0.5) !important; /* Lighter orange bar */
}
mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
background-color: #ef6c00 !important; /* Orange thumb when checked */
}
mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
background-color: #ef6c00 !important; /* Orange bar when checked */
}
mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-content {
color: #ef6c00 !important; /* Text color */
}
}
.restartButton {
background-color: white;
border: none;
@ -197,10 +246,7 @@
display: flex;
align-items: center;
justify-content: center;
height: 70%;
font-weight: 500;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
gap: 8px;
user-select: none;
padding-left: 10px;
@ -456,8 +502,6 @@
.legend {
width: 100%;
font-family: Arial, sans-serif;
font-size: 13px;
gap: 4px;
background-color: rgb(210, 217, 224);
padding: 10px;

View File

@ -1,12 +1,12 @@
<div class="head" style="">
<div class="head" style="display: flex; align-items: center;">
<div class="left" style="display: flex; align-items: center; gap: 8px; height: 100%;">
<h2>W&I Kalender</h2>
<h2 style="padding: 0; margin: 0;">W&I Kalender</h2>
<div class="splitter"></div>
<!-- Preset Picker -->
<div appearance="fill" style="width: 200px; padding-left: 15px; padding-top: 3px; font-size: 14px;">
<div appearance="fill" style="width: 240px; padding-left: 15px; ">
<mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
<mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
<mat-option *ngFor="let preset of group.presets" [value]="preset">
<mat-optgroup style="font-size: 14px; font-weight: 600; letter-spacing: 0; color: rgba(0, 0, 0, 0.4);" *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
<mat-option style="font-size: 14px; line-height: 1;letter-spacing: 0;" *ngFor="let preset of group.presets" [value]="preset">
{{preset.name}}
<!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
<button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
@ -30,11 +30,8 @@
</mat-form-field> -->
<!-- Language Picker -->
<mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;"
(change)="languageChange($event)" name="languagePicker" aria-label="Language Picker"
[(ngModel)]="languageService.language">
<mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages"
[value]="lang">
<mat-button-toggle-group style="height: 70%; border-radius: 8px; margin-left: 15px;" (change)="languageChange($event)" name="languagePicker" aria-label="Language Picker" [(ngModel)]="languageService.language">
<mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages" [value]="lang">
{{lang}}
</mat-button-toggle>
</mat-button-toggle-group>
@ -43,16 +40,16 @@
<!-- User -->
<div style="display: flex; justify-content: center; align-items: center; font-size: 12px;">
<div style="display: flex; justify-content: center; align-items: center;">
<h3 *ngIf="userId"
style="font-family: Arial, Helvetica, sans-serif; font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
style="font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
<mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}
</h3>
<h3 *ngIf="errorService.rsso"
style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
style="display: flex; align-items: center; gap: 5px;"><mat-icon
style="color: red;">verified_user</mat-icon> RSSO Auth Failed</h3>
<h3 *ngIf="!errorService.rsso &&rssoInit"
style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
style="display: flex; align-items: center; gap: 5px;"><mat-icon
style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
</div>
</div>
@ -107,7 +104,7 @@
<div class="right">
<!-- Scale Picker -->
<mat-button-toggle-group color="primary" style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
<mat-button-toggle-group color="primary" style="height: 70%; border-radius: 8px;" (change)="changeScalar()"
name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
<mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
[value]="scalar">
@ -117,8 +114,8 @@
<!-- Date Range Picker -->
<div class="dateRangePicker"
style="display: flex; height: 100%; align-items: center; font-size: 13px; color: rgba(0, 0, 0, 0.734);">
<div style="height: 70%; display: flex; align-items: center; width: 170px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
style="display: flex; height: 100%; align-items: center; color: rgba(0, 0, 0, 0.734);">
<div style="height: 70%; display: flex; align-items: center; width: 190px; border: solid 1px rgba(0, 0, 0, 0.124);
background-color: white; padding-left: 10px; border-radius: 8px 0px 0px 8px;">
<!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">

View File

@ -1,9 +1,11 @@
<h2 style="font-family: Roboto;">Preset {{preset.name}} umbenennen?</h2>
<mat-form-field class="example-full-width">
<mat-label>Preset Name</mat-label>
<input matInput [(ngModel)]="newName">
</mat-form-field>
<mat-dialog-actions align="end">
<button mat-raised-button style="margin-right: 3px;" matDialogClose>Abbrechen</button>
<button mat-raised-button color = "primary" style="margin-left: 3px;" (click)="renamePreset()" matDialogClose>Umbenennen</button>
</mat-dialog-actions>
<div style="padding: 20px;">
<h2 style="line-height: 1.2;">Preset <span style="color: #ef6c00;">{{preset.name}}</span> umbenennen?</h2>
<mat-form-field style="width: 100%;">
<mat-label>Preset Name</mat-label>
<input matInput [(ngModel)]="newName">
</mat-form-field>
<mat-dialog-actions align="end">
<button mat-flat-button style="letter-spacing: 0px;" matDialogClose>Abbrechen</button>
<button mat-flat-button style="color: white; letter-spacing: 0px" color="primary"(click)="renamePreset()" matDialogClose>Umbenennen</button>
</mat-dialog-actions>
</div>

View File

@ -1,4 +1,4 @@
<h2 style="font-family: Roboto;">Als neues Preset speichern?</h2>
<h2>Als neues Preset speichern?</h2>
<mat-form-field class="example-full-width">
<mat-label>Preset Name</mat-label>
<input matInput [(ngModel)]="newName">

View File

@ -1,17 +1,20 @@
<p style="font-family:arial; margin-top: -3%;">{{this.languageService.lMap.get('stateDialogStateTransition')}} ({{data.changes.length}} {{data.changes.length > 1 ? 'Pakete' : 'Paket'}})</p>
<mat-form-field appearance="fill" >
<mat-label>{{this.languageService.lMap.get('stateDialogSelectState')}}</mat-label>
<mat-select [disabled]="diasbled" (selectionChange)="enableButton()" [(ngModel)]="selectedValue" name="state">
<mat-option *ngFor="let state of possibleStates" [value]="state.value">
{{state.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
<div style="padding: 20px;">
<p style="margin-top: -3%;">{{this.languageService.lMap.get('stateDialogStateTransition')}} ({{data.changes.length}} {{data.changes.length > 1 ? 'Pakete' : 'Paket'}})</p>
<mat-form-field appearance="fill" >
<mat-label>{{this.languageService.lMap.get('stateDialogSelectState')}}</mat-label>
<mat-select [disabled]="diasbled" (selectionChange)="enableButton()" [(ngModel)]="selectedValue" name="state">
<mat-option *ngFor="let state of possibleStates" [value]="state.value">
{{state.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
<mat-dialog-actions align="end">
<button [disabled]="diasbled" mat-flat-button style="letter-spacing: 0px;" matDialogClose>{{this.languageService.lMap.get('stateDialogCancel')}}</button>
<button [disabled]="bdiasbled" mat-flat-button style="color: white; letter-spacing: 0px" color="primary" (click)="updateState()">{{this.languageService.lMap.get('stateDialogConfirm')}}</button>
</mat-dialog-actions>
</div>
<mat-dialog-actions align="end">
<button [disabled]="diasbled" mat-raised-button matDialogClose>{{this.languageService.lMap.get('stateDialogCancel')}}</button>
<button [disabled]="bdiasbled" mat-raised-button color="primary" (click)="updateState()">{{this.languageService.lMap.get('stateDialogConfirm')}}</button>
</mat-dialog-actions>

View File

@ -16,27 +16,39 @@
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
.green-snackbar {
background: green!important;
background: green !important;
color: white;
}
.green-snackbar button {
background-color: green!important;
background-color: green !important;
color: white;
border: none;
}
.red-snackbar {
background: #F44336!important;
color: white!important;
background: #F44336 !important;
color: white !important;
}
.red-snackbar button {
background-color: #F44336;
color: white !important;
border: none;
}
html, body {
html,
body {
/* overflow: hidden !important; */
font-family: 'Helvetica';
font-size: 14px;
}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
html,
body {
height: 100%;
}
body {
margin: 0;
}

View File

@ -19,6 +19,10 @@ $my-theme: mat.define-light-theme((
.dateButton.mat-button {
background-color: blue !important;
color: white;
}
* {
font-family: 'Helvetica';
font-size: 14px;
}