TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta charset="UTF-8">
        <meta name="theme-color" content="#4b75ff">
        <link rel="stylesheet" href="./script/lightpick/css/lightpick.css">
        <link rel="stylesheet" href="./script/bulma/bulma.css">
        <script src="../script/jquery.min.js"></script>
        <script src="../script/ao_module.js"></script>
        <script src="script/lightpick/moment.min.js"></script>
        <script src="script/lightpick/lightpick.js"></script>
        <title>Memo</title>
        <style>
            body{
                background-color:white;
            }
        </style>
    </head>
    <body>
        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
              <a class="navbar-item" href="">
                <img src="img/logo.png" width="112" height="28">
              </a>
            </div>
        </nav>
        <div class="box">
            <button class="button is-warning" onclick="openMemoBox();">New Memo</button>
            <button class="button is-link is-light">Refresh</button>
        </div>
        <div id="memobox" class="box" style="display:none;">
            <h2 class="title is-4">New Memo</h2>
            <h4 class="subtitle is-6">Create a new Memo and try not to forget about it</h4>
            <hr>
            <div class="field">
                <label class="label">Title</label>
                <div class="control">
                    <input class="input" id="title" type="text" placeholder="Title">
                </div>
            </div>
            <div class="field">
                <label class="label">Message</label>
                <div class="control">
                    <textarea class="textarea" id="message" placeholder="Write some notes here!"></textarea>
                </div>
            </div>
            <div class="field">
                <label class="label">Deadline (Optional)</label>
                <div class="control">
                    <input class="input" id="deadline" type="text" placeholder="Deadline">
                </div>
            </div>
            <div class="field is-grouped">
                <div class="control">
                    <button class="button is-link" onclick="createNewMemo();">Submit</button>
                </div>
                <div class="control">
                    <button class="button is-link is-light" onclick="cancelNewMemo();">Cancel</button>
                </div>
            </div>
        </div>
        <script>
            let deadline = 0;

            function openMemoBox(){
                deadline = 0;
                $("#deadline").val("");
                $("#memobox").slideToggle("fast");
            }

            function cancelNewMemo(){
                $("#memobox").slideUp("fast");
            }

            var picker = new Lightpick({
                field: document.getElementById('deadline'),
                onSelect: function(date){
                    console.log(date.unix());
                    deadline = date.unix();
                }
            });


            function createNewMemo(){
                //Create AJAX request
                let payload = {
                    "title": $("#title").val().replace(/<[^>]*>?/gm, ''),
                    "message":$("#message").val().replace(/<[^>]*>?/gm, ''),
                    "deadline": deadline
                }

                console.log(payload);
                $("#memobox").slideUp("fast");
            }

            
        </script>
    </body>
</html>