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

css generalized 'tile' (ChannelList)

Browse Source
This commit is contained in:
Patrick Haßel 2024-09-12 09:30:01 +02:00
parent c174a18a4a
commit bef7cc4a6e
2 changed files with 44 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/main/angular/src/app/pages/channel/list/channel-list.component.html
View File

@ -1,24 +1,24 @@
<table> <div class="tiles">
<tr> <div class="tile" *ngFor="let channel of channels">
<th>Titel</th> <div>
<th>Typ</th> {{ channel.title }}
<th colspan="3">Adresse</th> </div>
<th>DPT</th> <div class="left">
<th colspan="2">Wert</th> {{ channel.type }}
</tr> </div>
<tr *ngFor="let channel of channels">
<td>{{channel.title}}</td>
<td>{{channel.type}}</td>
<ng-container *ngIf="channel.type === 'KnxGroup'"> <ng-container *ngIf="channel.type === 'KnxGroup'">
<td class="first number">{{asKnxGroup(channel).addresMain}}&nbsp;/&nbsp;</td> <div class="left">
<td class="middle number">{{asKnxGroup(channel).addresMid}}&nbsp;/&nbsp;</td> {{ asKnxGroup(channel).addresMain }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresMid }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresSub }}
<td class="last number">{{asKnxGroup(channel).addresSub}}</td> </div>
<td class="number">{{asKnxGroup(channel).dpt}}</td> <div class="right">
DPT {{ asKnxGroup(channel).dpt }}
</div>
</ng-container> </ng-container>
<ng-container *ngIf="channel.type === 'Logic'"> <div class="timestamp">
<td colspan="4">{{asLogic(channel).operator}}</td> {{ channel.timestamp | date:'yyyy-MM-dd HH:mm:ss' || '-' }}
</ng-container> </div>
<td class="number">{{channel.value}}</td> <div class="value">
<td>{{channel.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td> {{ channel.value || '-' }}
</tr> </div>
</table> </div>
</div>

24
src/main/angular/src/app/pages/channel/list/channel-list.component.less
View File

@ -1,3 +1,23 @@
table { @import "../../../../config";
width: 100%;
div {
padding: @padding;
}
.left {
float: left;
}
.right {
float: right;
}
.timestamp {
clear: left;
float: left;
}
.value {
clear: right;
float: right;
} }