Zertifikats-Assistent

• Nested Instances: Button, Icon Button, Autocomplete, Float Container, Alert, Modal

• Used in: Ausgangsstoffprüfung

Zertifikats-Assistent Modals

Zertifikats-Assistent

Zertifikat von Herstellerseite laden

Laden Sie Prüfzertifikate der Hersteller Caelo, Fagron, Euro OTC, Bombastus, ICHTHYOL und Benevi direkt von der Herstellerseite.

Hersteller

Hersteller-Chargenbezeichnung

Vorhandenes Zertifikat hochladen

Sie haben bereits ein Prüfzertifikat auf Ihrem Rechner?
Laden Sie es hier hoch.

Das Prüfzertifikat konnte nicht geladen werden.

Bitte prüfen Sie Ihre Eingabe auf Tippfehler.

Der gewählte Hersteller bietet momentan noch keinen Zertifikatsservice an.

Laden Sie bitte ein bestehendes Zertifikat über den Uploader auf der rechten Seite hoch.

Das Prüfzertifikat von Caelo (1256006565-H6T) wurde erfolgreich hochgeladen:

Hersteller-Zertifikat.pdf

Zertifikat löschen

Das angehängte Zertifikat wird unwiderruflich aus dem Dokument entfernt.

Zertifikat überschreiben

Wollen Sie Ihr bereits hochgeladenes Prüfzertifikat mit dem neuen Upload überschreiben?

Show Code

<div class="m-t-l h-flex h-flex-column h-gap-m">
<h4>Zertifikats-Assistent Modals</h4>
<button type="button" class="c-btn -small -redesign -icon-left" data-target="#certificate-assistant">
  <span class="far fa-file-certificate" aria-hidden="true"></span>
  Prüfzertifikat einbinden
</button>
<button type="button" class="c-btn -small -error -redesign -icon-left" data-target="#deleteCertificate">
  Prüfzertifikat löschen
</button>
<button type="button" class="c-btn -small -secondary -redesign -icon-left" data-target="#newCertificate">
  Prüfzertifikat überschreiben
</button>
</div>
<!-- start Zertifikatsassistent modal -->
<div id="certificate-assistant" class="c-panel -is-large -is-modal -has-backdrop -has-close-btn -close-js-abort">
  <div class="c-panel__inner">
    <h2 class="c-headline">
      <span class="far fa-file-certificate m-r-s" aria-hidden="true"></span>
      Zertifikats-Assistent
    </h2>
    <div class="h-flex h-row h-flex-divider h-equal-sizing h-screen-md-flex-column h-cell">
      <div id="certificate-manufacturer-upload" class="h-flex-item p-t-s p-r-xl">
        <h3 class="h4 c-headline p-b-s">
          Zertifikat von Herstellerseite laden
        </h3>
        <p>Laden Sie Prüfzertifikate der Hersteller Caelo, Fagron, Euro OTC, Bombastus, ICHTHYOL und Benevi direkt von der Herstellerseite.</p>
        <form class="c-form m-t-reset">
          <fieldset class="m-t-reset">
            <div class="c-float-container m-t-s -has-autocomplete">
              <div class="c-float-container__icon">
                <span class="far fa-search" aria-hidden="true"></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-outline -small -icon-left m-t-s h-fullwidth" data-spinner>
              <span class="far fa-download" aria-hidden="true"></span>
              Hersteller-Zertifikat laden
            </button>
          </fieldset>
        </form>
      </div>
      <div class="p-t-s p-l-xl h-flex-item" id="ap-pruefzertifikat">
        <h3 class="h4 c-headline p-b-s">
          Vorhandenes Zertifikat hochladen
        </h3>
        <p>Sie haben bereits ein Prüfzertifikat auf Ihrem Rechner?<br/>Laden Sie es hier hoch.</p>
        <!-- Fine Uploader Gallery template
          <div class="qq-uploader-selector qq-uploader qq-gallery">
            <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>
            <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>
            <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" aria-label="Wiederholen">
                  <span class="fa fa-redo" aria-hidden="true"></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>-->
        <!-- 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 class="m-b-reset">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-xxs">
              <span id="certificate-sentence">Das Prüfzertifikat von Caelo (1256006565-H6T) wurde erfolgreich hochgeladen:</span>
            </p>
            <a href="/attachment.pdf" target="_blank" class="c-link -is-block -underline -show-external-on-hover p-r-xs" id="certificate-link"><span id="certificate-name">Hersteller-Zertifikat.pdf</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="c-panel__inner__bottom -small h-bg-color m-t-l">
      <button type="button" data-dismiss="modal" class="c-btn -redesign -small -link -flat -icon-left js-abort">
        Abbrechen
      </button>
      <button type="button" id="certificate-submit" class="c-btn -redesign -small -primary -icon-left" disabled data-spinner>
        <span class="far fa-check" aria-hidden="true"></span> Zertifikat speichern
      </button>
    </div>
  </div>
</div>
<!-- end Zertifikatsassistent modal -->
<!-- start delete modal -->
<div id="deleteCertificate" class="c-panel -is-small -is-modal -has-backdrop -has-close-btn">
  <div class="c-panel__inner">
    <h3 class="c-headline">
      <span class="far fa-exclamation-triangle m-r-xs" aria-hidden="true"></span> Zertifikat löschen
    </h3>
    <p>Das angehängte Zertifikat wird unwiderruflich aus dem Dokument entfernt.</p>
    <div class="c-panel__inner__bottom -small -align-right">
      <button type="button" data-dismiss="modal" class="c-btn -redesign -link -flat -small -icon-left">
        Abbrechen
      </button>
      <button type="button" data-dismiss="modal" id="certificate-dismiss-submit" class="c-btn -redesign -error -small -icon-left" data-spinner>
        <span class="far fa-trash" aria-hidden="true"></span> Zertifikat löschen
      </button>
    </div>
  </div>
</div>
<!-- end delete modal -->
<!-- start overwrite modal -->
<div id="newCertificate" class="c-panel -is-medium -is-modal -has-backdrop -has-close-btn">
  <div class="c-panel__inner">
    <h3 class="c-headline">
      <span class="far fa-exclamation-triangle m-r-xs" aria-hidden="true"></span> Zertifikat überschreiben
    </h3>
    <p>
      Wollen Sie Ihr bereits hochgeladenes Prüfzertifikat mit dem neuen Upload überschreiben?
    </p>
    <div class="c-panel__inner__bottom -small -align-right">
      <button type="button" data-dismiss="modal" class="c-btn -redesign -link -flat -small -icon-left">
        Abbrechen
      </button>
      <button type="button" data-dismiss="modal" id="certificate-overwrite-submit" class="c-btn -redesign -primary -small -icon-left" data-spinner>
        <span class="far fa-check" aria-hidden="true"></span> Neue Datei verwenden
      </button>
    </div>
  </div>
</div>
<!-- end overwrite modal -->