update #6 issue

tramyardg · Sep 4, 2017 · 679b452 · 679b452
1 parent 008dc5c
commit 679b452
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 16 deletions.
diff --git a/admin/inventory.php b/admin/inventory.php
@@ -109,19 +109,62 @@
  table tbody tr td input, select {
  margin: 2px 0 2px 3px;
  }
- #vehicle-table {
- /*width: 80%;*/
- /*text-align: left;*/
- /*margin-left: 0;*/
- /*margin-right: 0;*/
+ /* Center the loader */
+ .loader {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ z-index: 1;
+ width: 150px;
+ height: 150px;
+ margin: -75px 0 0 -75px;
+ border: 16px solid #f3f3f3;
+ border-radius: 50%;
+ width: 120px;
+ height: 120px;
+ -webkit-animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
+
+ border-top: 16px solid blue;
+ border-right: 16px solid green;
+ border-bottom: 16px solid red;
+ display: none;
  }
- #add-new-car-btn {
- /*margin-top: 15px;*/
+
+ @-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); }
+ }
+
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+ /* Add animation to "page content" */
+ .animate-bottom {
+ position: relative;
+ -webkit-animation-name: animatebottom;
+ -webkit-animation-duration: 1s;
+ animation-name: animatebottom;
+ animation-duration: 1s
+ }
+
+ @-webkit-keyframes animatebottom {
+ from { bottom:-100px; opacity:0 }
+ to { bottom:0px; opacity:1 }
  }
+
+ @keyframes animatebottom {
+ from{ bottom:-100px; opacity:0 }
+ to{ bottom:0; opacity:1 }
+ }
+
  </style>
 </head>
 <body>
 <div id="main-wrapper">
+ <div class="loader"></div>
  <div class="template-page-wrapper">
 
  <div class="templatemo-content-wrapper">
@@ -135,18 +178,15 @@
  <p>Here goes vehicles from the inventory.</p>
 
  <?php if(isset($isAddedCondition) && $isAddedCondition === 1) {?>
- <script>alert("1 row affected. The page will reload.");</script>
+ <div class="loader show"></div>
  <?php header("refresh: 1; url=inventory.php"); } ?>
-
  <?php if(isset($isDeletedPhoto) && $isDeletedPhoto === 1) {?>
- <script>alert("1 row affected. The page will reload.");</script>
+ <div class="loader show"></div>
  <?php header("refresh: 1; url=inventory.php"); } ?>
-
  <?php if(isset($isUpdatedCondition) && $isUpdatedCondition === 1) {?>
- <script>alert("1 row affected. The page will reload.");</script>
+ <div class="loader show"></div>
  <?php header("refresh: 1; url=inventory.php"); } ?>
 
-
  <!-- car table -->
  <div class="row">
  <div class="col-md-12">

diff --git a/admin/js/routine/car-actions.js b/admin/js/routine/car-actions.js
@@ -34,6 +34,8 @@ var CarActions = (function () {
 
  var updateCarInfo_RadioSelect = {};
 
+ var loader = {};
+
 
  return {
 
@@ -59,6 +61,8 @@ var CarActions = (function () {
  getPhotosByCarIdFn = null;
  updateCarInfo_RadioSelect = null;
 
+ loader = $('.loader');
+
  // call the event driven functions here
  this.bindCarActions();
  },
@@ -74,19 +78,23 @@ var CarActions = (function () {
  // on clicked Yes
  deleteConfirmBtnSel.click(function () {
  confirmDeleteRecordSel.modal('hide');
+ loader.css('display', 'block');
  $.ajax({
  url: "?action=delete",
  type: "get",
  data: "id=" + dataId,
  dataType: "json",
  success: function(data) {
  if(data === 1) {
- alert('1 row affected.');
  window.location.reload(true);
  } else {
  alert('Something is wrong. Please try again later.');
  }
  }
+ }).done(function () {
+ loader.css('display', 'none');
+ }).fail(function () {
+ alert('Error. Please try again later');
  });
  });
  return false; //for good measure
@@ -148,7 +156,7 @@ var CarActions = (function () {
  for(var i = 0; i < thumbLength; i++) {
  filesDataArray.push(thumbImageSel.eq(i).attr('src'));
  }
-
+ loader.css('display', 'block');
  $.ajax({ // for uploading photos
  url: "?action=uploadPhotos&id="+carId,
  type: "post",
@@ -157,12 +165,15 @@ var CarActions = (function () {
  success: function(data) {
  console.log(data);
  if(data === 1) {
- alert('1 row affected.');
  window.location.reload(true);
  } else {
  alert('Something is wrong. Please try again later.');
  }
  }
+ }).done(function () {
+ loader.css('display', 'none');
+ }).fail(function () {
+ alert('Error. Please try again later');
  });
 
  e.preventDefault();
@@ -201,6 +212,10 @@ var CarActions = (function () {
  displayImagesOfThisCarSel.append("<p>No photos so far</p>");
  }
  }
+ }).done(function () {
+ loader.has('loading-photos').css('display', 'none');
+ }).fail(function () {
+ alert('Error. Please try again later');
  });
 
  };