144 lines
9.2 KiB
HTML
144 lines
9.2 KiB
HTML
<app-page-header
|
|
[eyebrow]="'diffConfigs.eyebrow' | translate"
|
|
[title]="'diffConfigs.title' | translate"
|
|
[subtitle]="'diffConfigs.subtitle' | translate"
|
|
></app-page-header>
|
|
|
|
<div class="stats-grid compact-grid">
|
|
<app-stat-card [label]="'diffConfigs.exportsCard' | translate" [value]="availableExportsCount" [hint]="'diffConfigs.exportsCardHint' | translate" [tag]="'files.exportType' | translate" severity="success" icon="pi pi-file-export" iconClass="icon-emerald"></app-stat-card>
|
|
<app-stat-card [label]="'diffConfigs.scopeCard' | translate" [value]="selectedRouterLabel" [hint]="'diffConfigs.scopeCardHint' | translate" [tag]="'diffConfigs.scopeTag' | translate" severity="info" icon="pi pi-server" iconClass="icon-blue"></app-stat-card>
|
|
<app-stat-card [label]="'diffConfigs.readyCard' | translate" [value]="compareReady ? ('common.ok' | translate) : ('common.idle' | translate)" [hint]="'diffConfigs.readyCardHint' | translate" [tag]="'diffConfigs.readyTag' | translate" severity="warn" icon="pi pi-code" iconClass="icon-amber"></app-stat-card>
|
|
<app-stat-card [label]="'diffConfigs.lastDiffCard' | translate" [value]="lastDiffLabel" [hint]="'diffConfigs.lastDiffCardHint' | translate" [tag]="'diffConfigs.lastDiffTag' | translate" severity="secondary" icon="pi pi-history" iconClass="icon-violet"></app-stat-card>
|
|
</div>
|
|
|
|
<app-section-card [title]="'diffConfigs.workspaceTitle' | translate" [subtitle]="'diffConfigs.workspaceSubtitle' | translate">
|
|
<div class="diff-workspace">
|
|
<div class="diff-workspace__toolbar">
|
|
<span class="form-field diff-workspace__router">
|
|
<label>{{ 'files.routerLabel' | translate }}</label>
|
|
<p-select [appendTo]="'body'" [options]="routerOptions" [(ngModel)]="routerId" optionLabel="label" optionValue="value" (onChange)="load()"></p-select>
|
|
</span>
|
|
<div class="diff-workspace__actions">
|
|
<button pButton type="button" severity="secondary" icon="pi pi-refresh" [label]="'common.reset' | translate" (click)="routerId = null; compareLeftId = null; compareRightId = null; load()"></button>
|
|
<button pButton type="button" severity="secondary" icon="pi pi-star" [label]="'files.compareLatestPair' | translate" (click)="fillLatestPair()" [disabled]="availableExportsCount < 2"></button>
|
|
<button pButton type="button" severity="help" icon="pi pi-code" [label]="'files.compareSelected' | translate" (click)="openStructuredDiff()" [disabled]="!compareReady" [loading]="compareBusy"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diff-workspace__pair">
|
|
<div class="diff-pick-card" [class.is-selected]="!!compareLeft">
|
|
<div class="diff-pick-card__header">
|
|
<strong>{{ 'files.compareOlder' | translate }}</strong>
|
|
<p-tag [value]="compareLeft ? ('common.ok' | translate) : ('diffConfigs.waitingTag' | translate)" [severity]="compareLeft ? 'success' : 'secondary'"></p-tag>
|
|
</div>
|
|
<p-select [appendTo]="'body'" [options]="compareOptions" [(ngModel)]="compareLeftId" optionLabel="label" optionValue="value" [placeholder]="'files.pickOlder' | translate"></p-select>
|
|
<div class="diff-pick-card__meta" *ngIf="compareLeft as item">
|
|
<strong>{{ item.file_name }}</strong>
|
|
<small>{{ item.router_name || item.router_id }} · {{ relativeAge(item.created_at) }}</small>
|
|
<div class="dialog-actions">
|
|
<button pButton type="button" severity="secondary" size="small" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item)"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button pButton type="button" severity="secondary" icon="pi pi-sort-alt" styleClass="diff-workspace__swap" (click)="swapCompare()" [disabled]="!compareLeftId && !compareRightId"></button>
|
|
|
|
<div class="diff-pick-card" [class.is-selected]="!!compareRight">
|
|
<div class="diff-pick-card__header">
|
|
<strong>{{ 'files.compareNewer' | translate }}</strong>
|
|
<p-tag [value]="compareRight ? ('common.ok' | translate) : ('diffConfigs.waitingTag' | translate)" [severity]="compareRight ? 'success' : 'secondary'"></p-tag>
|
|
</div>
|
|
<p-select [appendTo]="'body'" [options]="compareOptions" [(ngModel)]="compareRightId" optionLabel="label" optionValue="value" [placeholder]="'files.pickNewer' | translate"></p-select>
|
|
<div class="diff-pick-card__meta" *ngIf="compareRight as item">
|
|
<strong>{{ item.file_name }}</strong>
|
|
<small>{{ item.router_name || item.router_id }} · {{ relativeAge(item.created_at) }}</small>
|
|
<div class="dialog-actions">
|
|
<button pButton type="button" severity="secondary" size="small" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item)"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</app-section-card>
|
|
|
|
<app-section-card class="diff-configs-table-section" [title]="'diffConfigs.tableTitle' | translate" [subtitle]="'diffConfigs.tableSubtitle' | translate">
|
|
<p-table [value]="exportFiles" [loading]="loading" [rows]="8" [paginator]="exportFiles.length > 8" responsiveLayout="scroll" styleClass="app-table repository-table">
|
|
<ng-template pTemplate="header">
|
|
<tr>
|
|
<th>{{ 'files.fileColumn' | translate }}</th>
|
|
<th>{{ 'files.routerColumn' | translate }}</th>
|
|
<th>{{ 'files.createdColumn' | translate }}</th>
|
|
<th>{{ 'files.compareColumn' | translate }}</th>
|
|
</tr>
|
|
</ng-template>
|
|
<ng-template pTemplate="body" let-item>
|
|
<tr>
|
|
<td>
|
|
<div class="table-primary">{{ item.file_name }}</div>
|
|
<small class="table-secondary">{{ 'files.checksum' | translate }}: {{ checksumShort(item.checksum) }}</small>
|
|
</td>
|
|
<td>
|
|
<div class="table-primary">{{ item.router_name || item.router_id }}</div>
|
|
<small class="table-secondary">ID {{ item.router_id }}</small>
|
|
</td>
|
|
<td>
|
|
<div class="table-primary">{{ item.created_at | date: 'dd.MM.yyyy HH:mm' }}</div>
|
|
<small class="table-secondary">{{ relativeAge(item.created_at) }}</small>
|
|
</td>
|
|
<td>
|
|
<div class="table-actions table-actions--labels table-actions--stack">
|
|
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-left" [label]="'files.setOlder' | translate" (click)="assignCompare('left', item)"></button>
|
|
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-right" [label]="'files.setNewer' | translate" (click)="assignCompare('right', item)"></button>
|
|
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="info" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item)"></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</app-section-card>
|
|
|
|
<p-dialog [(visible)]="previewVisible" [modal]="true" [header]="previewTitle || ('files.previewDialogTitle' | translate)" [style]="{ width: 'min(1100px, 92vw)' }" styleClass="preview-dialog">
|
|
<pre class="code-preview preview-dialog__content">{{ viewedExport }}</pre>
|
|
</p-dialog>
|
|
|
|
<p-dialog [(visible)]="diffVisible" [modal]="true" [header]="'files.diffDialogTitle' | translate" [style]="{ width: 'min(1420px, 96vw)' }" styleClass="preview-dialog preview-dialog--diff">
|
|
<div class="diff-layout" *ngIf="diffData as diff">
|
|
<div class="diff-layout__summary">
|
|
<div>
|
|
<div class="table-primary">{{ diff.left_file_name }}</div>
|
|
<small class="table-secondary">{{ 'files.compareOlder' | translate }}</small>
|
|
</div>
|
|
<div class="diff-layout__summary-arrow"><i class="pi pi-arrow-right"></i></div>
|
|
<div>
|
|
<div class="table-primary">{{ diff.right_file_name }}</div>
|
|
<small class="table-secondary">{{ 'files.compareNewer' | translate }}</small>
|
|
</div>
|
|
<div class="diff-stats" *ngIf="diff.stats">
|
|
<span class="diff-stats__pill diff-stats__pill--added">+{{ diff.stats.added }}</span>
|
|
<span class="diff-stats__pill diff-stats__pill--removed">-{{ diff.stats.removed }}</span>
|
|
<span class="diff-stats__pill diff-stats__pill--modified">~{{ diff.stats.modified }}</span>
|
|
</div>
|
|
<div class="dialog-actions preview-dialog__actions">
|
|
<button pButton type="button" severity="help" icon="pi pi-external-link" [label]="'files.openHtmlDiff' | translate" (click)="openHtmlDiff()"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="github-diff" *ngIf="diff.lines?.length; else plainDiffFallback">
|
|
<div class="github-diff__row" *ngFor="let line of diff.lines" [attr.data-type]="line.type">
|
|
<div class="github-diff__cell github-diff__cell--left">
|
|
<span class="github-diff__number">{{ line.left_number || '' }}</span>
|
|
<pre>{{ line.left_text || ' ' }}</pre>
|
|
</div>
|
|
<div class="github-diff__cell github-diff__cell--right">
|
|
<span class="github-diff__number">{{ line.right_number || '' }}</span>
|
|
<pre>{{ line.right_text || ' ' }}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #plainDiffFallback>
|
|
<pre class="code-preview preview-dialog__content">{{ diff.diff_text }}</pre>
|
|
</ng-template>
|
|
</div>
|
|
</p-dialog>
|