92 lines
2.8 KiB
Plaintext
92 lines
2.8 KiB
Plaintext
<style>
|
|
.pin_pad {
|
|
width: 30%;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
text-align: center;
|
|
background: #54A5AF;
|
|
font-size: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.bottom {
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.left {
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.orange {
|
|
background-color: #FF7F50;
|
|
}
|
|
|
|
.purple {
|
|
background-color: #7a62d3;
|
|
}
|
|
</style>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
|
|
<%= simple_form_for(@login_form, url: emp_login_update_path, method: "PATCH") do |f| %>
|
|
<div class="card">
|
|
<div class="content" style="margin:10px">
|
|
<div class="form-group">
|
|
<%= f.input :emp_id, as: :hidden, label: "Access PIN", required: false, class: "form-control" %>
|
|
|
|
<%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
|
|
</div>
|
|
</div>
|
|
<div class="content row" style="padding-left:10px;margin-left:10px; margin-top:0px; text-align:center">
|
|
<div class='col-md-12'>
|
|
<div class='row bottom'>
|
|
<div class="pin_pad " data-value="1">1</div>
|
|
<div class="pin_pad left" data-value="2">2</div>
|
|
<div class="pin_pad left" data-value="3">3</div>
|
|
</div>
|
|
<div class='row bottom'>
|
|
<div class="pin_pad" data-value="4">4</div>
|
|
<div class="pin_pad left" data-value="5">5</div>
|
|
<div class="pin_pad left" data-value="6">6</div>
|
|
</div>
|
|
<div class='row bottom'>
|
|
<div class="pin_pad" data-value="7">7</div>
|
|
<div class="pin_pad left" data-value="8">8</div>
|
|
<div class="pin_pad left" data-value="9">9</div>
|
|
</div>
|
|
<div class='row bottom'>
|
|
<div class="pin_pad orange" data-value="CLR">CLR</div>
|
|
<div class="pin_pad left" data-value="0">0</div>
|
|
<div class="pin_pad left purple" data-value="ENT">ENT</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer text-center" style="margin:10px">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(document).on('turbolinks:load', function () {
|
|
$(".pin_pad").click(function (event) {
|
|
event.preventDefault();
|
|
console.log($(this).data("value"));
|
|
var value = $(this).data("value");
|
|
|
|
if (value == "CLR") {
|
|
$("#login_form_password").val("");
|
|
} else if (value == "ENT") {
|
|
$("#new_login_form").submit();
|
|
} else {
|
|
var old_value = $("#login_form_password").val();
|
|
$("#login_form_password").val(old_value + value);
|
|
}
|
|
});
|
|
});
|
|
</script>
|