From e74828d03fba33e3443d0091c81c2fee1098f01b Mon Sep 17 00:00:00 2001
From: Thein Lin Kyaw <theinlinkyaw@code2lab.com>
Date: Thu, 6 Jul 2023 16:52:56 +0630
Subject: [PATCH] second display image slider fit center

---
 .../second_display/_second_display.html.erb   |  84 ++++++-----
 .../foodcourt/second_display/_slider.html.erb | 105 +-------------
 .../foodcourt/second_display/index.html.erb   | 129 ++++++++++++++++-
 .../second_display/_second_display.html.erb   |  84 ++++++-----
 .../origami/second_display/_slider.html.erb   | 105 +-------------
 .../origami/second_display/index.html.erb     | 133 ++++++++++++++++--
 6 files changed, 333 insertions(+), 307 deletions(-)

diff --git a/app/views/foodcourt/second_display/_second_display.html.erb b/app/views/foodcourt/second_display/_second_display.html.erb
index c09d6c4c..82b87742 100644
--- a/app/views/foodcourt/second_display/_second_display.html.erb
+++ b/app/views/foodcourt/second_display/_second_display.html.erb
@@ -1,9 +1,8 @@
 <div class="row clearfix">
   <div class="col-lg-6 col-md-6 col-sm-6">
-    
-      <div class="card">
-        <div class="card-block">
-          <div class="card-text" >
+    <div class="card">
+      <div class="card-block">
+        <div class="card-text" >
           <div id="order-detail-slimscroll" data-height="160">
             <table class="table table-striped second_display_items" id="order-items-table">
               <thead>
@@ -19,49 +18,46 @@
 
               </tbody>
             </table>
-            </div>
           </div>
         </div>
-          <div class="card-footer">
-                <table class="table" border="0">
-                  <tr>
-                    <td class="charges-name"><strong>Sub Total:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
-                  </tr>
-                  <tr>
-                    <td class="charges-name"><strong>Discount Amount:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
-                  </tr>
-                  <tr>
-                    <td class="charges-name"><strong>Tax Amount:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
-                  </tr>
-                  <tr>
-                    <td class="charges-name"><strong>Grand:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
-                  </tr>
-                </table>
-        </div>
-      </div>  
-    
-  </div>
-  <div class="col-lg-6 col-md-6 col-sm-6">
-    <div id="wowslider-container" style="max-width: 100%;">
-      <div class="ws_images full_screen">
-        <% @display_images.each do |p| %>
-          <%= image_tag "#{p.image}", :alt => "rss feed"%>
-          <% break %>
-        <% end %>
+      </div>
+      <div class="card-footer">
+        <table class="table" border="0">
+          <tr>
+            <td class="charges-name"><strong>Sub Total:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
+          </tr>
+          <tr>
+            <td class="charges-name"><strong>Discount Amount:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
+          </tr>
+          <tr>
+            <td class="charges-name"><strong>Tax Amount:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
+          </tr>
+          <tr>
+            <td class="charges-name"><strong>Grand:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
+  <div class="col-lg-6 col-md-6 col-sm-6" style="display: block;">
+    <section class="slideshow-container">
+      <% @display_images.each do |p| %>
+      <div class="mySlides">
+        <%= image_tag "#{p.image}" %>
+      </div>
+      <% end %>
+    </section>
+  </div>
 </div>
-
diff --git a/app/views/foodcourt/second_display/_slider.html.erb b/app/views/foodcourt/second_display/_slider.html.erb
index bdd905e8..25bc1f4c 100644
--- a/app/views/foodcourt/second_display/_slider.html.erb
+++ b/app/views/foodcourt/second_display/_slider.html.erb
@@ -1,106 +1,7 @@
-
-<style>
-* {box-sizing: border-box;}
-body {font-family: Verdana, sans-serif; 
-  overflow: hidden;}
-.mySlides {
-  position: absolute;
-}
-img {vertical-align: middle;}
-
-/* Slideshow container */
-.slideshow-container {
-  max-width: 1000px;
-  position: relative;
-  margin: auto;
-}
-
-/* Caption text */
-.text {
-  color: #f2f2f2;
-  font-size: 15px;
-  padding: 8px 12px;
-  position: absolute;
-  bottom: 8px;
-  width: 100%;
-  text-align: center;
-}
-
-/* Number text (1/3 etc) */
-.numbertext {
-  color: #f2f2f2;
-  font-size: 12px;
-  padding: 8px 12px;
-  position: absolute;
-  top: 0;
-}
-
-/* Fading animation */
-.slide-in {
-  animation-name: slide-in;
-  animation-duration: 2s; /* Adjust the duration as per your preference */
-  animation-fill-mode: forwards;
-}
-
-.slide-out {
-  animation-name: slide-out;
-  animation-duration: 2s; /* Adjust the duration as per your preference */
-  animation-fill-mode: forwards;
-}
-
-@keyframes slide-in {
-  0% { transform: translateX(100%); }
-  100% { transform: translateX(0%); }
-}
-
-@keyframes slide-out {
-  0% { transform: translateX(0%); }
-  50% { opacity: 1; }
-  100% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-/* On smaller screens, decrease text size */
-@media only screen and (max-width: 300px) {
-  .text {font-size: 11px}
-}
-</style>
-</head>
-<body>
-
 <div class="slideshow-container">
   <% @display_images.each do |p| %>
-    <div class="mySlides slide-out">
-      <%= image_tag "#{p.image}", :class=> "w-100"%>
-    </div>
+  <div class="mySlides">
+    <%= image_tag "#{p.image}" %>
+  </div>
   <% end %>
 </div>
-<script>
-let slideIndex = 0;
-showSlides();
-
-function showSlides() {
-  let slides = document.getElementsByClassName("mySlides");
-  let dots = document.getElementsByClassName("dot");
-
-  
-  for (let i = 0; i < slides.length; i++) {
-  slides[i].className = slides[i].className.replace("slide-in", "slide-out");
-  }
-
-  slideIndex++;
-  if (slideIndex > slides.length) {
-    slideIndex = 1;
-  }
-
-  for (let i = 0; i < dots.length; i++) {
-    dots[i].className = dots[i].className.replace(" active", "");
-  }
-
-  slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
-
-  setTimeout(showSlides, 4000); // Change image every 5 seconds
-}
-</script>
diff --git a/app/views/foodcourt/second_display/index.html.erb b/app/views/foodcourt/second_display/index.html.erb
index 5b4ad7f0..ea545ae8 100644
--- a/app/views/foodcourt/second_display/index.html.erb
+++ b/app/views/foodcourt/second_display/index.html.erb
@@ -1,4 +1,94 @@
-<div class="container-fluid" style="margin-top:-65px;">
+<style>
+  * {box-sizing: border-box;}
+  body {
+    font-family: Verdana, sans-serif;
+    overflow: hidden;
+  }
+
+  .mySlides {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: none;
+  }
+
+  .mySlides img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+  }
+
+  /* Slideshow container */
+  .slideshow-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+  }
+
+  /* Caption text */
+  .text {
+    color: #f2f2f2;
+    font-size: 15px;
+    padding: 8px 12px;
+    position: absolute;
+    bottom: 8px;
+    width: 100%;
+    text-align: center;
+  }
+
+  /* Number text (1/3 etc) */
+  .numbertext {
+    color: #f2f2f2;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+  }
+
+  /* Fading animation */
+  .slide-in {
+    animation-name: slide-in;
+    animation-duration: 2s; /* Adjust the duration as per your preference */
+    animation-fill-mode: forwards;
+    display: block;
+  }
+
+  .slide-out {
+    animation-name: slide-out;
+    animation-duration: 2s; /* Adjust the duration as per your preference */
+    animation-fill-mode: forwards;
+    display: block;
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0%);
+    }
+  }
+
+  @keyframes slide-out {
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  /* On smaller screens, decrease text size */
+  @media only screen and (max-width: 300px) {
+    .text {font-size: 11px}
+  }
+</style>
+
+<div class="container-fluid">
     <button type="button" class="hidden" id="s_reload">Reload</button>
     <div class="slider" id="second_display_slider">
     	<%= render 'slider' %>
@@ -8,13 +98,40 @@
     	<%= render 'second_display' %>
     </div>
 </div>
+
 <script type="text/javascript">
 	$(document).ready(function () {
-      //html font-size for second display till 35px!
-      // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
+    //html font-size for second display till 35px!
+    // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
 
-      $('#s_reload').on('click', function () {
-      window.location.href = '/foodcourt/second_display';
-      });
+    $('#s_reload').on('click', function () {
+    window.location.href = '/origami/second_display';
     });
+  });
+
+  showSlides("second_display_slider");
+  showSlides("second_display_items");
+
+  function showSlides(sliderId) {
+    let slider = document.getElementById(sliderId);
+    let slides = slider.getElementsByClassName("mySlides");
+
+    let slideIndex = slider.dataset.slideIndex;
+
+    slideIndex++;
+    if (!slideIndex || slideIndex >= slides.length) {
+      slideIndex = 0;
+    }
+
+    for (let i = 0; i < slides.length; i++) {
+      slides[i].className = slides[i].className.replace("slide-in", "slide-out");
+    }
+
+    console.log(slideIndex);
+    slides[slideIndex].classList.remove("slide-out");
+    slides[slideIndex].classList.add("slide-in");
+
+    slider.dataset.slideIndex = slideIndex;
+    setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
+  }
 </script>
diff --git a/app/views/origami/second_display/_second_display.html.erb b/app/views/origami/second_display/_second_display.html.erb
index c09d6c4c..82b87742 100644
--- a/app/views/origami/second_display/_second_display.html.erb
+++ b/app/views/origami/second_display/_second_display.html.erb
@@ -1,9 +1,8 @@
 <div class="row clearfix">
   <div class="col-lg-6 col-md-6 col-sm-6">
-    
-      <div class="card">
-        <div class="card-block">
-          <div class="card-text" >
+    <div class="card">
+      <div class="card-block">
+        <div class="card-text" >
           <div id="order-detail-slimscroll" data-height="160">
             <table class="table table-striped second_display_items" id="order-items-table">
               <thead>
@@ -19,49 +18,46 @@
 
               </tbody>
             </table>
-            </div>
           </div>
         </div>
-          <div class="card-footer">
-                <table class="table" border="0">
-                  <tr>
-                    <td class="charges-name"><strong>Sub Total:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
-                  </tr>
-                  <tr>
-                    <td class="charges-name"><strong>Discount Amount:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
-                  </tr>
-                  <tr>
-                    <td class="charges-name"><strong>Tax Amount:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
-                  </tr>
-                  <tr>
-                    <td class="charges-name"><strong>Grand:</strong></td>
-                    <td></td>
-                    <td></td>
-                    <td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
-                  </tr>
-                </table>
-        </div>
-      </div>  
-    
-  </div>
-  <div class="col-lg-6 col-md-6 col-sm-6">
-    <div id="wowslider-container" style="max-width: 100%;">
-      <div class="ws_images full_screen">
-        <% @display_images.each do |p| %>
-          <%= image_tag "#{p.image}", :alt => "rss feed"%>
-          <% break %>
-        <% end %>
+      </div>
+      <div class="card-footer">
+        <table class="table" border="0">
+          <tr>
+            <td class="charges-name"><strong>Sub Total:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
+          </tr>
+          <tr>
+            <td class="charges-name"><strong>Discount Amount:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
+          </tr>
+          <tr>
+            <td class="charges-name"><strong>Tax Amount:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
+          </tr>
+          <tr>
+            <td class="charges-name"><strong>Grand:</strong></td>
+            <td></td>
+            <td></td>
+            <td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
+  <div class="col-lg-6 col-md-6 col-sm-6" style="display: block;">
+    <section class="slideshow-container">
+      <% @display_images.each do |p| %>
+      <div class="mySlides">
+        <%= image_tag "#{p.image}" %>
+      </div>
+      <% end %>
+    </section>
+  </div>
 </div>
-
diff --git a/app/views/origami/second_display/_slider.html.erb b/app/views/origami/second_display/_slider.html.erb
index bdd905e8..25bc1f4c 100644
--- a/app/views/origami/second_display/_slider.html.erb
+++ b/app/views/origami/second_display/_slider.html.erb
@@ -1,106 +1,7 @@
-
-<style>
-* {box-sizing: border-box;}
-body {font-family: Verdana, sans-serif; 
-  overflow: hidden;}
-.mySlides {
-  position: absolute;
-}
-img {vertical-align: middle;}
-
-/* Slideshow container */
-.slideshow-container {
-  max-width: 1000px;
-  position: relative;
-  margin: auto;
-}
-
-/* Caption text */
-.text {
-  color: #f2f2f2;
-  font-size: 15px;
-  padding: 8px 12px;
-  position: absolute;
-  bottom: 8px;
-  width: 100%;
-  text-align: center;
-}
-
-/* Number text (1/3 etc) */
-.numbertext {
-  color: #f2f2f2;
-  font-size: 12px;
-  padding: 8px 12px;
-  position: absolute;
-  top: 0;
-}
-
-/* Fading animation */
-.slide-in {
-  animation-name: slide-in;
-  animation-duration: 2s; /* Adjust the duration as per your preference */
-  animation-fill-mode: forwards;
-}
-
-.slide-out {
-  animation-name: slide-out;
-  animation-duration: 2s; /* Adjust the duration as per your preference */
-  animation-fill-mode: forwards;
-}
-
-@keyframes slide-in {
-  0% { transform: translateX(100%); }
-  100% { transform: translateX(0%); }
-}
-
-@keyframes slide-out {
-  0% { transform: translateX(0%); }
-  50% { opacity: 1; }
-  100% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-/* On smaller screens, decrease text size */
-@media only screen and (max-width: 300px) {
-  .text {font-size: 11px}
-}
-</style>
-</head>
-<body>
-
 <div class="slideshow-container">
   <% @display_images.each do |p| %>
-    <div class="mySlides slide-out">
-      <%= image_tag "#{p.image}", :class=> "w-100"%>
-    </div>
+  <div class="mySlides">
+    <%= image_tag "#{p.image}" %>
+  </div>
   <% end %>
 </div>
-<script>
-let slideIndex = 0;
-showSlides();
-
-function showSlides() {
-  let slides = document.getElementsByClassName("mySlides");
-  let dots = document.getElementsByClassName("dot");
-
-  
-  for (let i = 0; i < slides.length; i++) {
-  slides[i].className = slides[i].className.replace("slide-in", "slide-out");
-  }
-
-  slideIndex++;
-  if (slideIndex > slides.length) {
-    slideIndex = 1;
-  }
-
-  for (let i = 0; i < dots.length; i++) {
-    dots[i].className = dots[i].className.replace(" active", "");
-  }
-
-  slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
-
-  setTimeout(showSlides, 4000); // Change image every 5 seconds
-}
-</script>
diff --git a/app/views/origami/second_display/index.html.erb b/app/views/origami/second_display/index.html.erb
index 7e359ab4..ea545ae8 100644
--- a/app/views/origami/second_display/index.html.erb
+++ b/app/views/origami/second_display/index.html.erb
@@ -1,22 +1,137 @@
-<div class="container-fluid" style="margin-top:-65px;">
+<style>
+  * {box-sizing: border-box;}
+  body {
+    font-family: Verdana, sans-serif;
+    overflow: hidden;
+  }
+
+  .mySlides {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: none;
+  }
+
+  .mySlides img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+  }
+
+  /* Slideshow container */
+  .slideshow-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+  }
+
+  /* Caption text */
+  .text {
+    color: #f2f2f2;
+    font-size: 15px;
+    padding: 8px 12px;
+    position: absolute;
+    bottom: 8px;
+    width: 100%;
+    text-align: center;
+  }
+
+  /* Number text (1/3 etc) */
+  .numbertext {
+    color: #f2f2f2;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+  }
+
+  /* Fading animation */
+  .slide-in {
+    animation-name: slide-in;
+    animation-duration: 2s; /* Adjust the duration as per your preference */
+    animation-fill-mode: forwards;
+    display: block;
+  }
+
+  .slide-out {
+    animation-name: slide-out;
+    animation-duration: 2s; /* Adjust the duration as per your preference */
+    animation-fill-mode: forwards;
+    display: block;
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0%);
+    }
+  }
+
+  @keyframes slide-out {
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  /* On smaller screens, decrease text size */
+  @media only screen and (max-width: 300px) {
+    .text {font-size: 11px}
+  }
+</style>
+
+<div class="container-fluid">
     <button type="button" class="hidden" id="s_reload">Reload</button>
     <div class="slider" id="second_display_slider">
     	<%= render 'slider' %>
     </div>
-    
+
     <div class="item hidden" id="second_display_items">
     	<%= render 'second_display' %>
     </div>
 </div>
+
 <script type="text/javascript">
 	$(document).ready(function () {
-      //html font-size for second display till 35px!
-      // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
+    //html font-size for second display till 35px!
+    // document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
 
-      $('#s_reload').on('click', function () {
-      window.location.href = '/origami/second_display';
-      });
+    $('#s_reload').on('click', function () {
+    window.location.href = '/origami/second_display';
     });
+  });
+
+  showSlides("second_display_slider");
+  showSlides("second_display_items");
+
+  function showSlides(sliderId) {
+    let slider = document.getElementById(sliderId);
+    let slides = slider.getElementsByClassName("mySlides");
+
+    let slideIndex = slider.dataset.slideIndex;
+
+    slideIndex++;
+    if (!slideIndex || slideIndex >= slides.length) {
+      slideIndex = 0;
+    }
+
+    for (let i = 0; i < slides.length; i++) {
+      slides[i].className = slides[i].className.replace("slide-in", "slide-out");
+    }
+
+    console.log(slideIndex);
+    slides[slideIndex].classList.remove("slide-out");
+    slides[slideIndex].classList.add("slide-in");
+
+    slider.dataset.slideIndex = slideIndex;
+    setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
+  }
 </script>
-
-