angular-test1/src/app/app.component.html

76 lines
2.6 KiB
HTML

<main class="main">
<div ngbDropdown class="d-inline-block" #houseDrop="ngbDropdown">
Haushalt:
<button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
{{getHouseName()}}
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem (click)="$event.stopPropagation(); houseId=1;">Kerpen</button>
<button ngbDropdownItem (click)="$event.stopPropagation(); houseId=2;">Rommerskirchen</button>
</div>
</div>
<div ngbDropdown class="d-inline-block">
<button type="button" class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>
Zeitraum
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
<button ngbDropdownItem (click)="$event.stopPropagation(); duration=120;">letzte 2 Stunden</button>
<button ngbDropdownItem (click)="$event.stopPropagation(); duration=360;">letzte 6 Stunden</button>
<button ngbDropdownItem (click)="$event.stopPropagation(); duration=1440;">letzte 24 Stunden</button>
</div>
</div>
<div ngbAccordion>
<div ngbAccordionItem>
<h2 ngbAccordionHeader>
<button ngbAccordionButton>Diagramm</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<app-chart houseId="{{houseId}}" duration="{{duration}}"></app-chart>
</div>
</div>
</div>
<div ngbAccordionItem>
<h2 ngbAccordionHeader>
<button ngbAccordionButton>Letzte 24 Stunden</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template><app-test duration="P1D" houseId="{{houseId}}"></app-test></ng-template>
</div>
</div>
</div>
<div ngbAccordionItem>
<h2 ngbAccordionHeader>
<button ngbAccordionButton>Letzte 7 Tage</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template><app-test duration="P7D"></app-test></ng-template>
</div>
</div>
</div>
<div ngbAccordionItem>
<h2 ngbAccordionHeader>
<button ngbAccordionButton>Letzte 30 Tage</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template><app-test duration="P30D"></app-test></ng-template>
</div>
</div>
</div>
<div ngbAccordionItem>
<h2 ngbAccordionHeader>
<button ngbAccordionButton>Letzte 365 Tage</button>
</h2>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template><app-test duration="P365D"></app-test></ng-template>
</div>
</div>
</div>
</div>
</main>
<!--<router-outlet />-->