All files / src/app/components/configuration configuration.component.html

94.48% Statements 120/127
83.33% Branches 20/24
100% Functions 11/11
95.08% Lines 58/61

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93      644x 4x 4x 4x   644x 4x   4x 4x 644x 4x 84x 4x 4x   4x 238x 2x 2x   4x 5x     4x 476x 5x   4x 1x   4x   4x     4x 644x 4x 476x 78x   4x 402x   4x   476x       5x 76x 5x   4x 162x   1x 1x 324x     1x   4x 2x   1x     4x 64x   1x 1x 128x     1x 128x   2x 2x   1x   4x  
<div class="container">
  <div class="level">
    <div class="level-left">
      <button [routerLink]="['/configurations']" class="button is-rounded">
        <i class="pi pi-chevron-left"></i>
        <span>Configurations</span>
      </button>
 
      @if (!configuration) {
        <h1 class="title is-4">Add New Configuration</h1>
      }
    </div>
    <div class="level-right">
      @if (!configuration) {
        <button (click)="addConfiguration()" class="button" id="addConfiguration"
          [disabled]="xlsxConfigurationForm && xlsxConfigurationForm.invalid">
          Add new Configuration
        </button>
      }
      @else {
        @if (editMode) {
          <button (click)="saveConfiguration(false)" class="button is-primary" id="saveConfiguration">Save</button>
          <button (click)="saveConfiguration(true)" class="button is-primary" id="saveAsNewConfiguration">Save As New</button>
        }
        @else {
          <button (click)="exportToJson()" class="button is-primary" id="exportToJson">Export</button>
        }
 
        <button (click)="switchEditMode()" class="button is-primary" id="editConfiguration">
          @if (!editMode) {
            Edit
          }
          @else {
            Cancel
          }
        </button>
 
        <button (click)="deleteConfiguration()" class="button is-danger" id="deleteConfiguration">Delete</button>
      }
    </div>
  </div>
  @if (configurationId !== "new" && configuration) {
    <div>
      @if (configuration.is_in_use) {
        <h1 class="title">Configuration {{ configuration.config_name }} #{{ configuration.config_id ? configuration.config_id.slice(8) : 'unknown_id' }} (on {{ configuration.config.device_name }})</h1>
      }
      @else {
        <h1 class="title">Configuration {{ configuration.config_name }} #{{ configuration.config_id ? configuration.config_id.slice(8) : 'unknown_id' }}</h1>
      }
    </div>
 
    @if (!configurationFile) {
      <app-loader></app-loader>
    }
    @else if (!editMode) {
      <div>
        <ngx-json-viewer [json]="configurationFile" [expanded]="false"></ngx-json-viewer>
      </div>
    }
    @else {
      <form [formGroup]="xlsxConfigurationForm" class="flex flex-column gap-3 justify-content-center">
        <div class="field">
          <label class="label" htmlFor="configName">Name</label>
          <input class="input" type="text" id="configName" formControlName="configName" placeholder="Configuration name" />
          @if (this.isInvalid('configName')) {
              <p-message severity="error" size="small" variant="simple">Name of at least 5 characters is required.</p-message>
          }
        </div>
        <div class="flex flex-row gap-3 justify-content-evenly">
          <app-file-upload class="w-6" headerText="Petri Network (.json)" fileType=".json" fileIcon="pi pi-file-o" (selectionChanged)="updatePetriFile($event)"></app-file-upload>
          <app-file-upload class="w-6" headerText="Schematic (.json)" fileType=".json" fileIcon="pi pi-file-o" (selectionChanged)="updateSchematicFile($event)"></app-file-upload>
        </div>
      </form>
    }
  }
  @else if (configurationId === "new") {
    <form [formGroup]="xlsxConfigurationForm" class="flex flex-column gap-3 justify-content-center">
      <div class="field">
        <label class="label" htmlFor="configName">Name</label>
        <input class="input" type="text" id="configName" formControlName="configName" placeholder="Configuration name" />
        @if (this.isInvalid('configName')) {
            <p-message severity="error" size="small" variant="simple">Name of at least 5 characters is required.</p-message>
        }
      </div>
      <app-file-upload headerText="Excel configuration (.xls, .xlsx)" fileType=".xlsx,.xls" fileIcon="pi pi-file-excel" (selectionChanged)="updateConfigFile($event)" [required]="true"></app-file-upload>
      <div class="flex flex-row gap-3 justify-content-evenly">
        <app-file-upload class="w-6" headerText="Petri Network (.json)" fileType=".json" fileIcon="pi pi-file-o" (selectionChanged)="updatePetriFile($event)"></app-file-upload>
        <app-file-upload class="w-6" headerText="Schematic (.json)" fileType=".json" fileIcon="pi pi-file-o" (selectionChanged)="updateSchematicFile($event)"></app-file-upload>
      </div>
    </form>
  }
</div>