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));

HaWeb/Views/Shared/_FileList.cshtml

@@ -0,0 +1,71 @@
+@model (List<FileModel>? files, string title, string aspcontrolller, string aspaction, string id, string downloadprefix, bool multipleallowed);
+
+<fieldset class="ha-filelistfieldset">
+    <legend class="ha-filelistlegend">@Model.title</legend>
+    @if(Model.files != null && Model.files.Any()) {
+        <form class="ha-selectfilesform" id="selecthamannfilesform" asp-controller="@Model.aspcontrolller" asp-action="@Model.aspaction" asp-route-id="@Model.id" method="post" onsubmit="USESubmit(this);return false;" enctype="multipart/form-data">
+        <div class="ha-filelistlist">
+        @foreach (var file in Model.files.OrderByDescending(x => x.LastModified)) {
+            <div class="ha-filelistfile">
+            @if (Model.multipleallowed) {
+                <input type="checkbox" id="@file.FileName" name="file" value="@file.FileName" @(file.IsUsed ? "checked='checked'" : "")>
+            }
+            else {
+                <input type="radio" id="@file.FileName" name="file" value="@file.FileName" @(file.InProduction ? "checked='checked'" : "")>
+            }
+            <div class="ha-filelistname">@file.FileName</div>
+            @if (file.InProduction || file.IsUsed) {
+                <div class="ha-filelistusedproduction">
+                @if (file.InProduction) {
+                    <div class="ha-filelistproduction">in Verwendung</div>
+                }
+                @if (file.IsUsed) {
+                    <div class="ha-filelistused">geladen</div>
+                }
+                </div>
+            }
+            @if (file.Fields != null && file.Fields.Any()) {
+                <div class="ha-filelistfields">
+                    @foreach (var field in file.Fields) {
+                        @if (field.Item2 != null) {
+                            <div class="ha-filelistfield">field.Item2</div>
+                        }
+                    }
+                </div>
+            }
+            <div class="ha-filelistmodified">@file.LastModified</div>
+            </div>
+        }
+        </div>
+        <input class="btn ha-filelistbutton" type="submit" value="Laden" />
+        </form>
+    }
+    else {
+        <div>Keine Hamann-Dateien gefunden! Es wird eine fallback-Datei verwendet!</div>
+    }
+</fieldset>
+
+<script>
+    const USESubmit = async function (oFormElement, file = null) {
+      let fd = new FormData(oFormElement);
+      await fetch(oFormElement.action, {
+          method: 'POST',
+          headers: {
+            'RequestVerificationToken': getCookie('RequestVerificationToken')
+          },
+          body: fd
+        })
+        .then(response => response.json())
+        .then(json => {
+          if ("Error" in json) {
+            
+          } 
+          else {
+            location.reload();
+          }
+        })
+        .catch ((e) => { 
+            location.reload();
+        })
+    }
+</script>