Commit 10b71909 by Muhammad Usman

images added

parent 4dde1942
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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
}
......
......@@ -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;
}
......@@ -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();
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment