ホテル清掃の経験ある人フォロワーになってくれないか。
３つ目の記事になるがQiitaからフォローしてくれた人は0だ。来てくれたら歓迎するよ。
何をしてたか
ホテル清掃をしていた頃、全ての作業は分担されておりベッドの人はベッドを何部屋もやる。バスルームも同じだ。おかげで某ビジネスホテルだがシングルのベッドなら３分で出来るようになったしバスルームでも７、８分で行えるようになった。
つまり、みんながキーボード触っている時期にわいは便所に手を突っ込んで掃除しながらたまに便器からはみ出た💩をキレイにしてた。それから３時間５６台の勢いでベッドをひたすら組んでいた。とはいっても毎日じゃない。
何をしたいか
ただし、部屋数が増えてくればだれてくるし汚れている部屋であれば多少なりとも予定作業時間を過ぎてしまう。といったことが起こる。当たり前の話だ。そういったときにこのアプリが活かせる。自分が遅れているのか早く進んでいるか把握できるようになる。
何を作ったか
タイマーだ。部屋数と時刻を２か所入力する（作業開始時刻と作業時間）。あとは👍ボタンを押すごとに時間が記録され予定完了時刻より早ければ緑、遅ければ赤に行色が変わる。
何を使ったか
・画面は Fomantic-UI
・時刻入力は CleaveJS
・現在時刻取得は MomentJS
・部屋毎の作業時間計算は MomentDuration
・また比較演算子を関数で行いたかったから Predicate
どう作ったか
index.html
<!doctype html><html><head><title></title><metacharset='utf-8'><metacontent=''name='author'><metacontent=''name='description'><metacontent=''name='application-name'><metacontent='telephone=no,address=no,email=no,date=no,url=no'name='format-detection'><metacontent='noimageindex,notranslate,nosnippet,noarchive,nofollow,noindex'name='robots'><metacontent='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'name='viewport'><linkhref='css/fomantic-ui/2.7.8.min.css'rel='stylesheet'media='screen'><linkhref='asset/progressive-web.json'rel='manifest'><linkhref='asset/favicon.ico'rel='icon'><style name='font'>@font-face{font-family:'M+2VM+IAPG circle';src:url('asset/m+2vm+ipag-circle.ttf');}@font-face{font-family:'gidole';src:url('asset/gidole.ttf');}</style><style>/*
* 視認
*/html,body{font-size:14px;}.ui.tabletd,.ui.tableinput{font-family:'gidole';}.ui.table>thead>tr>th,.ui.table>tbody>tr>td{padding:0;}/*
* 入力
*/.ui.tableinput[type='number']{-moz-appearance:textfield;}.ui.tableinput::-webkit-outer-spin-button,.ui.tableinput::-webkit-inner-spin-button{-webkit-appearance:none;}.ui.tableinput{background:transparent;text-align:center;appearance:none;outline:none;border:none;width:100%;}/*
* 見栄
*/.ui.tabletheadtr:first-child>th:first-child{width:3em;}.ui.card,.ui.label,.ui.table,.ui.buttons{border-bottom:2pxsolidrgba(34,36,38,.15)!important;box-shadow:rgba(16,36,94,0.4)02px6px0!important;}.ui.card.descriptionp{font:12px'M+2VM+IPAG circle';line-height:1.2;color:black;}/*
* アイコン
*/i.icon.thumbs-up:before{content:'\f164';}</style></head><body><main><divclass='ui grid padded'><divclass='row'><divclass='column'><divclass='ui card fluid'><divclass='image'><imgsrc='asset/businesshotel-9956-400x400.png'></div><divclass='content'><divclass='description'><p>ホテル清掃の進捗を管理するアプリです。予定通り進んでいるか緑と赤のバランスでわかります。上のテーブルを入力して作業を開始しましょう。</p></div></div></div></div></div><divclass='row'><divclass='column'><tableclass='ui table unstackable celled fixed center aligned blue'><thead><tr><th>数</th><th>開始時刻</th><th>作業時間</th></tr></thead><tbody><tr><td><inputtype='number'v-model.number='rooms'></td><td><inputtype='tel'v-model='time.base'ref='v1'></td><td><inputtype='tel'v-model='time.task'ref='v2'></td></tr></tbody></table><tableclass='ui table unstackable celled fixed center aligned blue'><thead><th>No.</th><th>予定時刻</th><th>完了時刻</th></thead><tbody><trv-for='(no,i) in rooms':class="[lt(i)]"><td>{{no}}</td><td>{{estimate[i] | HHmmss }}</td><td>{{complete[i] | HHmmss }}</td></tr></tbody></table><divclass='ui buttons two blue'><buttonclass='ui button icon'@click='reset'><iclass='icon file'></i></button><buttonclass='ui button icon'@click='stamp'><iclass='icon thumbs-up'></i></button></div></div></div></div></main></body><!-- native --><script src='js/native/moment-2.24.0.min.js'></script><script src='js/native/moment-duration-format-2.3.2.min.js'></script><script src='js/native/predicate-1.2.0.min.js'></script><script src='js/native/cleave-1.5.3.min.js'></script><!-- vue --><script src='js/vue/2.6.10.js'></script><script>newVue({el:'main',data:{/*
* 入力用のデータ
*/time:{base:null,/* 作業開始時刻 */task:null,/* 作業平均時間（作業者）*/},rooms:10,/* 作業予定個数（部屋数）*//*
* 進捗用のデータ
*/estimate:[/* 作業完了予定時刻 */],complete:[/* 作業完了実際時刻 */],/*
* 入力用のバリデーション（時刻と時間）
*/validation:{time:true,timePattern:['h','m','s']}},filters:{HHmmss:function(ts){if(ts!==undefined){/* 何時:何分:何秒 */returnmoment(ts).format('HH:mm:ss')}}},computed:{timeChanged:function(){/* 部屋数と時刻が修正されたことを監視 */returnthis.rooms&&this.time},},watch:{timeChanged:{deep:true,handler:function(){/* 再計算 */this.calc()}}},methods:{lt:function(i){/* 予定より遅い or 早い */return(i<this.complete.length)?(predicate.lt(this.estimate[i],this.complete[i])?'negative':'positive'):null},stamp:function(){/* 作業完了 */if(this.complete.length<this.rooms){this.complete.push(moment().valueOf())}},reset:function(){/* 初期化 */this.complete.splice(0,this.complete.length)},calc:function(){/* 計算 */varbase=moment(this.time.base,'HH:mm:ss')vartask=moment.duration(this.time.task)for(vari=0;i<this.rooms;i++){varval=base.add(task).valueOf()if(val){this.estimate[i]=val}}},init:function(){/* HH:MM:SSによる入力検証 */newCleave(this.$refs.v1,this.validation)newCleave(this.$refs.v2,this.validation)}},mounted:function(){this.time.base='11:30:00'/* 作業開始 */this.time.task='00:09:00'/* 作業時間 */this.init()/* NN:NN:NNの入力検証 */this.calc()/* 計算（作業完了時刻） */}})</script></html>