Implement Edit Modal for Server Entries

assets/css/openfusion.css

@@ -80,6 +80,11 @@ body {
   border-color: #6699FF;
 }
 
+#of-editservermodal > .modal-dialog > .modal-content {
+  background-color: #093363;
+  border-color: #6699FF;
+}
+
 #of-deleteservermodal > .modal-dialog > .modal-content {
   background-color: #093363;
   border-color: #6699FF;

assets/js/serverselector.js

@@ -39,6 +39,20 @@ function addServer() {
   loadServerList();
 }
 
+function editServer() {
+  var jsontomodify = JSON.parse(remotefs.readFileSync(userdir+"\\servers.json"));
+  $.each(jsontomodify["servers"], function( key, value ) {
+    if(value["uuid"] == getSelectedServer()) {
+      value['description'] = $("#editserver-descinput").val().length == 0 ? value['description'] : $("#editserver-descinput").val();
+      value['ip'] = $("#editserver-ipinput").val().length == 0 ? value['ip'] : $("#editserver-ipinput").val();
+      value['version'] = $("#editserver-versionselect option:selected").text();
+    }
+  });
+
+  remotefs.writeFileSync(userdir+"\\servers.json", JSON.stringify(jsontomodify, null, 4));
+  loadServerList();
+}
+
 function deleteServer() {
   var jsontomodify = JSON.parse(remotefs.readFileSync(userdir+"\\servers.json"));
   var result = jsontomodify['servers'].filter(function(obj) {return (obj.uuid === getSelectedServer())})[0];
@@ -56,6 +70,7 @@ function loadGameVersions() {
   versionarray = versionjson['versions'];
   $.each(versionarray, function( key, value ) {
     $(new Option(value.name, 'val')).appendTo('#addserver-versionselect');
+    $(new Option(value.name, 'val')).appendTo('#editserver-versionselect');
   });
 }
 
@@ -189,6 +204,25 @@ $('#server-table').on('dblclick', '.server-listing-entry', function(event) {
   connectToServer();
 });
 
+$('#of-editservermodal').on('show.bs.modal', function (e) {
+
+  var jsontomodify = JSON.parse(remotefs.readFileSync(userdir+"\\servers.json"));
+  $.each(jsontomodify["servers"], function( key, value ) {
+    if(value["uuid"] == getSelectedServer()) {
+      $("#editserver-descinput")[0].value = value['description'];
+      $("#editserver-ipinput")[0].value = value['ip'];
+      
+      var versionIndex = -1;
+      $.each($("#editserver-versionselect")[0], function( key, val ) {
+        if(val.text === value['version']) {
+          versionIndex = key;
+        }
+      });
+      $("#editserver-versionselect")[0].selectedIndex = versionIndex;
+    }
+  });
+});
+
 $('#of-deleteservermodal').on('show.bs.modal', function (e) {
   var result = serverarray.filter(function(obj) {return (obj.uuid === getSelectedServer());})[0];
   $("#deleteserver-servername").html(result.description);

index.html

@@ -41,7 +41,7 @@
             <div class="row row-cols-2 d-xl-flex justify-content-center justify-content-xl-center" id="of-serverbuttons" style="padding-bottom: 16px;">
                 <div class="col-4 text-left d-inline-flex justify-content-xl-start">
                     <button class="btn btn-success mr-1" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-addserver-button" type="button" title="Add Server" data-target="#of-addservermodal" onclick="deselectServer()"><i class="fas fa-plus"></i></button>
-                    <button class="btn btn-primary mr-1 disabled" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-editserver-button" type="button" title="Edit Server" data-target="#of-addservermodal" disabled=""><i class="fas fa-edit"></i></button>
+                    <button class="btn btn-primary mr-1 disabled" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-editserver-button" type="button" title="Edit Server" data-target="#of-editservermodal" disabled=""><i class="fas fa-edit"></i></button>
                     <button class="btn btn-danger disabled" data-toggle="modal" data-bs-tooltip="" data-placement="bottom" id="of-deleteserver-button" type="button" title="Delete Server" data-target="#of-deleteservermodal" disabled=""><i class="fas fa-trash-alt"></i></button>
                 </div>
                 <div class="col-4 d-inline-flex justify-content-end"><button class="btn btn-primary disabled" id="of-connect-button" type="button" onclick="connectToServer()" disabled="">Connect&nbsp;<i class="fas fa-angle-double-right"></i></button></div>
@@ -79,6 +79,19 @@
                 </div>
             </div>
         </div>
+        <div class="modal fade" role="dialog" tabindex="-1" id="of-editservermodal">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title">Edit Server</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="editserver-form" class="needs-validation"><label for="editserver-descinput">Server Description</label><input class="form-control form-row w-75" type="text" id="editserver-descinput" placeholder="My OpenFusion Server" required="" minlength="1" maxlength="70"><label for="addserver-ipinput">Server IP</label><input class="form-control form-row w-75" type="text" id="editserver-ipinput" placeholder="127.0.0.1:23000" required="" pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$"><label for="editserver-versionselect">Game Version:&nbsp;</label><select class="form-control w-50" id="editserver-versionselect" required="" style="margin-left: -5px;"></select></form>
+                    </div>
+                    <div class="modal-footer"><button class="btn btn-primary border rounded border-primary btn-danger border-danger" id="editserver-cancel" type="button" data-dismiss="modal">Cancel</button><button class="btn btn-primary border rounded border-primary btn-success border-success" id="addserver-savebutton" type="submit" data-dismiss="modal" form="editserver-form" onclick="editServer();">Save</button></div>
+                </div>
+            </div>
+        </div>
         <div class="modal fade" role="dialog" tabindex="-1" id="of-deleteservermodal">
             <div class="modal-dialog modal-dialog-centered" role="document">
                 <div class="modal-content">