images added

WWW_DATA/wp-content/themes/hostingreviews/admin/theme-settings.php

@@ -71,7 +71,7 @@ function display_hosting_companies_table()
         <a style="cursor: pointer;" onclick="addHostingLocation()">+ Add Location</a>
 
         <div class="d-flex justify-content-between mt-4">
-            <button type="button" class="button button-primary" onclick="saveHostingCompany()">Add</button>
+            <button type="button" class="button button-primary" onclick="saveHostingCompany()">Save</button>
             <button type="button" class="button" onclick="resetChanges()">Cancel</button>
         </div>
     </div>
@@ -88,7 +88,44 @@ function display_hosting_companies_table()
 function display_server_locations()
 {
     ?>
+    <table class="server-locations-listing mb-3">
+        <thead>
+        <tr>
+            <th>Locations</th>
+            <th>Domain</th>
+            <th></th>
+        </tr>
+        </thead>
+        <tbody id="server-locations-body">
+
+        </tbody>
+    </table>
+
+
+    <div class="server-location-data" id="server-location-data-wrapper">
+        <div class="row">
+            <div class="col-md-6">
+                <label for="">Location</label>
+                <input type="text" id="server-location-field">
+            </div>
+            <div class="col-md-6">
+                <label for="">Domain</label>
+                <input type="text" id="server-domain-field">
+            </div>
+        </div>
 
+        <div class="d-flex justify-content-between mt-4">
+            <button type="button" class="button button-primary" onclick="saveServerLocation()">Save</button>
+            <button type="button" class="button" onclick="resetServerLocationsChanges()">Cancel</button>
+        </div>
+    </div>
+
+
+    <input style="display: none;" type="text" name="vq_hosting_server_locations" id="vq-hosting-server-locations" value="" />
+
+    <script>
+        var serverLocationsDetails = <?php echo get_option('vq_hosting_server_locations') ? get_option('vq_hosting_server_locations') : '[]'; ?>;
+    </script>
     <?php
 }
 

WWW_DATA/wp-content/themes/hostingreviews/assets/css/admin.css

@@ -23,23 +23,50 @@
 
 
 
-.hosting-company-data {
+.hosting-company-data, .server-location-data {
     display: inline-block;
     padding: 30px;
     background: #fff;
     border-radius: 5px;
     min-width: 600px;
 }
-.hosting-company-data label {
+.hosting-company-data label, .server-location-data label{
     font-weight: 500;
 }
-.hosting-company-data input.small-fld {
+.hosting-company-data input.small-fld, .server-location-data input.small-fld {
     width: 100px;
 }
 
-.hosting-company-data input {
+.hosting-company-data input, .server-location-data input {
     font-size: 16px;
     padding: 5px;
     flex: 1;
     width: 100%;
 }
+
+
+
+
+
+.server-locations-listing {
+    border-collapse: collapse;
+    background: #fff;
+}
+.server-locations-listing thead tr {
+    border-bottom: 2px solid #ccc;
+}
+
+.server-locations-listing tbody tr {
+    border-bottom: 1px solid #ccc;
+}
+.server-locations-listing tr:nth-child(even) {
+    background: #ddd;
+}
+
+.server-locations-listing th, .server-locations-listing td {
+    text-align: center;
+    padding: 8px;
+}
+.server-locations-listing a {
+    cursor: pointer;
+}

WWW_DATA/wp-content/themes/hostingreviews/assets/js/admin.js

@@ -146,6 +146,78 @@ $(document).ready(function () {
     };
 
     populateTable();
+
+
+
+
+
+    // Hosting Server Locations
+
+    var serverLocationsBody = document.getElementById('server-locations-body');
+    var serverLocationsDataHidden = document.getElementById('vq-hosting-server-locations');
+    var serverLocationEl = document.getElementById('server-location-field');
+    var serverDomainEl = document.getElementById('server-domain-field');
+    var serverLocationInEdit = -1;
+
+
+
+    saveServerLocation = function () {
+        var serverLocation = {};
+        serverLocation.location = serverLocationEl.value;
+        serverLocation.domain = serverDomainEl.value;
+
+        if (!serverLocation.location || !serverLocation.domain) {
+            return alert('Domain & Location is required.');
+        }
+
+        if (serverLocationInEdit > -1) {
+            serverLocationsDetails[serverLocationInEdit] = serverLocation;
+        } else {
+            serverLocationsDetails.push(serverLocation);
+        }
+        populateServerLocationsTable();
+    };
+
+
+    populateServerLocationsTable = function() {
+        serverLocationsBody.innerHTML = '';
+
+        serverLocationsDetails.forEach(function(serverLoc, index) {
+            var row = `<tr>`;
+            row += `<td>${serverLoc.location}</td>`;
+            row += `<td>${serverLoc.domain}</td>`;
+            row += `<td><a onclick="editServerLocation(${index})">Edit</a> <a class="ml-2 button-link-delete" onclick="removeServerLocation(${index})">Remove</a></td>`;
+            row += `</tr>`;
+
+            serverLocationsBody.innerHTML += row;
+        });
+        serverLocationsDataHidden.value = JSON.stringify(serverLocationsDetails);
+        resetChanges();
+    };
+
+    editServerLocation = function(index) {
+        serverLocationInEdit = index;
+        const locationInEdit = serverLocationsDetails[serverLocationInEdit];
+        serverLocationEl.value = locationInEdit.location;
+        serverDomainEl.value = locationInEdit.domain;
+    };
+
+    removeServerLocation = function(index) {
+        if (confirm('Are you sure you want to remove the info of this server location?')) {
+            serverLocationsDetails.splice(index, 1);
+            populateServerLocationsTable();
+        }
+    };
+
+
+    resetServerLocationsChanges = function () {
+        serverLocationInEdit = -1;
+        serverLocationEl.value = '';
+        serverDomainEl.value = '';
+    };
+
+
+    populateServerLocationsTable();
 });