Skip to content

P
postbox
Commit f4ad973c authored by Wen Wei Li's avatar Wen Wei Li
Browse files
Options

pincode layout

parent 0da28b71
Show whitespace changes
Inline Side-by-side
Showing with 38 additions and 17 deletions
static/css/main.css
View file @ f4ad973c
...@@ -12,3 +12,7 @@ input:focus{ ...@@ -12,3 +12,7 @@ input:focus{
td { td {
cursor: pointer; cursor: pointer;
} }
input.input_margin{
margin-right: 6%;
}
static/js/pincode.js
View file @ f4ad973c
...@@ -16,18 +16,35 @@ let myKeyboard = new Keyboard({ ...@@ -16,18 +16,35 @@ let myKeyboard = new Keyboard({
}); });
let ary_input = []; let ary_input = [];
let index = 1 let index = 1;
function onChange(input) { function onChange(input) {
if ( ary_input.length > 6 ){
ary_input.pop();
}
console.log("Input changed", ary_input); console.log("Input changed", ary_input);
} }
function onKeyPress(button) { function onKeyPress(button) {
console.log("index : ", index); console.log("index : ", index);
n = "slot-"+index if ( String(button) == "{bksp}" && index > 1 ){
document.querySelector('input[id="'+n+'"]').value = '1'; index= index - 1;
n = "slot-" + index;
document.querySelector('input[id="'+n+'"]').value = '';
ary_input.pop();
}else if( String(button) == "{bksp}" && index == 1){
console.log("back to the first pin code");
}else if (index < 7 ){
n = "slot-" + index;
document.querySelector('input[id="'+n+'"]').value = button;
index = index + 1; index = index + 1;
ary_input.push(button) ary_input.push(button);
}else{
console.log("index over 6");
}
document.querySelector('input[id="'+n+'"]').focus(); document.querySelector('input[id="'+n+'"]').focus();
console.log("Button pressed", button); console.log("Button pressed", button);
} }
templates/pincode.html
View file @ f4ad973c
...@@ -31,13 +31,13 @@ ...@@ -31,13 +31,13 @@
{% endblock head %} {% endblock head %}
{% block content%} {% block content%}
<body class="bg-light m-5"> <body class="container mx-auto bg-light m-5">
<h2 class="text-muted text-center m-5">PinCode Setup</h2> <h2 class="text-muted text-center m-5">PinCode Setup</h2>
<center> <center>
<div class="col align-items-center m-5 col-8"> <div class="row col mx-auto m-5 col-8">
<div class="col-10 inline "> <div class="col-sm">
{% for i in range(6) %} {% for i in range(6) %}
<input type="password" class="form-control input" id="slot-{{loop.index}}" maxlength="1"> <input type="password" class="form-control input float-left col-sm-1 text-center input_margin" id="slot-{{loop.index}}" disabled="true" maxlength="1">
{% endfor %} {% endfor %}
</div> </div>
<div class="col-2 inline"> <div class="col-2 inline">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment