master

分支 (1)

管理

管理

master

todo-notes
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>测试</title>
    <style>
        * {
            font-size: 14px;
        }

        body {
            background-color: #e4f9e0;
        }

        form {
            margin-top: 10px;
        }

        .desc {
            padding: 5px;
            /*line-height: 30px;*/
            margin: 0;
        }

        .inner {
            background-color: #e4f9e0;
            width: 100%;
            margin-top: 1px;
        }

        .float-left {
            float: left;
        }

        .inner-left {
            width: 17%;
            padding: 3px 0;
            font-size: 12px;
            border: 1px solid white;
            border-radius: 5px;
        }

        .inner-left button {
            font-size: 12px;
        }

        .inner-right {
            width: 82%;
        }
    </style>
</head>
<body>
<div>
    归档文档路径：<span id="path"></span>
    <button onclick="openFile()">打开归档文件</button>
</div>
<form action="" id="formContent">
    <textarea rows="4" placeholder="在此处输入记录的内容，操作说明：&#10;1.输入内容后，按enter键会自动保存到下方内容区，&#10;2.下方可以直接点击内容编辑，失焦后自动保存"
              cols="100" style="width: 98%;margin:  auto ;" id="test" onkeydown="enterKeyDown(event)"></textarea>
</form>

<button onclick="getList()">刷新数据</button>
<div id="content">

    <div class="float-left inner">

        <div class="float-left inner-right"><p class="desc demo" contenteditable="true" data-id="" data-rev=""
                                               data-time="" onfocusout="blurElement(this)">fsdf发送到发送到</p></div>
        <input type="hidden" id="test" value="test">
        <p style="display: none">2023/3/2 20:11:55&emsp;&emsp;
            <button>删除</button> &emsp;<button>归档保存</button>
        </p>
        <div class="float-left inner-left"><span>2023/3/2 20:11:55</span><br>
            <button>置顶</button>
            <button>删除</button>
            <button>归档</button>
        </div>
    </div>
</div>


</body>
<script>
    let fileName = "store.txt"
    // 开发环境，true，开启日志打印功能；false ：关闭日志打印功能
    if (!utools.isDev()) {
        var console = {};
        console.log = function () {
        };//禁用所有控制台输出
    }

    window.onload = function () {
        getList();
        getPath();

    }

    function getPath() {
        document.getElementById("path").innerText = window.GetDocPath(fileName)
    }

    function openFile() {
        let path = document.getElementById("path").innerText
        utools.shellOpenPath(path)
    }

    function getList() {
        let docs = utools.db.allDocs()
        let html = ""
        docs.sort(function (a, b) {
            return a.updatedAt - b.updatedAt;
        })
        docs.reverse();

        let contentElement = document.getElementById("content")
        docs.forEach(function (doc) {
            html += '<div class="float-left inner">' +
                '<div class="float-left inner-right"><p class="desc ' + doc._id + '"  contenteditable="true" data-id="' + doc._id + '" data-rev="' + doc._rev + '" data-time="' + doc.time + '" onfocusout="blurElement(this)">' + doc.data + '</p></div>' +
                '<input type="hidden" value="' + doc._id + '"> ' +
                '<div class="float-left inner-left"><span>' + doc.time + '</span><br><button name="' + doc._id + '" onclick="toTop(this)" >置顶</button> <button name="' + doc._id + '" onclick="deleted(this)">删除</button> <button name="' + doc._id + '" onclick="archive(this)" >归档</button></div>' +
                '</div>'
        })
        contentElement.innerHTML = html

    }

    function deletedDb(docId) {
        utools.db.remove(docId)
        getList()
    }

    function deleted(obj) {
        if (confirm("删除后无法找回数据，确定操作？")===true){
            console.log(obj);
            console.log(obj.getAttribute("name"));
            deletedDb(obj.getAttribute("name"))
            return
        }
        console.log("取消删除数据");
    }

    function toTop(obj) {
        console.log(obj.parentElement.parentNode.firstChild.lastChild);
        blurElement(obj.parentElement.parentNode.firstChild.lastChild)
    }

    function archive(obj) {
        //归档保存到文件,记录归档时间
        let docId = obj.getAttribute("name")
        let docs = document.getElementsByClassName(docId)
        if (docs.length < 1) {
            return
        }
        let msg = docs[0].innerHTML
        let startTime = docs[0].getAttribute("data-time")
        console.log(startTime, msg);
        window.writeFile(msg, startTime, fileName)
        if (utools.isWindows()) {
            console.log('windows')
        }
        // 删除数据
        deletedDb(docId)
    }

    function enterKeyDown(event) {
        let objElement = document.getElementById("test")

        let currentLocalTime = (new Date()).toLocaleString()


        if (event.keyCode === 13) {

            console.log(currentLocalTime);
            let str = objElement.value.trim()
            if (str.length < 1) {
                objElement.value = ""
                return
            }

            objElement.value = ""
            event.preventDefault()
            utools.db.put({
                _id: "demo" + Date.now(),
                time: currentLocalTime,
                updatedAt: (new Date()).getTime(),
                data: str
            })
            getList()
        }
    }

    function blurElement(objElement) {
        let currentLocalTime = (new Date()).toLocaleString()
        console.log(currentLocalTime);
        console.log(objElement.innerHTML);

        let str = objElement.innerHTML.trim()
        if (str.length < 1) {
            objElement.innerHTML = ""
            return
        }

        utools.db.put({
            _id: objElement.getAttribute("data-id"),
            _rev: objElement.getAttribute("data-rev"),
            time: objElement.getAttribute("data-time"),
            updatedAt: (new Date()).getTime(),
            data: str
        })
        getList()

    }

</script>
</html>