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>
</p>
<table>
<tr>
<th>&nbsp;</th>
<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">
<div class="schedules">
<div class="scheduleBox" *ngFor="let schedule of schedules; trackBy: Schedule.trackBy">
<div class="schedule" [class.scheduleEnabled]="schedule.enabled">
<td class="boolean" (click)="set(schedule, 'enabled', !schedule.enabled)" [class.true]="schedule.enabled" [class.false]="!schedule.enabled">
<fa-icon *ngIf="schedule.enabled" [icon]="faCheckCircle"></fa-icon>
<fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
</td>
<div class="header">
<td [routerLink]="['/Schedule', {id: schedule.id}]">
{{schedule.title}}
</td>
<div class="enabled" (click)="set(schedule, 'enabled', !schedule.enabled)" [class.true]="schedule.enabled" [class.false]="!schedule.enabled">
<fa-icon *ngIf="schedule.enabled" [icon]="faCheckCircle"></fa-icon>
<fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
</div>
<td class="number first" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.dayName}}</td>
<td class="number middle" [class.empty]="!schedule.next?.nextFuzzyTimestamp">:&nbsp;</td>
<td class="number last" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.timeString}}</td>
<div class="title" [routerLink]="['/Schedule', {id: schedule.id}]">
{{ schedule.title }}
</div>
<td class="number first" [class.empty]="!schedule.next?.property">{{schedule.next?.property?.title}}</td>
<td class="number middle" [class.empty]="!schedule.next?.property">&nbsp;=&nbsp;</td>
<td class="number last" [class.empty]="!schedule.next?.property">
<app-entry-value *ngIf="schedule.next" [entry]="schedule.next" [allowChange]="false"></app-entry-value>
</td>
<div class="delete" (click)="delete(schedule)">
<fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
</div>
<td [class.empty]="!schedule.next?.bulk">
{{schedule.next?.bulk?.name}}
</td>
</div>
<td class="number first" [class.empty]="!schedule.last?.lastFuzzyTimestamp">{{schedule.last?.lastFuzzyTimestamp.dayName}}</td>
<td class="number middle" [class.empty]="!schedule.last?.lastFuzzyTimestamp">:&nbsp;</td>
<td class="number last" [class.empty]="!schedule.last?.lastFuzzyTimestamp">{{schedule.last?.lastFuzzyTimestamp.timeString}}</td>
<div class="timestampBox timestampBoxNext">
<div class="timestampTitle">
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)">
<fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
</td>
<div class="timestampBox timestampBoxLast">
<div class="timestampTitle">
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>
</table>
</div>
</div>
</div>

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

@ -1,11 +1,128 @@
select {
background-color: transparent;
border-width: 0;
width: 100%;
outline: none;
font-family: monospace;
.schedules {
font-size: 4vw;
padding: 0.25em;
.scheduleBox {
.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 {
background-color: lightblue;
@media (min-width: 1001px) {
.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";
const PROD: boolean = false;
const PROD: boolean = true;
export const environment = {
production: false,

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

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