woelper
/
objectstore


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!doctype html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
</head>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-blue.min.css" />
<!-- <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> -->

<style>
    .addinput {
        border: 0px;
        border-top: 1px solid #aaa;
        height: 80px;
        width: 100%;
    }

    .addbutton {
        float: right;
        border: 1px solid #aaa;
        height: 80px;
        width: 19%;
    }

    .entry {
        position: fixed;
        bottom: 0;
        width: 100%;
        display: inline;
        height: 80px;
    }

    .item-todo {
        font-weight: 800;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        line-height: 5em;
        height: 5em;
    }

    .item-font {
        font-size: 3em;
        padding: 1em;
    }


    .deleter {
        text-transform: lowercase;
        font-family: Arial, Helvetica, sans-serif;
        width: 100px;
        height: 5em;
        float: right;
        text-decoration: none;
        cursor: pointer;
    }

    .deleter:after {
        display: inline-block;
        font-size: 4em;
        content: "\00d7";
        position: relative;
        padding-left: 0.5em;
    }

    .inputholder {
        display: block;
        overflow: hidden;
    }


    @media (max-width: 600px) {
        .item-todo {
            font-size: 1em;
            height: 3em;
            line-height: 3em;
        }

        .item-font {
            font-size: 1em;
            padding: 1em;
        }

        .deleter {
            height: 3em;

        }

        .deleter:after {
            font-size: 2em;
            padding-left: 2em;
        }

        .addinput,
        .addbutton,
        .entry {
            height: 40px;
        }

    }
</style>


<!-- HTML PART ###################################################################################################################################-->
<div id="app">

    <div class="item-todo" v-for="task in config.tasks">
        <span class="item-font">
            {{task}}
        </span>
        <span class="deleter" href="#" @click="remove(task)"></span>
    </div>

    <div class="entry">
        <button class="addbutton" onclick="app.save">add</button>
        <span class="inputholder">
            <input class="addinput" v-model="task_input" v-on:keyup.enter="save">
        </span>
    </div>

    <!-- <button onclick="adapter.setter()">save</button>
    <button onclick="adapter.getter()">load</button> -->

</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="static/adapter.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            task_input: "",
            config: {
                tasks: []
            },
        },
        mounted: function () {
            adapter.onget = function () {
                app.config = adapter.responseJson
            }
            adapter.onset = function () {
                return app.config;
            }

            adapter.getter();

            setInterval(function () {
                adapter.getter();
            }, 600000);
        },
        watch: {},
        computed: {
            save: function () {
                this.config.tasks.push(this.task_input);
                this.task_input = "";
                adapter.setter();
            },
        },
        methods: {
            remove: function (item) {
                console.log(item);
                this.config.tasks.splice(this.config.tasks.indexOf(item), 1);
                adapter.setter();
            },

        }
    })
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">