Zertifikats-Assistent

INFO

Modal is used in: Ausgangsstoffprüfung

<div class="certificate-upload-interface no-print">
  <a class="c-btn -small -redesign -icon-left" data-target="#certificate-assistant">
    <span class="far fa-file-certificate" ></span>
    Prüfzertifikat einbinden
  </a>
</div>
<!-- start Zertifikatsassistent modal -->
<div id="certificate-assistant" class="c-panel -is-extra-large -is-modal -has-backdrop -has-close-btn -close-js-abort">
  <div class="c-panel__inner">
    <h2 class="c-headline m-b-s">
      <span class="far fa-file-certificate m-r-s" ></span>
      Zertifikats-Assistent
    </h2>
    <div class="h-flex h-flex-divider h-flex-row h-equal-sizing h-screen-md-flex-column h-cell">
      <div id="certificate-manufacturer-upload" class="h-flex-item p-y-l p-r-xl">
        <h5 class="c-headline">
          Zertifikat von Herstellerseite laden
        </h5>
        <p>Laden Sie Prüfzertifikate von Caesar & Loretz GmbH direkt von der Herstellerseite.</p>
        <div class="h-flex h-flex-row h-vertical-center m-b-s">
          <span class="fa fa-info-circle m-r-s h-color-notice" ></span>
          <p class="h-type-emphasize small m-b-reset">
            Wir stehen in Kontakt mit weiteren Herstellern um diese Funktion zu erweitern.
          </p>
        </div>
        <form class="c-form m-t-reset">
          <fieldset class="m-t-reset">
            <div class="c-float-container m-t-s -has-autocomplete -has-icon">
              <div class="c-float-container__icon">
                <span class="far fa-search" ></span>
              </div>
              <label class="c-label" for="certificate-manufacturer-select">Hersteller</label>
              <input class="c-input -autocomplete" data-bind="hersteller" id="certificate-manufacturer-select" name="manufacturer" required>
              <div class="autocomplete-container" ></div>
            </div>
            <div class="c-float-container -has-input">
              <label class="c-label" for="certificate-manufacturer-charge">Hersteller-Chargenbezeichnung</label>
              <input
                type="text"
                class="c-input"
                data-placeholder="Hersteller-Chargenbezeichnung"
                id="certificate-manufacturer-charge"
                name="chargenbezeichnung"
                value=""
                min="2"
                required="required"
              >
            </div>
            <button type="button" id="certificate-manufacturer-search" class="c-btn -redesign -primary -small -icon-left m-t-s h-fullwidth" data-spinner disabled>
              <span class="fas fa-download" ></span>
              Hersteller-Zertifikat laden
            </button>
          </fieldset>
        </form>
      </div>
      <div class="p-y-l p-l-xl h-flex-item" id="ap-pruefzertifikat">
        <h5 class="c-headline">
          Vorhandenes Zertifikat hochladen
        </h5>
        <p>Sie haben bereits ein Prüfzertifikat auf Ihrem Rechner? Laden Sie es hier hoch.</p>
        <!-- Fine Uploader Gallery template -->
        <script type="text/template" id="c-file-upload-template">
          <div class="qq-uploader-selector qq-uploader qq-gallery">
          <!-- drag and drop area -->
          <div class="qq-upload-drop-area-selector qq-upload-drop-area">
          <i class="c-file-upload__icon"></i>
          <h5 class="c-file-upload__headline">Datei in das Feld ziehen</h5>
          </div>
          <!-- loading spinner -->
          <span class="qq-drop-processing-selector c-spinner m-b-m"></span>
          <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
          <!-- upload button -->
          <div class="qq-upload-button-selector qq-upload-button -invisible">
          <a class="c-file-upload__description">oder klicken um Datei auszuwählen</a>
          </div>
          <ul class="qq-upload-list-selector qq-upload-list h-hide" role="region" aria-live="polite" aria-relevant="additions removals">
          <li>
          <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
          <button type="button" class="c-link -icon-right -secondary qq-upload-retry-selector qq-upload-retry">
          <span class="fa fa-redo" title="Wiederholen"></span>
          </button>
          </li>
          </ul>
          <dialog class="qq-alert-dialog-selector c-panel hidden-print">
          <div class="qq-dialog-message-selector c-alert -warning"></div>
          <div class="qq-dialog-buttons">
          <button type="button" class="qq-cancel-button-selector c-btn -redesign -secondary">Schließen</button>
          </div>
          </dialog>
          <dialog class="qq-confirm-dialog-selector c-panel hidden-print">
          <div class="qq-dialog-message-selector c-alert -notice"></div>
          <div class="qq-dialog-buttons">
          <button type="button" class="qq-cancel-button-selector c-btn -redesign -secondary">Nein</button>
          <button type="button" class="qq-ok-button-selector c-btn -redesign -primary">Ja</button>
          </div>
          </dialog>
          <dialog class="qq-prompt-dialog-selector c-panel hidden-print">
          <div class="qq-dialog-message-selector c-alert -notice"></div>
          <input type="text">
          <div class="qq-dialog-buttons">
          <button type="button" class="qq-cancel-button-selector c-btn -redesign -secondary">Abbrechen</button>
          <button type="button" class="qq-ok-button-selector c-btn -redesign -primary">Ok</button>
          </div>
          </dialog>
          </div>
        </script>
        <!-- Fine Uploader DOM Element -->
        <div id="certificate-upload" class="c-file-upload m-t-l" ></div>
      </div>
    </div>
    <div class="m-t-s h-hide" id="certificate-upload-error">
      <div class="c-alert -redesign -error">
        <strong>Das Prüfzertifikat konnte nicht geladen werden.</strong>
        <p>Bitte prüfen Sie Ihre Eingabe auf Tippfehler.</p>
      </div>
    </div>
    <div class="m-t-s h-hide" id="certificate-manufacturer-error">
      <div class="c-alert -redesign -error">
        <strong>Der gewählte Hersteller bietet momentan noch keinen Zertifikatsservice an.</strong>
        <p>Laden Sie bitte ein bestehendes Zertifikat über den Uploader auf der rechten Seite hoch.</p>
      </div>
    </div>
    <div class="m-t-s h-show" id="certificate-show-upload">
      <div class="c-alert -redesign -success">
        <div class="h-flex h-space-between">
          <div>
            <p class="m-b-s">
              <span id="certificate-sentence">Das Prüfzertifikat von Caelo (1256006565-H6T) wurde erfolgreich hochgeladen:</span>
            </p>
            <p><a href="/attachment.pdf" target="_blank" class="c-link -download -icon-left -is-block" id="certificate-link"><span id="certificate-name">Hersteller-Zertifikat.pdf</span></a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="c-panel__inner__bottom h-bg-color">
      <button type="button" data-dismiss="modal" class="c-btn -redesign -secondary -icon-left js-abort">
        <span class="fas fa-times" ></span> Abbrechen
      </button>
      <button type="button" id="certificate-submit" class="c-btn -redesign -primary -icon-left" disabled data-spinner>
        <span class="fas fa-check" ></span> Zertifikat speichern
      </button>
    </div>
  </div>
</div>
<!-- end Zertifikatsassistent modal -->
<!-- start delete modal -->
<div id="deleteCertificate" class="c-panel -is-large -is-modal -has-backdrop -has-close-btn">
  <div class="c-panel__inner">
    <h4 class="c-headline m-b-s">
      Zertifikat löschen
    </h4>
    <p>Wollen Sie das angehängte Zertifikat wirklich löschen?</p>
    <div class="c-panel__inner__bottom h-bg-color">
      <button type="button" data-dismiss="modal" class="c-btn -redesign -secondary -small -icon-left">
        <span class="fas fa-times" ></span> Abbrechen
      </button>
      <button type="button" data-dismiss="modal" id="certificate-dismiss-submit" class="c-btn -redesign -primary -small -icon-left" data-spinner>
        <span class="fas fa-trash" ></span> Ja, bitte löschen
      </button>
    </div>
  </div>
</div>
<!-- end delete modal -->
<!-- start overwrite modal -->
<div id="newCertificate" class="c-panel -is-large -is-modal -has-backdrop -has-close-btn">
  <div class="c-panel__inner">
    <h4 class="c-headline m-b-s">
      Zertifikat überschreiben
    </h4>
    <p>Wollen Sie Ihr bereits hochgeladenes Prüfzertifikat mit dem neuen Upload überschreiben?</p>
    <div class="c-panel__inner__bottom h-bg-color">
      <button type="button" data-dismiss="modal" class="c-btn -redesign -secondary -small -icon-left">
        <span class="fas fa-times" ></span> Abbrechen
      </button>
      <button type="button" data-dismiss="modal" id="certificate-overwrite-submit" class="c-btn -redesign -primary -small -icon-left" data-spinner>
        <span class="fas fa-check" ></span> Ja, neue Datei verwenden
      </button>
    </div>
  </div>
</div>
<!-- end overwrite modal -->