From 2fb4a85295472feafba0d3628ac4c0a06fc7a865 Mon Sep 17 00:00:00 2001
From: NyanLinHtut <nyanlinhtut@code2lab.com>
Date: Wed, 29 May 2019 17:32:53 +0630
Subject: [PATCH] mobile view

---
 app/assets/stylesheets/application.scss  |  11 +-
 app/assets/stylesheets/login.scss        |  10 +-
 app/views/layouts/_left_sidebar.html.erb | 285 +++++++++++++++++------
 app/views/layouts/login.html.erb         |  38 +--
 4 files changed, 246 insertions(+), 98 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index b1718ee2..f3cd1157 100755
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -119,9 +119,14 @@ i.logout_icon{
   margin-right: 15px;
   color:#fff !important;
  # background-color: green !important;
-} 
+}
 
 .payment-btn-box {
-  width: 130px; 
+  width: 130px;
   height: 50px;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 785px) {
+  #setting{ display: none;}
+  .menu-up{ display: none;}
+}
diff --git a/app/assets/stylesheets/login.scss b/app/assets/stylesheets/login.scss
index f156d4d3..3d2504d0 100755
--- a/app/assets/stylesheets/login.scss
+++ b/app/assets/stylesheets/login.scss
@@ -22,7 +22,7 @@
   display: block;
   width: 100%;
   text-align: center;
-  color: #000; 
+  color: #000;
   margin-top: -5px;
 }
 
@@ -117,4 +117,10 @@
 
 .box {
   margin : 0 -60px 0 -60px;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 785px) {
+  .login_pwd{width: 90%;}
+  .login_ent{width: 10%;}
+
+}
diff --git a/app/views/layouts/_left_sidebar.html.erb b/app/views/layouts/_left_sidebar.html.erb
index 21b32859..d9f12423 100644
--- a/app/views/layouts/_left_sidebar.html.erb
+++ b/app/views/layouts/_left_sidebar.html.erb
@@ -2,12 +2,12 @@
 <aside id="leftsidebar" class="sidebar">
 	<!-- User Info -->
 	<!-- <div class="user-info">
-		<div class="image">			
+		<div class="image">
 			<img src="public/image/user.png" width="48" height="48" alt="User" />
 		</div>
 		<div class="info-container">
 			<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-			current_login_employee.name 			
+			current_login_employee.name
 			</div>
 			 <div class="email">john.doe@example.com</div>
 			<div class="btn-group user-helper-dropdown">
@@ -21,7 +21,7 @@
 					<li role="seperator" class="divider"></li>
 					<li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>
 				</ul>
-			</div> 
+			</div>
 		</div>
 	</div> -->
 	<!-- #User Info -->
@@ -42,7 +42,7 @@
 				</a>
 			</li>
 			<% if can? :menage, OrderQueueStation %>
-			<li>
+			<li class="menu-up">
 				<a href="<%= oqs_root_path %>">
 					<i class="material-icons">room_service</i>
 					<span><%= t :oqs %></span>
@@ -50,8 +50,8 @@
 			</li>
 			<% end %>
 			<% if can? :index, :home %>
-				<% if current_login_employee.role != "kitchen" %> 
-				<li>
+				<% if current_login_employee.role != "kitchen" %>
+				<li class="menu-up">
 					<a href="<%= origami_dashboard_path %>">
 						<i class="material-icons">monetization_on</i>
 						<span><%= t :origami %></span>
@@ -60,27 +60,27 @@
 				<% end %>
 			<% end %>
 			<% if can? :menage, Customer %>
-			<li>
+			<li class="menu-up">
 				<a href="javascript:void(0);" class="menu-toggle">
 					<i class="material-icons">widgets</i>
 					<span><%= t :crm %></span>
 				</a>
 				<ul class="ml-menu">
-					
+
 						<li>
 							<a href="<%= crm_customers_path %>"><%= t :customer %></a>
 						</li>
-					
+
 					<% if can? :menage, DiningQueue %>
 						<li>
 							<a href="<%= crm_dining_queues_path %>"><%= t :queue %></a>
-						</li>	
-					<% end %>	
+						</li>
+					<% end %>
 				</ul>
 			</li>
-			<% end %>	
+			<% end %>
 			<% if can? :menage, Inventory %>
-			<li>
+			<li class="menu-up">
 				<a href="<%= inventory_path %>">
 					<i class="material-icons">store</i>
 					<span><%= t :inventory %></span>
@@ -88,66 +88,9 @@
 			</li>
 			<%end%>
 			<li class="header"><%= t :backend %></li>
-			<li>
-				<a href="javascript:void(0);" class="menu-toggle">
-					<i class="material-icons">widgets</i>
-					<span><%= t :transactions %></span>
-				</a>
-				<ul class="ml-menu">
-				    <% if can? :menage, Booking %>
-						<li>
-							<a href="<%= transactions_bookings_path %>"><%= t :bookings %></a>
-						</li>
-					<% end %>
-				    <% if can? :menage, Order %>
-						<li>
-							<a href="<%= transactions_orders_path %>"><%= t :orders %></a>
-						</li>
-					<% end %>
-					<% if can? :menage, Sale %>
-						<li>
-							<a href="<%= transactions_sales_path %>"><%= t :sale %></a>
-						</li>
-					<% end %>
-					<% if can? :menage, Sale %>
-						<li>
-							<a href="<%= transactions_credit_notes_path %>"><%= (t :credit) %></a>
-						</li>
-					<% end %>
-					<% if can? :menage, Sale %>
-						<li>
-							<a href="<%= transactions_shift_sales_path %>"><%= (t :shiftsale) %></a>
-						</li>
-					<% end %>
-					<% if can? :menage, Survey %>
-						<li>
-							<a href="<%= transactions_surveys_path %>"><%= t("views.right_panel.detail.survey") %></a>
-						</li>
-					<% end %>
-					<% if can? :manage, OrderReservation %>
-						<% if order_reservation %>
-							<li>
-								<a href="<%= transactions_order_reservations_path %>"><%= t("views.right_panel.detail.order_reservation") %></a>
-							</li>
-						<% end %>
-					<% end %>
-					<% if can? :manage, Sale %>
-						<% if bank_integration %>
-							<li>
-								<a href="<%= transactions_card_sale_trans_path %>"><%= t :cb_payments %></a>
-							</li>
-						<% end %>
-					<% end %>
-					<% if can? :manage, Sale %>
-						<% if bank_integration %>
-							<li>
-								<a href="<%= transactions_card_settle_trans_path %>"><%= t :cb_settlement %></a>
-							</li>
-						<% end %>
-					<% end %>
-				</ul>
-			</li>
-			<% if can? :index, :dailysale %> 
+			<% device = request.user_agent %>
+			<% if device.include? 'Mobile' %>
+			<% if can? :index, :dailysale %>
 			<li>
 				<a href="javascript:void(0);" class="menu-toggle">
 					<i class="material-icons">assessment</i>
@@ -207,8 +150,193 @@
 						</li>
 					<% end %>
 				</ul>
-			</li>	
+			</li>
 			<%end%>
+
+			<li>
+				<a href="javascript:void(0);" class="menu-toggle">
+					<i class="material-icons">widgets</i>
+					<span><%= t :transactions %></span>
+				</a>
+				<ul class="ml-menu">
+				    <% if can? :menage, Booking %>
+						<li>
+							<a href="<%= transactions_bookings_path %>"><%= t :bookings %></a>
+						</li>
+					<% end %>
+				    <% if can? :menage, Order %>
+						<li>
+							<a href="<%= transactions_orders_path %>"><%= t :orders %></a>
+						</li>
+					<% end %>
+					<% if can? :menage, Sale %>
+						<li>
+							<a href="<%= transactions_sales_path %>"><%= t :sale %></a>
+						</li>
+					<% end %>
+					<% if can? :menage, Sale %>
+						<li>
+							<a href="<%= transactions_credit_notes_path %>"><%= (t :credit) %></a>
+						</li>
+					<% end %>
+					<% if can? :menage, Sale %>
+						<li>
+							<a href="<%= transactions_shift_sales_path %>"><%= (t :shiftsale) %></a>
+						</li>
+					<% end %>
+					<% if can? :menage, Survey %>
+						<li>
+							<a href="<%= transactions_surveys_path %>"><%= t("views.right_panel.detail.survey") %></a>
+						</li>
+					<% end %>
+					<% if can? :manage, OrderReservation %>
+						<% if order_reservation %>
+							<li>
+								<a href="<%= transactions_order_reservations_path %>"><%= t("views.right_panel.detail.order_reservation") %></a>
+							</li>
+						<% end %>
+					<% end %>
+					<% if can? :manage, Sale %>
+						<% if bank_integration %>
+							<li>
+								<a href="<%= transactions_card_sale_trans_path %>"><%= t :cb_payments %></a>
+							</li>
+						<% end %>
+					<% end %>
+					<% if can? :manage, Sale %>
+						<% if bank_integration %>
+							<li>
+								<a href="<%= transactions_card_settle_trans_path %>"><%= t :cb_settlement %></a>
+							</li>
+						<% end %>
+					<% end %>
+				</ul>
+			</li>
+
+			<%else%>
+			<li id="left-menu">
+			  <a href="javascript:void(0);" class="menu-toggle">
+			    <i class="material-icons">widgets</i>
+			    <span><%= t :transactions %></span>
+			  </a>
+			  <ul class="ml-menu">
+			      <% if can? :menage, Booking %>
+			      <li>
+			        <a href="<%= transactions_bookings_path %>"><%= t :bookings %></a>
+			      </li>
+			    <% end %>
+			      <% if can? :menage, Order %>
+			      <li>
+			        <a href="<%= transactions_orders_path %>"><%= t :orders %></a>
+			      </li>
+			    <% end %>
+			    <% if can? :menage, Sale %>
+			      <li>
+			        <a href="<%= transactions_sales_path %>"><%= t :sale %></a>
+			      </li>
+			    <% end %>
+			    <% if can? :menage, Sale %>
+			      <li>
+			        <a href="<%= transactions_credit_notes_path %>"><%= (t :credit) %></a>
+			      </li>
+			    <% end %>
+			    <% if can? :menage, Sale %>
+			      <li>
+			        <a href="<%= transactions_shift_sales_path %>"><%= (t :shiftsale) %></a>
+			      </li>
+			    <% end %>
+			    <% if can? :menage, Survey %>
+			      <li>
+			        <a href="<%= transactions_surveys_path %>"><%= t("views.right_panel.detail.survey") %></a>
+			      </li>
+			    <% end %>
+			    <% if can? :manage, OrderReservation %>
+			      <% if order_reservation %>
+			        <li>
+			          <a href="<%= transactions_order_reservations_path %>"><%= t("views.right_panel.detail.order_reservation") %></a>
+			        </li>
+			      <% end %>
+			    <% end %>
+			    <% if can? :manage, Sale %>
+			      <% if bank_integration %>
+			        <li>
+			          <a href="<%= transactions_card_sale_trans_path %>"><%= t :cb_payments %></a>
+			        </li>
+			      <% end %>
+			    <% end %>
+			    <% if can? :manage, Sale %>
+			      <% if bank_integration %>
+			        <li>
+			          <a href="<%= transactions_card_settle_trans_path %>"><%= t :cb_settlement %></a>
+			        </li>
+			      <% end %>
+			    <% end %>
+			  </ul>
+			</li>
+			<% if can? :index, :dailysale %>
+			<li>
+			  <a href="javascript:void(0);" class="menu-toggle">
+			    <i class="material-icons">assessment</i>
+			    <span><%= t :reports %></span>
+			  </a>
+			  <ul class="ml-menu">
+			    <li>
+			      <a href="<%= reports_dailysale_index_path %>">Daily Sales</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_saleitem_index_path %>">Sale Items</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_product_sale_index_path %>">Product Sale</a>
+			    </li>
+			    <% if order_reservation %>
+			    <li>
+			      <a href="<%= reports_order_reservation_index_path %>"><%= t("views.right_panel.detail.order_reservation") %></a>
+			    </li>
+			    <% end %>
+			    <li>
+			      <a href="<%= reports_receipt_no_index_path %>">Receipt</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_receipt_no_detail_index_path %>">Receipt Detail</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_shiftsale_index_path %>">Shift Sales</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_credit_payment_index_path %>">Credit Sales</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_void_sale_index_path %>">Void Sales</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_waste_and_spoilage_index_path %>">Wastes & Spoilages</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_payment_method_index_path %>">Payment Method</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_commission_index_path %>">Commission</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_induty_index_path %>">Induty</a>
+			    </li>
+			    <li>
+			      <a href="<%= reports_stock_check_index_path %>">Stock Check</a>
+			    </li>
+			    <% if bank_integration %>
+			      <li>
+			        <a href="<%= reports_card_sale_tran_index_path %>">CB Payments</a>
+			      </li>
+			      <li>
+			        <a href="<%= reports_card_settle_tran_index_path %>">CB Settlement</a>
+			      </li>
+			    <% end %>
+			  </ul>
+			</li>
+			<% end %>
+		<% end %>
+		<div id="setting" >
 			<li class="header"><%= t :settings %></li>
 			<% if can? :menage, Zone %>
 			<li>
@@ -232,7 +360,7 @@
 					<i class="material-icons col-indigo">donut_large</i>
 					<span><%= t :oqs %></span>
 				</a>
-			</li>	
+			</li>
 			<% end %>
 			<% if can? :menage, Employee %>
 				<li>
@@ -256,7 +384,7 @@
 					<i class="material-icons col-pupple">donut_large</i>
 					<span><%= t :printer %></span>
 				</a>
-			</li>			
+			</li>
 			<% end %>
 			<% if can? :menage, TaxProfile %>
 				<li>
@@ -312,8 +440,11 @@
 					</a>
 				</li>
 			<% end %>
+		</div>
 		</ul>
 	</div>
+
+
 	<!-- #Menu -->
 	<!-- Footer -->
 	<div class="legal">
@@ -326,4 +457,4 @@
 	</div>
 	<!-- #Footer -->
 </aside>
-<!-- #END# Left Sidebar
\ No newline at end of file
+<!-- #END# Left Sidebar
diff --git a/app/views/layouts/login.html.erb b/app/views/layouts/login.html.erb
index d6c6c955..46ccccde 100755
--- a/app/views/layouts/login.html.erb
+++ b/app/views/layouts/login.html.erb
@@ -35,7 +35,7 @@
 
     <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
-    <%= javascript_include_tag 'login', 'data-turbolinks-track': 'reload' %> 
+    <%= javascript_include_tag 'login', 'data-turbolinks-track': 'reload' %>
   </head>
 
   <body class="login-page">
@@ -57,8 +57,8 @@
     </div>
     <!-- #END# Page Loader -->
     <% flash.each do |type, message| %>
-    <% 
-    if type == "notice" 
+    <%
+    if type == "notice"
      color = "alert-success"
    elsif type == "error"
     color = "alert-danger"
@@ -67,22 +67,22 @@
   else
     color = "bg-black"
     end %>
-    
+
     <p id="noti" class="hidden noti" data-placement-from="top" data-message="<%=message%>" data-placement-align="center"
       data-animate-enter="" data-animate-exit="" data-color-name="<%=color%>" >
     </p>
-    <% end %>  
+    <% end %>
     <div class="login-box">
       <div class="logo text-center">
         <img src="/image/SX-logo.png" width="150px" height="150px">
         <p>
           <small>Version - 1.0.1</small>
-        </p> 
+        </p>
       </div>
       <div class="row">
           <div class="col-lg-12_ col-md-12 col-sm-12 col-xs-12 text-center">
             <div class="current-shop-name">
-                <span><%= shop_detail.name %></span> 
+                <span><%= shop_detail.name %></span>
               </div>
           </div>
         </div>
@@ -90,13 +90,13 @@
       <div class="card padding-10">
         <div class="card-header m-l-">
           <div class="row clearfix">
-            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
+            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 login_pwd">
               <%= f.input :emp_id, as: :hidden, required: false, class: "form-control" %>
 
               <%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
 
             </div>
-            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-10">
+            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-10 login_ent">
               <br>
               <span class="input-group-addon enter m-t-25 m-l--25" data-value="ENT" style="cursor: pointer;padding:0.1rem !important;">
                 <i class="material-icons">send</i>
@@ -126,10 +126,18 @@
               <!--  <div class="pin_pad bg-grey" data-value="CLR">CLR</div>
                <div class="pin_pad left" data-value="0">0</div>
                <div class="pin_pad left bg-indigo" data-value="ENT">ENT</div> -->
+               <% if request.user_agent.include? 'Mobile' %>
+                <div class="pin_pad bg-blue-grey" data-value="CLR">CLR</div>
+                <div class="pin_pad left" data-value="0">0</div>
+                <div class="pin_pad bg-grey left" data-value="ENT">ENTER</div>
+               <% else %>
                <div class="pin_pad bg-blue-grey" data-value="BAC">BACK</div>
                <div class="pin_pad left" data-value="0">0</div>
-               <div class="pin_pad bg-grey left" data-value="CLR">CLR</div>                    
-            </div>                      
+               <div class="pin_pad bg-blue-grey" data-value="CLR">CLR</div>
+               <% end %>
+
+
+            </div>
           </div>
          </div>
         <% end %>
@@ -139,7 +147,7 @@
     $("#login_form_password").focus();
 
     $(".pin_pad").click(function (event) {
-      event.preventDefault();                
+      event.preventDefault();
       var value = $(this).data("value");
 
       if (value == "CLR") {
@@ -154,12 +162,12 @@
       }
     });
     $(".enter").click(function (event) {
-      event.preventDefault();                
+      event.preventDefault();
       var value = $(this).data("value");
 
       if (value == "ENT") {
         $("#new_login_form").submit();
-      } 
+      }
     });
   });
   function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
@@ -199,5 +207,3 @@
 </script>
 </body>
 </html>
-
-