hamann-ausgabe-core/HaWeb/Views/Admin/Upload/Index.cshtml

@model UploadViewModel;

<div class="ha-adminuploadfields" id="ha-adminuploadfields">
  @foreach (var item in Model.AvailableRoots!.OrderBy(x => x.Type)) {
      <a class="ha-uploadfield" asp-controller="Upload" asp-action="Index" asp-route-id="@item.Prefix">
        <div class="ha-uploadfieldname">@item.Type</div>
        @if (Model.UsedFiles != null && Model.UsedFiles.ContainsKey(item.Prefix)) {
          <div class="ha-uploadusedfiles">
          @foreach(var file in Model.UsedFiles[item.Prefix]!) {
            @if (file == Model.UsedFiles[item.Prefix]!.Last())
            {
              <span class="ha-uploadusedfile">@file.FileName</span>
            }
            else
            {
              <span class="ha-uploadusedfile">@file.FileName;</span>
            }
          }
          </div>
        }
        else {
          <div class="ha-uploadusedfiles ha-uploadusedfilesnotfound">Keine Datei geladen!</div>
        }
      </a>
  }

  <div class="ha-uploadpublishforms">
    <form class="ha-uploadform" id="uploadForm" asp-controller="API" asp-action="Upload" method="post" enctype="multipart/form-data">
        <label class="ha-uploadfilelabel" id="dropzone">
          <input class="hidden" id="file" type="file" accept=".xml" name="file" />
          <div class="ha-uploadtext">Upload</div>
          <div class="ha-lds-ellipsis" id="ha-lds-ellipsis"><div></div><div></div><div></div><div></div></div>
        </label>
        <div class="ha-uploadmessage" id="ha-uploadmessage">
          Fehler!<br/>
          <output form="uploadForm" name="upload-result"></output>
        </div>
    </form>

    <form class="ha-publishform" id="ha-publishform" asp-controller="API" asp-action="LocalPublish" method="post" enctype="multipart/form-data">
        <label class="ha-publishfilelabel" id="ha-publishfilelabel">
          <div class="ha-publishtext">Veröffentlichen</div>
          <div class="ha-lds-ellipsis" id="ha-lds-ellipsis-publish"><div></div><div></div><div></div><div></div></div>
        </label>
        <div class="ha-publishmessage" id="ha-publishmessage">
          @* Fehler!<br/> *@
          <output form="uploadForm" name="publish-result" id="publish-result"></output>
        </div>
    </form>
  </div>
</div>

<div class="ha-uploadheader">
  <h1 class="ha-uploadtitle">@Model.ActiveTitle</h1>
</div>

<div class="ha-uploadcontainer">
@* File Category Page File List *@
@if (Model.AvailableFiles != null && Model.AvailableFiles.Any()) {
  <div class="ha-filesheader">
    <div class="ha-availablefiles" id="ha-availablefiles">
      <div class="ha-availablefilestitle">Datei(en)</div>
        @if(Model.UsedFiles != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
          <div class="ha-usedfilelist">
          @foreach (var item in Model.UsedFiles[Model.Prefix]!)
          {
            if(item == Model.UsedFiles[Model.Prefix]!.Last()) {
              <span class="ha-usedfile">@item.FileName</span>
            }
            else {
              <span class="ha-usedfile">@item.FileName,</span>
            }
          }
          </div>
        }
    </div>
    <div class="ha-availablefileslist hidden" id="ha-availablefileslist">
        @await Html.PartialAsync("/Views/Shared/_FileList.cshtml", (Model.AvailableFiles, "Verfügbare Dateien:", "API", "SetUsed", Model.Prefix, "/Download/XML/" + Model.Prefix + "/", true))
    </div>
  </div>
}

@* Start Page File List *@
else {
  <div class="ha-hamannfilechooser">
    @await Html.PartialAsync("/Views/Shared/_FileList.cshtml", (Model.HamannFiles, "Verfügbare Hamann-Dateien", "API", "SetUsedHamann", string.Empty, "/Download/XML/", false))
  </div>
}

@* File Category Page Syntax Check *@
@if (Model.UsedFiles != null && Model.Prefix != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
  <div class="ha-errorswarnings">
    <div class="ha-criticalerrors">

    </div>
    <div class="ha-warnings">
      
    </div>
  </div>

  <div class="ha-crossfilechecking">
    
  </div>
}

</div>

@section Scripts {
  <script>
    "use strict";
    const hideshowfiles = function() {
      let elem = document.getElementById("ha-availablefileslist");
      console.log("hello!");
      if (elem.classList.contains('hidden')) {
        
        elem.classList.remove('hidden');
        elem.classList.add('block');
      }
      else {
        elem.classList.add('hidden');
        elem.classList.remove('block');
      }
    }

    const dropHandler = function (formelement, ev, dropzone) {
      ev.preventDefault();
      if (ev.dataTransfer.items) {
        if (ev.dataTransfer.items[0].kind === 'file') {
          var file = ev.dataTransfer.items[0].getAsFile();
          UPLOADSubmit(formelement, file);
        } else {
          var file = ev.dataTransfer.files[0];
          UPLOADSubmit(formelement, file);
        }
      }
    }

    const dragOverHandler = function (ev, dropzone) {
      ev.preventDefault();
    }

    const dragLeaveHander = function (ev, dropzone) {
      ev.preventDefault();
    }

    const dragEnterHandler = function (ev, dropzone) {
      ev.preventDefault();
    }

    const LOCALPUBLISHSubmit = async function (oFormElement) {
      var fd = new FormData();
      document.getElementById("ha-publishfilelabel").style.pointerEvents = "none";
      document.getElementById("ha-lds-ellipsis-publish").style.display = "inline-block";
      document.getElementById("ha-publishmessage").style.opacity = "0";
      await fetch(oFormElement.action, {
          method: 'POST',
          headers: {
            'RequestVerificationToken': getCookie('RequestVerificationToken')
          }
        })
        .then(response => response.json())
        .then(json => {
          if ("Error" in json) {
            document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
            document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
            document.getElementById("ha-publishmessage").style.opacity = "1";
            document.getElementById("publish-result").value = json.Error;
          } else {
            document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
            document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
            document.getElementById("ha-publishmessage").style.opacity = "1";
            document.getElementById("publish-result").value = "Erfolg!";
            window.location.replace("/Admin/Upload/");
          }
        })
        .catch ((e) => {
          document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
          document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
          document.getElementById("publish-result").value = "Keine Antwort. Bitte Seite neu laden!";
      })
    }

    const UPLOADSubmit = async function (oFormElement, file = null) {
      var fd = new FormData();
      if (file !== null) fd.append("file", file);
      else fd = new FormData(oFormElement);
      document.getElementById("dropzone").style.pointerEvents = "none";
      document.getElementById("ha-lds-ellipsis").style.display = "inline-block";
      document.getElementById("ha-uploadmessage").style.opacity = "0";
      await fetch(oFormElement.action, {
          method: 'POST',
          headers: {
            'RequestVerificationToken': getCookie('RequestVerificationToken')
          },
          body: fd
        })
        .then(response => response.json())
        .then(json => {
          if ("Error" in json) {
            document.getElementById("dropzone").style.pointerEvents = "auto";
            document.getElementById("ha-lds-ellipsis").style.display = "none";
            document.getElementById("ha-uploadmessage").style.opacity = "1";
            oFormElement.elements.namedItem("upload-result").value = json.Error;
          } else {
            document.getElementById("dropzone").style.pointerEvents = "auto";
            document.getElementById("ha-lds-ellipsis").style.display = "none";
            oFormElement.elements.namedItem("upload-result").value = "Erfolg!";
            if ("Prefix" in json[0]) {
              document.getElementById("dropzone").style.pointerEvents = "auto";
              document.getElementById("ha-lds-ellipsis").style.display = "none";
              window.location.replace("/Admin/Upload/" + json[0].Prefix);
            }
          }
        })
        .catch ((e) => { 
          document.getElementById("dropzone").style.pointerEvents = "auto";
          document.getElementById("ha-lds-ellipsis").style.display = "none";
          document.getElementById("ha-uploadmessage").style.opacity = "1";
          oFormElement.elements.namedItem("upload-result").value = "Keine Antwort. Bitte Seite neu laden!";
        })
    }

    function getCookie(name) {
      var value = "; " + document.cookie;
      var parts = value.split("; " + name + "=");
      if (parts.length == 2) return parts.pop().split(";").shift();
    }

    window.addEventListener("load", function () {
      var submitelement = document.getElementById("file");
      var formelement = document.getElementById("uploadForm");
      var dropzone = document.getElementById("dropzone");
      var publishelement = document.getElementById("ha-publishform");
      var publishbutton = document.getElementById("ha-publishfilelabel");
      var filesbutton = document.getElementById("ha-availablefiles");
      if (filesbutton !== null)
        filesbutton.addEventListener("click", () => hideshowfiles());
      publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement));
      submitelement.addEventListener("change", () => UPLOADSubmit(formelement));
      dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));
      dropzone.addEventListener("dragover", (ev) => dragOverHandler(ev, dropzone));
      dropzone.addEventListener("dragleave", (ev) => dragLeaveHander(ev, dropzone));
      dropzone.addEventListener("dragenter", (ev) => dragEnterHandler(ev, dropzone));
    });

    
  </script>
}