TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
							<!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>
        <link rel="icon" type="image/png" href="img/small_icon.png"/>
        <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" onclick="listAllMemo();">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>
        <div id="deadlineTodayBanner" class="hero is-danger">
            <div class="hero-body">
                <p class="title">
                Deadline Today!
                </p>
                <p class="subtitle">
                Deadline within 24 hours!!!
                </p>
            </div>
        </div>
        <div id="deadlineTodayList">

        </div>

        <div id="deadlineSoonBanner" class="hero is-warning">
            <div class="hero-body">
                <p class="title">
                Deadline Soon
                </p>
                <p class="subtitle">
                Deadline this week
                </p>
            </div>
        </div>
        <div id="deadlineSoonList">

        </div>
        <div class="hero is-medium is-link">
            <div class="hero-body">
                <p class="title">
                Other Memos
                </p>
                <p class="subtitle">
                Non urgent items
                </p>
            </div>
        </div>
        <div id="memolist">

        </div>
        <script>
            let deadline = 0;
            let memoBuf = {};
            let removeMemoAfterSubmit = false;
            let currentEditingMemoID = 0;

            function openMemoBox(){
                deadline = 0;
                removeMemoAfterSubmit = false;
                $("#title").val("");
                $("#message").val("");
                $("#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 timestampToDateString(key){
                return new Date(parseInt(key)).toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday:"long", hour: '2-digit', hour12: false, minute:'2-digit', second:'2-digit'})
            }
            
            function uuidv4() {
                return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
                    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
                );
            }

            function listAllMemo(){
                $(".memeobject").remove();
                memoBuf = {};
                ao_module_agirun("Memo/backend/listmemo.js", {}, function(data){
                    let memos = [];
                    for (var [key, value] of Object.entries(data)) {
                        let content = JSON.parse(value);
                        console.log(key, content);
                        memoBuf[key] =  content;
                        memos.push([key, content]);
                    }

                    let deadlineTodayItemCount = 0;
                    let deadlineSoonItemCount = 0;
                    memos.reverse();
                    memos.forEach(function(memo){
                        let key = memo[0];
                        let content = memo[1];
                        let deadline = timestampToDateString(content.deadline * 1000);
                        if (content.deadline == 0){
                            deadline = "No Deadline";
                        }
                        let fullContent = content.message;
                        let displayContent = ``;
                        let thisUUID = uuidv4();
                        if (fullContent.length > 800){
                            let abstract = fullContent.substr(0, 600);
                            let remaining = fullContent.substr(600);
                            displayContent = abstract + `<span id="${thisUUID}" style="display:none;">${remaining}</span><br><a onclick="handleReadMore('${thisUUID}', this);">Read More</a>`;
                        }else{
                            displayContent = fullContent;
                        }

                        let appendTarget = $("#memolist");
                        if (content.deadline > 0){
                            let timeBeforeDeadline = (content.deadline - (Math.floor(Date.now() / 1000)));
                            if (timeBeforeDeadline / 3600 < 24){
                                //Deadline today
                                appendTarget = $("#deadlineTodayList");
                                deadlineTodayItemCount++;
                            }else if (timeBeforeDeadline / 3600 < (24 * 7)){
                                //Deadline this week
                                appendTarget = $("#deadlineSoonList");
                                deadlineSoonItemCount++;
                            }else{

                            }
                        }
                        
                        appendTarget.append(`<div class="card memeobject">
                            <br>
                            <div class="card-content">
                                <div class="media">
                                <div class="media-left">
                                    <figure class="image is-48x48">
                                    <img src="img/small_icon.png">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-4">${content.title}</p>
                                    <p class="subtitle is-6">${deadline}</p>
                                </div>
                                </div>
                                <div class="content">
                                    ${displayContent}
                                <br>
                                <time>Creation Date: ${timestampToDateString(key)}</time>
                                </div>
                            </div>
                            <footer class="card-footer">
                                <a href="#" class="card-footer-item" memo="${key}" onclick="moveToTop(this)">Move to Top</a>
                                <a href="#" class="card-footer-item" memo="${key}" onclick="editMemo(this);">Edit</a>
                                <a href="#" class="card-footer-item" memo="${key}" onclick="removeMemoByButton(this);">Delete</a>
                            </footer>
                            </div>`);
                    });

                    if (deadlineTodayItemCount == 0){
                        $("#deadlineTodayBanner").hide();
                    }else{
                        $("#deadlineTodayBanner").show();
                    }

                    if (deadlineSoonItemCount == 0){
                        $("#deadlineSoonBanner").hide();
                    }else{
                        $("#deadlineSoonBanner").show();
                    }
                })
            }

            listAllMemo();

            function editMemo(btn){
                let memoID = $(btn).attr("memo");
                loadMemoContentIntoNewMemoField(memoBuf[memoID]);
                $("#memobox").slideDown("fast");
                removeMemoAfterSubmit = true;
                currentEditingMemoID = memoID;
            }

            function loadMemoContentIntoNewMemoField(content){
                $("#title").val(content.title);
                $("#message").val(content.message);
                if (content.deadline > 0){
                    $("#deadline").val(new Date(content.deadline * 1000).toLocaleDateString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit'}));
                }
                deadline = content.deadline;
            }

            function handleReadMore(targetSpanID, btn){
                $("#" + targetSpanID).show();
                $(btn).hide();
            }

            function moveToTop(btn){
                let memoID = $(btn).attr("memo");
                loadMemoContentIntoNewMemoField(memoBuf[memoID]);
                createNewMemo(function(){
                    removeMemo(memoID);
                });
                
            }

            function removeMemoByButton(btn){
                let memoID = $(btn).attr("memo");
                removeMemo(memoID);
            }

            function removeMemo(memoID, callback){
                ao_module_agirun("Memo/backend/removeMemo.js", {
                    "memoid": memoID
                }, function(data){
                   console.log(data);
                   listAllMemo();
                   if (callback){
                        callback();
                   }
                });
            }

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

                console.log(payload);
                ao_module_agirun("Memo/backend/addMemo.js", {
                    "memo": JSON.stringify(payload)
                }, function(data){
                    if (data.error == undefined){
                        $("#memobox").slideUp("fast");
                    }

                    if (removeMemoAfterSubmit){
                        removeMemoAfterSubmit = false;
                        removeMemo(currentEditingMemoID, callback);
                        currentEditingMemoID = 0;
                    }else{
                        if (callback){
                            callback();
                        }else{
                            listAllMemo();
                        }
                    }
                   
                })
                
            }

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