Created FileList with ability to set used files

HaWeb/Views/Admin/Upload/Index.cshtml

@@ -44,7 +44,7 @@
         </label>
         <div class="ha-publishmessage" id="ha-publishmessage">
           @* Fehler!<br/> *@
-          <output form="uploadForm" name="publish-result"></output>
+          <output form="uploadForm" name="publish-result" id="publish-result"></output>
         </div>
     </form>
   </div>
@@ -52,31 +52,42 @@
 
 <div class="ha-uploadheader">
   <h1 class="ha-uploadtitle">@Model.ActiveTitle</h1>
-
-  @if (Model.Prefix != null) {
-  <div class="ha-usedfilesheader">
-    <div class="ha-usedfilesheaderlist">
-      @if(Model.UsedFiles != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
-        @foreach (var item in Model.UsedFiles[Model.Prefix]!)
-        {
-          <div class="ha-usedfilesheaderfile">@item.FileName</div>
-        }
-      }
-      else {
-        <div class="ha-usedfilesnone">Keine Datei geladen</div>
-      }
-    @if (Model.AvailableFiles != null) 
-    {
-      <div class="ha-availablefilechooser"><div class="ha-plussign"></div><a class="ha-loadotherfilesbtn">Andere Dateien laden...</a></div>
-    }
-  </div>
-  </div>
-  }
-
 </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">
@@ -92,17 +103,25 @@
   </div>
 }
 
-else {
-  <form class="ha-selecthamannfilesform" id="selecthamannfilesform" asp-controller="API" asp-action="SetUsedHamann" method="post" enctype="multipart/form-data">
-    
-  </form>
-}
-
 </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) {
@@ -145,18 +164,19 @@ else {
             document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
             document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
             document.getElementById("ha-publishmessage").style.opacity = "1";
-            oFormElement.elements.namedItem("update-result").value = json.Error;
+            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";
-            oFormElement.elements.namedItem("update-result").value = "Erfolg!";
+            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";
-          console.log('Error:', e);
+          document.getElementById("publish-result").value = "Keine Antwort. Bitte Seite neu laden!";
       })
     }
 
@@ -212,6 +232,9 @@ else {
       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));