patrick/Homeautomation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

schedule-list responsive

Browse Source
This commit is contained in:
Patrick Haßel 2024-08-15 08:25:34 +02:00
parent 979c4d0a39
commit 838e2a16fa
4 changed files with 171 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/main/angular/src/app/pages/schedule/list/schedule-list.component.html
View File

@ -2,48 +2,53 @@
<button (click)="create()">+ Hinzufügen</button> <button (click)="create()">+ Hinzufügen</button>
</p> </p>
<table> <div class="schedules">
<tr> <div class="scheduleBox" *ngFor="let schedule of schedules; trackBy: Schedule.trackBy">
<th>&nbsp;</th> <div class="schedule" [class.scheduleEnabled]="schedule.enabled">
<th>Bezeichnung</th>
<th colspan="3">Nächste</th>
<th colspan="3">Eigenschaft</th>
<th>Massenausführung</th>
<th colspan="3">Letzte</th>
<th>&nbsp;</th>
</tr>
<tr *ngFor="let schedule of schedules; trackBy: Schedule.trackBy">
<td class="boolean" (click)="set(schedule, 'enabled', !schedule.enabled)" [class.true]="schedule.enabled" [class.false]="!schedule.enabled"> <div class="header">
<fa-icon *ngIf="schedule.enabled" [icon]="faCheckCircle"></fa-icon>
<fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
</td>
<td [routerLink]="['/Schedule', {id: schedule.id}]"> <div class="enabled" (click)="set(schedule, 'enabled', !schedule.enabled)" [class.true]="schedule.enabled" [class.false]="!schedule.enabled">
{{schedule.title}} <fa-icon *ngIf="schedule.enabled" [icon]="faCheckCircle"></fa-icon>
</td> <fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
</div>
<td class="number first" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.dayName}}</td> <div class="title" [routerLink]="['/Schedule', {id: schedule.id}]">
<td class="number middle" [class.empty]="!schedule.next?.nextFuzzyTimestamp">:&nbsp;</td> {{ schedule.title }}
<td class="number last" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.timeString}}</td> </div>
<td class="number first" [class.empty]="!schedule.next?.property">{{schedule.next?.property?.title}}</td> <div class="delete" (click)="delete(schedule)">
<td class="number middle" [class.empty]="!schedule.next?.property">&nbsp;=&nbsp;</td> <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
<td class="number last" [class.empty]="!schedule.next?.property"> </div>
<app-entry-value *ngIf="schedule.next" [entry]="schedule.next" [allowChange]="false"></app-entry-value>
</td>
<td [class.empty]="!schedule.next?.bulk"> </div>
{{schedule.next?.bulk?.name}}
</td>
<td class="number first" [class.empty]="!schedule.last?.lastFuzzyTimestamp">{{schedule.last?.lastFuzzyTimestamp.dayName}}</td> <div class="timestampBox timestampBoxNext">
<td class="number middle" [class.empty]="!schedule.last?.lastFuzzyTimestamp">:&nbsp;</td> <div class="timestampTitle">
<td class="number last" [class.empty]="!schedule.last?.lastFuzzyTimestamp">{{schedule.last?.lastFuzzyTimestamp.timeString}}</td> Nächste Ausführung:
</div>
<div class="timestampTimestamp">
<ng-container *ngIf="schedule.next">{{ schedule.next?.nextFuzzyTimestamp.dayName }}:&nbsp;{{ schedule.next?.nextFuzzyTimestamp.timeString }}</ng-container>
<ng-container *ngIf="!schedule.next">- - -</ng-container>
</div>
<div class="timestampBulk" [class.timestampBulkEmpty]="!schedule.next?.bulk" *ngIf="schedule.next?.bulk">
{{ schedule.next?.bulk?.name }}
</div>
</div>
<td class="delete" (click)="delete(schedule)"> <div class="timestampBox timestampBoxLast">
<fa-icon title="Löschen" [icon]="faTimes"></fa-icon> <div class="timestampTitle">
</td> Zuletzt:
</div>
<div class="timestampTimestamp">
<ng-container *ngIf="schedule.last">{{ schedule.last?.lastFuzzyTimestamp.dayName }}:&nbsp;{{ schedule.last?.lastFuzzyTimestamp.timeString }}</ng-container>
<ng-container *ngIf="!schedule.last">- - -</ng-container>
</div>
<div class="timestampBulk" [class.timestampBulkEmpty]="!schedule.last?.bulk" *ngIf="schedule.last?.bulk">
{{ schedule.last?.bulk?.name }}
</div>
</div>
</tr> </div>
</table> </div>
</div>

133
src/main/angular/src/app/pages/schedule/list/schedule-list.component.less
View File

@ -1,11 +1,128 @@
select { .schedules {
background-color: transparent; font-size: 4vw;
border-width: 0; padding: 0.25em;
width: 100%;
outline: none; .scheduleBox {
font-family: monospace;
.schedule {
margin: 0.25em;
border: 0.1em solid gray;
border-radius: 0.2em;
background-color: #FFF0F0;
.header {
border-bottom: 0.1em solid gray;
.enabled {
float: left;
padding: 0.5em;
}
.title {
float: left;
padding: 0.5em;
font-weight: bold;
}
.delete {
float: right;
padding: 0.5em;
}
}
.timestampBoxNext {
clear: left;
float: left;
width: 100%;
height: 4em;
border-bottom: 0.1em solid lightgray;
div {
float: left;
padding: 0.1em;
height: 2em;
}
.timestampTitle {
// -
}
.timestampTimestamp {
float: right;
text-align: right;
}
.timestampBulk {
clear: both;
float: right;
width: 100%;
text-align: right;
}
.timestampBulkEmpty {
clear: both;
float: right;
width: 100%;
text-align: right;
color: gray;
}
}
.timestampBoxLast {
clear: left;
float: left;
width: 100%;
color: gray;
font-size: 80%;
div {
float: left;
padding: 0.1em;
height: 2em;
}
.timestampTitle {
width: 4em;
}
.timestampTimestamp {
text-align: right;
}
.timestampBulk {
float: right;
text-align: right;
}
.timestampBulkEmpty {
float: right;
text-align: right;
color: gray;
}
}
}
.scheduleEnabled {
background-color: #F0FFF0;
}
}
} }
th { @media (min-width: 1001px) {
background-color: lightblue;
.schedules {
font-size: 16px;
.scheduleBox {
float: left;
width: 33.33%;
}
}
} }

2
src/main/angular/src/environments/environment.ts
View File

@ -4,7 +4,7 @@
import {getBaseUrl} from "./UrlHelper"; import {getBaseUrl} from "./UrlHelper";
const PROD: boolean = false; const PROD: boolean = true;
export const environment = { export const environment = {
production: false, production: false,

3
src/main/angular/src/styles.less
View File

@ -9,7 +9,10 @@ a {
} }
div { div {
box-sizing: border-box;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
img { img {