amigan/stillbox
1
1
Fork 0
Code Issues 33 Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Daniel Ponte 2024-12-22 10:49:16 -05:00
parent 6d7a1c23cf
commit 8a7b007697
3 changed files with 12 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/stillbox/src/app/calls/calls.component.html
View file

@ -1,5 +1,4 @@
<div class="toolbar"> <div class="toolbar">
<div class="tbLeft">
<mat-form-field subscriptSizing="dynamic" class="timeFilterBox"> <mat-form-field subscriptSizing="dynamic" class="timeFilterBox">
<mat-label>Start</mat-label> <mat-label>Start</mat-label>
<input <input
@ -21,7 +20,7 @@
/> />
</mat-form-field> </mat-form-field>
<mat-form-field subscriptSizing="dynamic" class="durationFilter"> <mat-form-field subscriptSizing="dynamic" class="durationFilter">
<mat-label>At Least Seconds</mat-label> <mat-label>Dur (s) &gt;</mat-label>
<input <input
matInput matInput
type="number" type="number"
@ -30,8 +29,6 @@
[formControl]="duration" [formControl]="duration"
/> />
</mat-form-field> </mat-form-field>
</div>
<div class="tbCenter">
<mat-form-field class="filterBox" subscriptSizing="dynamic"> <mat-form-field class="filterBox" subscriptSizing="dynamic">
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input <input
@ -51,11 +48,8 @@
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</div>
<div class="tbRight">
<button class="sbButton" (click)="resetFilter()">Reset</button> <button class="sbButton" (click)="resetFilter()">Reset</button>
</div> </div>
</div>
<div class="tabContainer"> <div class="tabContainer">
<table class="callsTable" mat-table [dataSource]="callsResult"> <table class="callsTable" mat-table [dataSource]="callsResult">
<ng-container matColumnDef="select"> <ng-container matColumnDef="select">
@ -93,7 +87,7 @@
<ng-container matColumnDef="date"> <ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th> <th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let call"> <td mat-cell *matCellDef="let call">
{{ call.call_date | date }} {{ call.call_date | grabDate }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="time"> <ng-container matColumnDef="time">

12
client/stillbox/src/app/calls/calls.component.scss
View file

@ -1,5 +1,5 @@
.timeFilterBox { .timeFilterBox {
width: 240px; flex: 0 0 240px;
} }
table, table,
@ -40,7 +40,8 @@ tr.mat-mdc-row {
.mat-column-play, .mat-column-play,
.mat-column-download, .mat-column-download,
.mat-column-duration { .mat-column-duration {
width: 2%; width: 10px;
padding: 0 2px;
} }
.mat-column-system { .mat-column-system {
@ -52,7 +53,7 @@ tr.mat-mdc-row {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.mat-column-group { .mat-column-group, .mat-column-system {
display: none; display: none;
} }
@ -63,6 +64,7 @@ tr.mat-mdc-row {
.toolbar { .toolbar {
display: flex; display: flex;
flex-flow: row wrap;
} }
.tbRight { .tbRight {
@ -73,9 +75,9 @@ tr.mat-mdc-row {
} }
.filterBox { .filterBox {
width: 300px; flex: 1 1 300px;
} }
.durationFilter { .durationFilter {
width: 150px; flex: 0 0 80px;
} }

5
client/stillbox/src/app/calls/calls.component.ts
View file

@ -43,15 +43,16 @@ import { MatTimepickerModule } from '@angular/material/timepicker';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
@Pipe({ @Pipe({
name: 'date', name: 'grabDate',
standalone: true, standalone: true,
pure: true, pure: true,
}) })
export class DatePipe implements PipeTransform { export class DatePipe implements PipeTransform {
transform(ts: string, args?: any): string { transform(ts: string, args?: any): string {
const timestamp = new Date(ts); const timestamp = new Date(ts);
return timestamp.getMonth() + 1 + '/' + timestamp.getDate(); return (timestamp.getMonth() + 1) + '/' + timestamp.getDate();
} }
} }