guilloche-generator/src/app/app.component.html

<app-graphs [config]="config" [restoredHistory]="restoredHistory" (svgChange)="prepareSvgExport($event)"></app-graphs>

<aside class="col-sm-4 col-lg-3 col-xl-3">
  <div class="aside-inner">
    <form [formGroup]="configForm" (ngSubmit)="updateGraphs()" novalidate>
      <div class="pb-5">
        <h5>Grundfläche</h5>
        <hr>
        <div class="form-group">
          <label class="form-control-label">
            Breite
          </label>
          <input type="number" class="form-control" formControlName="width">
        </div>
        <div class="form-group">
          <label class="form-control-label">
            Höhe
          </label>
          <input type="number" class="form-control" formControlName="height">
        </div>
        <div class="form-group">
          <label class="form-control-label">
            Skalierung
          </label>
          <input type="number" class="form-control" formControlName="scale" min="0" max="1" step="0.01">
        </div>
      </div>
      <div class="pb-5">
        <h5>Vektorfläche</h5>
        <hr/>
        <div class="form-group">
          <label class="form-control-label">
            Skalierung
          </label>
          <input type="number" class="form-control" formControlName="overlap" min="0" max="30" step="0.1">
        </div>
        <ng-container formGroupName="vectors">
          <div class="form-group">
            <label class="form-control-label">
              Anfangsvektor
            </label>
            <select class="form-control" formControlName="start">
              <option value="1">Oben</option>
              <option value="0.5">Rechts</option>
              <option value="0">Unten</option>
              <option value="1.5">Links</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-control-label">
              Endvektor
            </label>
            <select class="form-control" formControlName="end">
              <option value="1">Oben</option>
              <option value="0.5">Rechts</option>
              <option value="0">Unten</option>
              <option value="1.5">Links</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-control-label">
              Dehnung
            </label>
            <input type="number" class="form-control" formControlName="range" min="0" max="1" step="0.1">
          </div>
        </ng-container>
      </div>
      <h5 class="mt-2">Graph</h5>
      <!-- <hr>
      <small>Anzahl der Schwingungen mittels Knotenpunkten bestimmen und die Skalierung auf der Leinwand einstellen.</small> -->
      <hr>
      <div class="form-group mb-4">
        <label class="form-control-label">
          Knotenpunkte
        </label>
        <input type="number" class="form-control" formControlName="nodes" min="1" max="10">
      </div>
      <div class="form-group">
        <label class="form-control-label">
          Linienstärke
        </label>
        <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
      </div>
      <div class="form-group mb-4">
        <label class="form-control-label">
          Linienabstand
        </label>
        <input type="number" class="form-control" formControlName="space" min="0" max="10" step="0.1">
      </div>
      <div class="form-group mb-4">
        <label class="form-control-label">
          Lienienanzahl
        </label>
        <input type="number" class="form-control" formControlName="spread" min="0" max="40">
      </div>
      <div class="dropdown-divider mb-4"></div>
      <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
    </form>

    <div class="row mt-4">
      <div class="col-sm">
        <button class="btn btn-secondary btn-block" (click)="exportSvg()">Download</button>
      </div>
      <div class="col-sm mt-xs-2 mt-sm-2 mt-md-0">
        <button class="btn btn-secondary btn-block" (click)="toggleList()">
          Chronik <span class="badge badge-light badge-pill">{{ list.length }}</span>
        </button>
      </div>
    </div>

    <div *ngIf="showList" class="list-group mt-4">
      <a href="#" *ngFor="let item of list.slice().reverse(); let i = index" class="list-group-item d-flex flex-row" (click)="restoreGraph(item)">
        <span class="text-muted pr-3">#{{ list.length - i }}</span>
        <div class="d-flex flex-column">
          <div class="">
            <span class="badge badge-primary  mr-2">
              {{ item.config.nodes }} Knoten
            </span>
            <span class="badge badge-primary">
              {{ item.config.spread }} Linien
            </span>
          </div>
          <div>
              {{ item.date | amTimeAgo }}
            </div>
        </div>
      </a>
    </div>
  </div>
</aside>