<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
/* iOS */
input[type=text]{
-webkit-appearance: none;
border-radius: 0;
}
button[type=button] {
background-color: darkgrey;
-webkit-appearance: none;
border-radius: 0;
}
/* 共通タグ */
* {
padding: 0;
margin: 0;
font-size: 32px;
}
button, input, select, td, li{
padding: 10px;
}
button, input, select, div {
margin: 5px;
}
input, select {
vertical-align:middle;
}
div, td {
background-color: white;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td, li {
white-space: nowrap;
overflow-x: hidden;
}
td {
border: 1px solid #bbb;
text-align: center;
}
li {
border-bottom: 1px solid #bbb;
list-style: none;
}
button, select {
width: 170px;
}
/* suggest */
#suggest {
padding: 20px;
position: absolute;
float: right;
top: 50px;
right: 0;
height: 75%;
width: 50%;
overflow-y: scroll;
box-shadow: 0 0 5px black;
}
#suggest_close_btn {
background-color: transparent;
position: absolute;
float: right;
top: 0;
right: 0;
}
/* calendar */
#calendar td {
width: 80px;
height: 40px;
}
#calendar td:first-child {
color: red;
}
#calendar td:last-child {
color: blue;
}
/* list */
#list_header {
margin-bottom: 5px;
}
#list td:nth-of-type(1) {
min-width: 40px;
max-width: 40px;
}
#list td:nth-of-type(2) {
min-width: 220px;
max-width: 220px;
}
#list td:nth-of-type(3) {
min-width: 380px;
max-width: 380px;
}
#list td:nth-of-type(4),
#list td:nth-of-type(5) {
min-width: 75px;
max-width: 75px;
}
#list td:nth-of-type(6) {
min-width: 270px;
max-width: 270px;
}
/* input */
#serial_input {
max-width: 220px;
min-width: 220px;
}
#note_input,
#note_input_cat {
max-width: 270px;
min-width: 270px;
}
#model_input {
max-width: 380px;
min-width: 380px;
}
#hour_input,
#qty_input {
max-width: 75px;
min-width: 75px;
}
/* lock */
#lock {
background-color: transparent;
width: 100%;
height: 100%;
position: absolute;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div id="lock" v-show="show_lock"></div>
<div id="header">
<span id="stuff_name"></span>
</div>
<div id="left" v-show="show_left">
<button v-on:click="calendar_move" id="prev" type="button">前月</button>
<button v-on:click="calendar_move" id="home" type="button">当月</button>
<button v-on:click="calendar_move" id="next" type="button">翌月</button>
<div id="calendar_header"></div>
<div v-on:click="data_download" id="calendar"></div>
</div>
<div id="right" v-show="show_right">
<button v-on:click="ini_view" type="button">戻る</button>
<button v-on:click="data_upload" type="button">更新</button>
<button v-on:click="create_row" type="button">行追加</button>
<div id="right_header"></div>
<input v-show="show_serial" id="serial_input" type="text" v-on:input="input_serial_change" v-model="model_serial">
<input v-show="show_model" id="model_input" type="text" v-on:input="input_model_change" v-model="model_model">
<input v-show="show_qty" id="qty_input" type="text" v-on:input="input_qty_change" v-model="model_qty">
<br v-show="show_qty">
<button v-show="show_qty" v-on:click="click_qty_up" type="button">＋1</button>
<button v-show="show_qty" v-on:click="click_qty_down" type="button">－1</button>
<input v-show="show_hour" id="hour_input" type="text" v-on:input="input_hour_change" v-model="model_hour">
<br v-show="show_hour">
<button v-show="show_hour" v-on:click="click_hour_up" type="button">＋0.25</button>
<button v-show="show_hour" v-on:click="click_hour_down" type="button">－0.25</button>
<select v-show="show_note" id="note_input_cat" v-on:change="input_note_change" v-model="model_note_cat">
<option v-for="s in select_cat" v-bind:value="s.name">{{s.name}}</option>
</select>
<input v-show="show_note" id="note_input" type="text" v-on:input="input_note_change" v-model="model_note">
<div id="list">
<table id="list_header">
<tr>
<td>ID</td>
<td>工番</td>
<td>型式</td>
<td>数量</td>
<td>時間</td>
<td>備考</td>
</tr>
</table>
<table id="list_body">
<tr v-for="(m, counter) in main_list" v-bind:id="m.ID">
<td v-on:click="delete_row">{{ counter + 1 }}</td>
<td v-on:click="click_serial_td">{{ m.Serial }}</td>
<td v-on:click="click_model_td">{{ m.Model }}</td>
<td v-on:click="click_qty_td">{{ m.Qty }}</td>
<td v-on:click="click_hour_td">{{ m.Hour }}</td>
<td v-on:click="click_note_td">{{ m.Note }}</td>
</tr>
</table>
</div>
</div>
<div v-show="show_suggest" id="suggest">
<ul size="5" v-on:click="click_suggest_select">
<li v-for="s in suggest_list" v-bind:value="s.ID">{{s.Serial}} | {{s.Model}}</li>
</ul>
</div>
<div v-show="show_suggest" v-on:click="suggest_close" id="suggest_close_btn">[ ✕ ]</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
ep: 'http://xxx.xxx.xxx.xxx:xxx/',
target_id: "",
stuff_name: "",
year: "",
month: "",
model_model: "",
model_serial: "",
model_qty: "",
model_hour: "",
model_note: "",
model_note_cat: "",
show_lock: true,
show_left: true,
show_right: false,
show_model: false,
show_serial: false,
show_suggest: false,
show_qty: false,
show_hour: false,
show_note: false,
suggest_list_back: [],
suggest_list: [],
main_list: [],
select_cat: [],
},
methods: {
window: onload = function(){
vm.reset_date();
vm.check_query();
vm.load_suggest_list();
vm.calendar_show(vm.year, vm.month);
vm.unlock();
},
lock(){
vm.show_lock = true;
},
unlock(){
vm.show_lock = false;
},
check_query() {
let query = location.search.slice(1);
let query_arry = query.match(/([^/]+)\/(\d){1}\//);
vm.stuff_name = "名無し";
let cat_type = "0";
if(query_arry == null){
alert("URLが正しくありません");
} else {
vm.stuff_name = decodeURI(query_arry[1]);
cat_type = query_arry[2];
}
document.querySelector('#stuff_name').innerHTML = vm.stuff_name + " さんのページです";
vm.setup_cat(cat_type);
},
ini_view(){
vm.show_toggle("ini_view");
},
setup_cat(cat_type) {
let cat_list = [];
switch (cat_type) {
case "1":
cat_list = [
{"ID": "1", "name": ""},
{"ID": "2", "name": "作業1"},
{"ID": "3", "name": "作業2"}
];
break;
case "2":
cat_list = [
{"ID": "1", "name": ""},
{"ID": "2", "name": "作業3"},
{"ID": "3", "name": "作業4"}
];
break;
}
vm.select_cat = cat_list;
},
show_toggle(refer) {
vm.show_left = false;
vm.show_right = false;
vm.show_model = false;
vm.show_serial = false;
vm.show_suggest = false;
vm.show_qty = false;
vm.show_hour = false;
vm.show_note = false;
switch (refer) {
case "ini_view":
vm.show_left = true;
break;
case "data_download":
vm.show_right = true;
break;
case "data_upload":
vm.show_right = true;
break;
case "create_row":
vm.show_right = true;
break;
case "click_serial_td":
vm.show_right = true;
vm.show_serial = true;
vm.show_suggest = true;
break;
case "click_model_td":
vm.show_right = true;
vm.show_model = true;
vm.show_suggest = true;
break;
case "click_qty_td":
vm.show_right = true;
vm.show_qty = true;
break;
case "click_hour_td":
vm.show_right = true;
vm.show_hour = true;
break;
case "click_note_td":
vm.show_right = true;
vm.show_note = true;
break;
case "delete_row":
vm.show_right = true;
break;
case "select_serial_suggest":
vm.show_right = true;
break;
case "suggest_close":
vm.show_right = true;
break;
}
},
reset_date() {
vm.year = new Date().getFullYear();
vm.month = new Date().getMonth() + 1;
},
model_reset() {
vm.model_model = "";
vm.model_serial = "";
vm.model_qty = "";
vm.model_hour = "";
vm.model_note = "";
vm.model_note_cat = "";
},
calendar_create(year, month) {
let html = '<table>';
html += '<tr>';
let week = ['日', '月', '火', '水', '木', '金', '土'];
for (let col = 0; col < week.length; col++) {
html += '<td>' + week[col] + '</td>';
}
html += '</tr>';
let startWeekDay = new Date(year, month - 1, 1).getDay();
let endDay = new Date(year, month, 0).getDate();
let counter = 1;
for (let row = 0; row < 6; row++) {
html += '<tr>';
for (let col = 0; col < 7; col++) {
if ((row == 0 && col < startWeekDay) || (counter > endDay)) {
html += '<td>-</td>';
} else {
html += '<td class="calendar_td" data-date="' + year + '/' + month + '/' + counter + '">' + counter + '</td>';
counter++;
}
}
html += '</tr>';
}
html += '</table>';
return html;
},
calendar_show(year, month) {
document.querySelector('#calendar_header').innerHTML = year + "年" + month + "月";
document.querySelector('#calendar').innerHTML = vm.calendar_create(year, month);
},
ConvertWide(target){
target = target.replace(/"/g,'”');
target = target.replace(/'/g,"’");
return target;
},
create_json() {
let json = "";
let tbl = document.querySelector('#list_body');
for ( r = 0; r < tbl.rows.length; r++){
let id = tbl.rows[r].cells[0].innerHTML;
let serial = vm.ConvertWide(tbl.rows[r].cells[1].innerHTML);
let model = vm.ConvertWide(tbl.rows[r].cells[2].innerHTML);
let qty = vm.ConvertWide(tbl.rows[r].cells[3].innerHTML);
let hour = vm.ConvertWide(tbl.rows[r].cells[4].innerHTML);
let note = vm.ConvertWide(tbl.rows[r].cells[5].innerHTML);
json = json + '{"ID":"' + id + '","Serial":"' + serial +
'","Model":"' + model + '","Qty":"' + qty + '","Hour":"' + hour + '","Note":"' + note + '"},';
}
json = json.slice(0, json.length-1);
json = "[" + json + "]";
return json;
},
check_date(){
if(document.querySelector('#right_header').innerHTML == "") {
alert("日付が選択されていません");
return false;
}
return true;
},
suggest_close(){
vm.show_toggle("suggest_close");
},
click_hour_up(){
if(vm.target_id === "") return;
if(isNaN(vm.model_hour) || vm.model_hour == "") {
vm.main_list[vm.target_id].Hour = "0.00";
vm.model_hour = "0.00";
} else {
vm.main_list[vm.target_id].Hour = (parseFloat(vm.main_list[vm.target_id].Hour) + 0.25).toFixed(2);
vm.model_hour = (parseFloat(vm.model_hour) + 0.25).toFixed(2);
}
},
click_hour_down(){
if(vm.target_id === "") return;
if(isNaN(vm.model_hour) || vm.model_hour == "") {
vm.main_list[vm.target_id].Hour = "0.00";
vm.model_hour = "0.00";
} else {
vm.main_list[vm.target_id].Hour = (parseFloat(vm.main_list[vm.target_id].Hour) - 0.25).toFixed(2);
vm.model_hour = (parseFloat(vm.model_hour) - 0.25).toFixed(2);
}
},
click_qty_up(){
if(vm.target_id === "") return;
if(isNaN(vm.model_qty) || vm.model_qty == "") {
vm.main_list[vm.target_id].Qty = "1";
vm.model_qty = "1";
} else {
vm.main_list[vm.target_id].Qty = (parseFloat(vm.main_list[vm.target_id].Qty) + 1);
vm.model_qty = (parseFloat(vm.model_qty) + 1);
}
},
click_qty_down(){
if(vm.target_id === "") return;
if(isNaN(vm.model_qty) || vm.model_qty == "") {
vm.main_list[vm.target_id].Qty = "1";
vm.model_qty = "1";
} else {
vm.main_list[vm.target_id].Qty = (parseFloat(vm.main_list[vm.target_id].Qty) - 1);
vm.model_qty = (parseFloat(vm.model_qty) - 1);
}
},
click_serial_td(e){
if(!vm.check_date()) return;
vm.show_toggle("click_serial_td");
vm.model_serial = e.target.innerHTML;
vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;
vm.reset_suggest_list();
},
click_model_td(e){
if(!vm.check_date()) return;
vm.show_toggle("click_model_td");
vm.model_model = e.target.innerHTML;
vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;
vm.reset_suggest_list();
},
click_qty_td(e){
if(!vm.check_date()) return;
vm.show_toggle("click_qty_td");
vm.model_qty = e.target.innerHTML;
vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;
},
click_hour_td(e){
if(!vm.check_date()) return;
vm.show_toggle("click_hour_td");
vm.model_hour = e.target.innerHTML;
vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;
},
click_note_td(e){
if(!vm.check_date()) return;
vm.show_toggle("click_note_td");
let cat = e.target.innerHTML.slice(0, e.target.innerHTML.indexOf(" ")).trim();
let note = e.target.innerHTML.slice(e.target.innerHTML.indexOf(" ") + 1, e.target.innerHTML.length).trim();
vm.model_note_cat = cat;
vm.model_note = note;
vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;
},
input_serial_change(){
if(vm.target_id === "") return;
vm.main_list[vm.target_id].Serial = vm.model_serial;
vm.update_serial_suggest("serial");
},
input_model_change(){
if(vm.target_id === "") return;
vm.main_list[vm.target_id].Model = vm.model_model;
vm.update_serial_suggest("model");
},
input_qty_change(){
if(vm.target_id === "") return;
vm.main_list[vm.target_id].Qty = vm.model_qty;
},
input_hour_change(){
if(vm.target_id === "") return;
vm.main_list[vm.target_id].Hour = vm.model_hour;
},
input_note_change(){
if(vm.target_id === "") return;
let cat_and_note = "";
if(vm.model_note_cat.length > 0 || vm.model_note.length > 0){
cat_and_note = vm.model_note_cat + " " + vm.model_note.replace(/\s/g, " ");
}
vm.main_list[vm.target_id].Note = cat_and_note;
},
backup_suggest_list(){
for(let r = 0; r < vm.suggest_list.length; r++){
Vue.set(vm.suggest_list_back, r, {
"ID":r,
"Serial":vm.suggest_list[r].Serial,
"Model":vm.suggest_list[r].Model
});
}
},
reset_suggest_list(){
for(let r = 0; r < vm.suggest_list_back.length; r++){
Vue.set(vm.suggest_list, r, {
"ID":r,
"Serial":vm.suggest_list_back[r].Serial,
"Model":vm.suggest_list_back[r].Model
});
}
},
update_serial_suggest(target){
vm.reset_suggest_list();
if(target == "serial"){
for(let r = 0; r < vm.suggest_list.length; r++){
if (vm.suggest_list[r].Serial.indexOf(vm.model_serial) == -1){
vm.suggest_list.splice(r, 1);
r--;
}
}
}
if(target == "model"){
for(let r = 0; r < vm.suggest_list.length; r++){
if (vm.suggest_list[r].Model.indexOf(vm.model_model) == -1){
vm.suggest_list.splice(r, 1);
r--;
}
}
}
},
click_suggest_select(e){
if(e.target.nodeName == "SELECT") return;
let selected_value = e.target.innerHTML;
vm.select_serial_suggest(selected_value);
},
select_serial_suggest(selected_value){
let serial = selected_value.slice(0, selected_value.indexOf("|")).trim();
let model = selected_value.slice(selected_value.indexOf("|") + 1, selected_value.length).trim();
vm.main_list[vm.target_id].Serial = serial;
vm.model_serial = serial;
vm.main_list[vm.target_id].Model = model;
vm.model_model = model;
vm.show_toggle("select_serial_suggest");
},
delete_row(e){
if(!vm.check_date()) return;
if(!confirm("削除しますか？(削除後確定してください)")) return;
vm.show_toggle("delete_row");
let counter = e.target.innerHTML - 1;
vm.main_list.splice(counter, 1);
},
create_row(){
if(!vm.check_date()) return;
vm.show_toggle("create_row");
Vue.set(vm.main_list, vm.main_list.length, {"ID": vm.main_list.length, "Serial":"", "Model":"", "Qty":"1", "Hour":"0.00", "Note":""});
},
reset_main_list(){
vm.main_list.splice(0,vm.main_list.length);
Vue.set(vm.main_list, 0, {"ID": "0", "Serial":"", "Model":"", "Qty":"1", "Hour":"0.00", "Note":""});
},
calendar_move(e) {
if (e.target.id === 'home') vm.reset_date();
if (e.target.id === 'prev') vm.month--;
if (e.target.id === 'next') vm.month++;
if (vm.month == 0) {
vm.year--;
vm.month = 12;
}
if (vm.month == 13) {
vm.year++;
vm.month = 1;
}
vm.calendar_show(vm.year, vm.month);
},
data_upload(){
if(document.querySelector('#right_header').innerHTML == "") {
alert("日付が選択されていません");
return;
}
let ymd = document.querySelector('#right_header').innerHTML.split("/");
let y = ("000" + ymd[0]).slice(-4);
let m = ("0" + (ymd[1])).slice(-2);
let d = ("0" + ymd[2]).slice(-2);
vm.lock();
axios
.post(vm.ep + vm.stuff_name + '/' + y + '/' + m + '/' + d + '/', vm.create_json())
.then(response => {
vm.show_toggle("data_upload");
vm.unlock();
alert("更新しました");
})
.catch(error => {
alert(error);
});
},
data_download(e){
if(!e.target.classList.contains("calendar_td")) return;
vm.model_reset();
vm.show_toggle("data_download");
let ymd = e.target.dataset.date.split("/");
let y = ("000" + ymd[0]).slice(-4);
let m = ("0" + (ymd[1])).slice(-2);
let d = ("0" + ymd[2]).slice(-2);
document.querySelector('#right_header').innerHTML = y + "/" + m + "/" + d;
vm.lock();
axios
.post(vm.ep + vm.stuff_name + '/' + y + '/' + m + '/' + d + '/',"")
.then(response => {
vm.reset_main_list();
if(response.data != ""){
Vue.set(vm, 'main_list', response.data);
}
vm.reset_suggest_list();
vm.unlock();
})
.catch(error => {
alert(error);
});
},
load_suggest_list(){
axios
.post(vm.ep +'suggest/',"")
.then(response => {
vm.suggest_list.splice(0,vm.suggest_list.length);
if(response.data != ""){
Vue.set(vm, 'suggest_list', response.data);
vm.backup_suggest_list();
}
})
.catch(error => {
alert(error);
});
}
}
});
</script>
</body>
</html>