login ui modified

This commit is contained in:
Yan
2017-10-03 14:11:12 +06:30
parent f9ec0da867
commit c28751a8e0
7 changed files with 194 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@@ -3,14 +3,33 @@
@import "animate-css/animate";
@import "BSBMaterial/style";
.login_dashboard{
background-color: #2790a5;
}
.login-page {
margin: 1% auto;
background-color: #2790a5;
}
.form-group {
margin-bottom: 15px;
}
.emp-body{
cursor: pointer;
margin-bottom: 0px !important;
margin-top:5px !important;
}
.emp-body .body{
padding: 15px 5px;
text-align: center;
border-radius: 3px;
}
.empBtn{
margin-top: -10px;
}
.padding-10 {
padding: 10px;
}

View File

@@ -4,8 +4,8 @@ class HomeController < ApplicationController
def index
@employees = Employee.all_emp_except_waiter.order("name asc")
@login_form = LoginForm.new()
render "layouts/login", layout: false
@login_form = LoginForm.new()
render "layouts/login_dashboard", layout: false
end
def show

View File

@@ -151,7 +151,7 @@
<!-- Footer -->
<div class="legal">
<div class="copyright">
&copy; <%= Time.now.strftime("%Y") %> <a href="javascript:void(0);">Code2Lab - SX Restaurant</a>.
&copy; <%= Time.now.strftime("%Y") %> <a href="javascript:void(0);">Code2Lab</a>.
</div>
<div class="version">
<b>Version: </b> 1.0.1

View File

@@ -38,12 +38,12 @@
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body class="theme-red">
<body class="theme-blue">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="spinner-layer pl-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>

View File

@@ -33,8 +33,8 @@
<!-- <link href="css/themes/all-themes.css" rel="stylesheet" /> -->
<%= stylesheet_link_tag 'login', media: 'all', 'data-turbolinks-track': 'reload' %>
<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>
<!-- <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' %>
</head>
@@ -59,16 +59,16 @@
<div class="login-box">
<div class="logo">
<a href="javascript:void(0);"><b>SX</b> Smartsale</a>
<a href="javascript:void(0);">Smartsale <b>SX</b></a>
<small>Version - 1.0.1</small>
</div>
<%= simple_form_for(@login_form, url: login_path, method: "post") do |f| %>
<div class="card padding-10">
<div class="card-header">
<div class="form-group">
<%= f.input :emp_id, label: "Access PIN", required: false, class: "form-control" %>
<%= f.input :emp_id, as: :hidden, required: false, class: "form-control" %>
<%= f.input :password, label: "Password", required: false, class: "form-control" %>
<%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
</div>
</div>
<div class="card-content">

View File

@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>SmartSales : Restaurant</title>
<%= csrf_meta_tags %>
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<%= stylesheet_link_tag 'login', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- <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' %>
</head>
<body class="login_dashboard">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<img src="/image/SX-logo.png" width="150px" height="150px">
<p>
<small>Version - 1.0.1</small>
</p>
</div>
</div>
<div class="row bg-white">
<!-- <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> </div> -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-t-20 p-l-10 p-r-10 p-b-50 bg-white">
<div class="row justify-content-center form-group">
<!-- <span class="col-md-4"></span> -->
<input type="text" class="form-control col-4" id="emp_id" onkeypress="empID()" placeholder="Access PIN">
<!-- <span class="col-md-4"></span> -->
</div>
<div class="row">
<div class="col-1 col-black">
<span>Supervisor</span>
</div>
<div class="col-11">
<hr />
</div>
</div>
<div class="row m-b-15">
<% @employees.each do |employee| %>
<%if employee.role == "supervisour" %>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 empBtn" data-formid="#form_<%= employee.emp_id %>" >
<form id="form_<%= employee.emp_id %>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH">
</form>
<div class="card emp-body">
<div class="body bg-teal">
<%= employee.name%>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
<div class="row">
<div class="col-1 col-black">
<span>Cashier</span>
</div>
<div class="col-11">
<hr />
</div>
</div>
<div class="row m-b-15">
<% @employees.each do |employee| %>
<%if employee.role == "cashier" %>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 empBtn" data-formid="#form_<%= employee.emp_id %>" >
<form id="form_<%= employee.emp_id %>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH">
</form>
<div class="card emp-body">
<div class="body bg-teal">
<%= employee.name%>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
<div class="row">
<div class="col-1 col-black">
<span>Accountant</span>
</div>
<div class="col-11">
<hr />
</div>
</div>
<div class="row m-b-15">
<% @employees.each do |employee| %>
<%if employee.role == "account" %>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 empBtn" data-formid="#form_<%= employee.emp_id %>" >
<form id="form_<%= employee.emp_id %>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH">
</form>
<div class="card emp-body">
<div class="body bg-teal">
<%= employee.name%>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
<!-- <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> </div> -->
</div>
</div>
</body>
</html>
<script>
$(document).on('turbolinks:load', function () {
$(".empBtn").click(function (event) {
event.preventDefault();
var item = $(this).data("formid");
$(item).submit();
});
});
function empID(){
$('#emp_id').keyup(function(e) {
var txtVal = this.value;
if ($.isNumeric(txtVal)) {
if( txtVal.length === 3 ) {
window.location.href = '/auth/'+txtVal;
}
}else{
alert("Please Enter Numeric Number")
}
});
}
</script>