投薬管理 -0

-0

by MKGaru

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.js"></script>
<script src="https://rawgit.com/mbest/knockout-repeat/master/knockout-repeat.js"></script>
<script src="https://rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sugar/1.4.1/sugar-full.min.js"></script>
<div class="cupboard">
    <div class="backpanel"></div>
    <table>
        <thead>
            <tr>
                <th class="time" style="border:none;">{{time.format('{HH}:{mm}')}}</th>
                <td class="user name"
                    data-bind="repeat:{foreach: users , item: '$user'}" 
                    data-repeat-bind="with: $user()"
                >
                    {{name}}
                </td>
            </tr>
        </thead>
        <tbody data-bind="template:{foreach: schedule , as: 'time'}">
            <tr data-bind="css:{active:time==$parent.time.format('{HH}:00')}">
                <th class="time"><span>{{time}}</span></th>
                <td data-bind="repeat:{foreach: $parent.users , item: '$user'}" 
                    data-repeat-bind="with: $user()"
                >
                    <div class="cell">
                        <div class="box {{ 
                            schedule[time]
                                ?schedule[time].done
                                    ?'done'
                                    :'active'
                                :'none'
                        }}">
                            <div class="front" data-bind="with:schedule[time]"><span data-bind="click:action">薬</span></div>
                            <div class="back"><span></span></div>
                            <div class="left"></div>
                            <div...

SCSS

.cupboard{
    position:absolute;
    left:100px;
    width: 830px;
    transform-style: preserve-3d;
    perspective: 1500px;
    perspective-origin: 50% 0;
    transform: rotateX(0deg);
    .backpanel{
        position:absolute;
        height:100%;
        width:100%;
        left:0;right:0;
        top:0;bottom:0;
        transform: translateZ(-51px);
        background: #664444;
    }
    .cell{
        
    } 
    td.user.name{
        font-size: 50%;
        line-height: 200%;
        width: 50px;
        text-align: center;
        color: white;
        background: url(https://yabumi.cc/15142c179f53b489f5fb929d.jpg);
    }
    th.time{
        text-align: center;
        color: white;
        background: url(https://yabumi.cc/15142c179f53b489f5fb929d.jpg);
        position:absolute;
        left:-50px;
        width:50px;
        height:25px;
    }
    tr.active{
        th,td{
            border-color: salmon;
        }
        .box.active{
            //animation: pull-push 5s ease-in infinite;
        }
        &>th.time{
            color: orange;
            text-shadow: 1px 1px black;
            &>span{
                height:100%;
                display:block;
                background: rgba(200, 255, 200, 0.6);
            }
        }
    }
    th,td{
        border:solid 2px darkslategrey;
    }
}

.box{
    width: 50px;
    height: 25px;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-style: preserve-3d;
    transform: translateZ(100px);
    transform-origin: 25px 0px -25px;
    transition: transform ease-out 500ms;
    
    //animation: rotateY 5s linear infinite;
    transform: rotateY(180deg)
    &.active{
        transform: rotateY(0deg)
        //animation: pull-push 5s ease-in infinite;
    }
    &.done{
        animation: pull-push 5s ease-in 1;
        transform: rotateY(-90deg);
    }
    
    .front,
    .back,
    .left,
    .right,
    .bottom{
        width: 50px;
        height: 25px;
    ...

JavaScript

function Log(message,level){
    if(level === void 0) level = Log.Level.INFO;
    this.time = app.time;
    this.message = message;
    this.level = level;
}
Log.Level = {
    INFO: '情報',
    WARN: '警告',
    ERROR: '異常'
};

function Task(owner,time,note){
    this.owner = owner;
    this.time = time;
    this.note = note;
    this.done = false; //実行済み？
    this.alarmed = false;//通知送信済？
    ko.track(this);
}
Task.prototype.action = function(){
    var task = this;
    task.done = true;
    app.addLog('"{name}"様のケースが開かれました'.assign({name:task.owner.name}),Log.Level.INFO);
}
function Schedule(){
  	var schedule = {};
    Schedule.list.forEach(function(time){
        schedule[time] = null;
    });
    
    ko.track(schedule);
    return schedule;
}
Schedule.list = [
    "07:00","08:00","09:00","10:00",
    "11:00","12:00","13:00","14:00",
    "15:00","16:00","17:00","18:00",
    "19:00","20:00","21:00","22:00"
];

function User(id,name,schedule){
    if(schedule === void 0) schedule = new Schedule();
    this.id = id;
    this.name = name;
    this.schedule = schedule;
    ko.track(this);
    ko.track(this.schedule);
    User.list.push(this);
}
User.list = [];
User.find = function(id){
    return User.list.find(function(user){
        return user.id == id;
    });
}
User.prototype.addTask = function(time,note){
    var user = this;
    user.schedule[Date.create(time).format('{HH}:00')] = new Task(user,time,note);
    return this;
}

function TimeTable(){
    this.time = Date.create("07:00");
    this.schedule = Schedule.list;
    this.warning = null;
    this.logs = [];
    this.users = [
        new User( 1,"高橋　次郎"),
        new User( 2,"山田　聡"),
        new User( 3,"岡本　五郎"),
        new User( 4,"藤岡　修司"),
        new User( 5,"赤松　史郎"),
        new User( 6,"黒田　健"),
        new User( 7,"花岡　薫"),
        new User( 8,"柴田　太郎"),
        new User( 9,"中山　大地"),
        new User(10,"後藤　薫"),
        new User(12,"中村　なお"),
        new User(13,"村田　和子"),
        new User(14,"平山　華"),
 ...