add-share-store

2025-06-11 18:49:11 +08:00
parent 4648dbf2c8
commit 764a95e64a
2 changed files with 115 additions and 3 deletions
--- a/ejs/observe.ejs
+++ b/ejs/observe.ejs
@@ -39,9 +39,9 @@
    <div id="wrapper">
        <div id="content-wrapper" class="d-flex flex-column">
        <nav class="navbar navbar-expand navbar-light bg-white topbar static-top shadow" style="display:flex;justify-content:space-between" id="project_nav">
-            <div id="top_titles" style="display:flex;flex-direction:column">
+            <div id="top_titles" style="display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%">
                <h1 id="prjName" class="h3 mb-0 text-gray-800" style="display:inline-block;font-weight:bold;font-size:1.25rem;"></h1>
-                <h3 id="shareMessage" class="h3 mb-0 text-gray-800" style="display:inline-block;margin-top:3px;font-size:0.75rem;"></h3>
+                <a class="btn btn-primary" onclick="open_storage()">存储空间</a>
            </div>
        </nav>
            <div class="container-fluid" id="project_detail">
--- a/js/observe.js
+++ b/js/observe.js
@@ -151,4 +151,116 @@ $(function() {
            }
        })
    }
-})
+})
+
+function open_storage(){
+    var editForm = $('<div class="nnt" style="width:80vw;height:80vh;display:flex;flex-direction:column"/>')
+    editForm.append($('<div style="margin-top:-63px;margin-left:calc(40vw - 43px);margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/store.svg" style="width:45px;"></div>'))
+    editForm.append($('<h3 style="text-align:center;margin-bottom:5px">所有发送到<span style="color:#4e73df;font-weight:bold">/storage</span>主题下的消息和图片会被自动保存</h3>'))
+    var messagesContainer = $('<div style="flex:1;overflow-y:auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:15px;align-content:flex-start"/>')
+    var sync_stor = function(){
+        messagesContainer.empty()
+        var sampleMessages = [
+        ]
+        $.getJSON('getImgStore', {
+            'projectName': globalProjectName
+        }, function(res) {
+            if(res.length==0)
+            {
+                messagesContainer.append($('<div style="background:white;border-radius:8px;padding:15px;box-shadow:0 2px 5px rgba(0,0,0,0.1);height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center">暂无存储</div>'))
+            }
+            for (let ri = 0; ri < res.length; ri++) {
+            {
+                let url = "store/" + globalUserName + "/" + globalProjectName + "/" + res[ri]
+                if (url.endsWith('.txt')) {
+                    sampleMessages.push({ type: 'text', content: url })
+                } else{
+                    sampleMessages.push({ type: 'image', content: url })
+                }
+            }
+            }
+            for(let ji = 0; ji < sampleMessages.length; ji++) {
+                let msg = sampleMessages[ji]
+                let messageBox = $('<div style="background:white;border-radius:8px;padding:15px;box-shadow:0 2px 5px rgba(0,0,0,0.1);height:150px;display:flex;flex-direction:column"/>')
+                
+                if (msg.type === 'text') {
+                    $.ajax({
+                        url: msg.content,
+                        success: function(res) {
+                            messageBox.append($('<div style="font-size:14px;word-break:break-all;height:100px"/>').text(res))
+                            // Add timestamp (sample)
+                            let timeStamp = parseInt(msg.content.split("/")[msg.content.split("/").length - 1].split(".")[0])
+                            let timeString = new Date(timeStamp).toLocaleString()
+                            let btdiv = $('<div style="font-size:11px;color:#999;margin-top:10px;text-align:right"></div>')
+                            btdiv.append("<span>" + timeString +"</span>")
+                            let deletebtn = $('<a class="btn btn-danger btn-sm" style="margin-left:10px"><i class="fa fa-trash"></i></a>')
+                            deletebtn.click(function(){
+                                $.getJSON('deleteImgStore', {
+                                    'projectName': globalProjectName,
+                                    'filename': msg.content.split("/")[msg.content.split("/").length - 1]
+                                }, function(){
+                                    sync_stor()
+                                })
+                            })
+                            btdiv.append(deletebtn)
+                            messageBox.append(btdiv)
+                        }
+                    })
+                } else if (msg.type === 'image') {
+                    messageBox.append($('<div style="width:100%;height:100px;text-align:center;overflow:hidden"/><img src="' + msg.content + '" style="max-width:100%;max-height:100px;object-fit:contain;margin:auto"/></div>'))
+                    // Add timestamp (sample)
+                    let timeStamp = parseInt(msg.content.split("/")[msg.content.split("/").length - 1].split(".")[0])
+                    let timeString = new Date(timeStamp).toLocaleString()
+                    let btdiv = $('<div style="font-size:11px;color:#999;margin-top:10px;text-align:right"></div>')
+                    btdiv.append("<span>" + timeString +"</span>")
+                    let viewbtn = $('<a class="btn btn-primary btn-sm" style="margin-left:10px"><i class="fa fa-eye"></i></a>')
+                    viewbtn.click(function(){
+                        // 全屏显示图片，点击任意退出
+                        let fullDialog = dialog({
+                            content: $('<div style="width:60vw;height:60vh;display:flex;align-items:center;justify-content:center"><img src="' + msg.content + '" style="max-width:100%;max-height:100%"/></div>')[0],
+                            cancel: true,
+                            cancelValue: '关闭'
+                        })
+                        fullDialog.showModal()
+                        
+                    })
+                    let deletebtn = $('<a class="btn btn-danger btn-sm" style="margin-left:10px"><i class="fa fa-trash"></i></a>')
+                    deletebtn.click(function(){
+                        $.getJSON('deleteImgStore', {
+                            'projectName': globalProjectName,
+                            'filename': msg.content.split("/")[msg.content.split("/").length - 1]
+                        }, function(){
+                            sync_stor()
+                        })
+                    })
+                    btdiv.append(viewbtn)
+                    btdiv.append(deletebtn)
+                    messageBox.append(btdiv)
+                }
+                messagesContainer.prepend(messageBox)
+            }
+        })
+    }
+    editForm.append(messagesContainer)
+    sync_stor()
+    client.on('message', function(topic, msg) {
+        if(topic.split("/")[2] == "storage")
+            sync_stor()
+    })
+    // Bottom section
+    var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
+    var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
+    bottomDiv.append(cancelEdit)
+    editForm.append(bottomDiv)
+    
+    var modifyDia = dialog({
+        content: editForm[0],
+        cancel: false
+    })
+    
+    cancelEdit.click(function() {
+        modifyDia.close().remove()
+    })
+    
+    modifyDia.showModal()
+}