重新编写设置页面conf/index.html，图形化配置工具基本完成。

kawashiro-ryofu · Sep 10, 2022 · 9b00d7c · 9b00d7c
1 parent b59a9ea
commit 9b00d7c
Show file tree

Hide file tree

Showing 12 changed files with 312 additions and 30 deletions.
diff --git a/conf/conf.json b/conf/conf.json
@@ -0,0 +1,24 @@
+{
+	"SettingsItemList": [
+		{
+			"itemName": "connections",
+			"itemLabel": "连接",
+			"itemIcon": "ri-reserved-fill"
+		},
+		{
+			"itemName": "notifications",
+			"itemLabel": "通知",
+			"itemIcon": "ri-notification-4-fill"
+		},
+		{
+			"itemName": "general",
+			"itemLabel": "常规",
+			"itemIcon": "ri-dashboard-fill"
+		},
+		{
+			"itemName": "about",
+			"itemLabel": "关于",
+			"itemIcon": "ri-information-fill"
+		}
+	]
+}
diff --git a/conf/confitems/connections.html b/conf/confitems/connections.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <link href="../frame.css" rel="stylesheet">
+    <script src="../../static/js/jquery/jquery.min.js"></script>
+</head>
+<body>
+    <h1>连接</h1>
+    <form>
+        服务器URL:<br>
+        <input id="serverURL" type="text" name="服务器URL" placeholder="e.g. http(s)://hostname:port/"><br>
+        Token:<br>
+        <input id="token"  type="text" name="Token" placeholder="e.g. XXXXXXXXXXXXXXXX"><br>
+    </form>
+    <script>
+        //  将原设置内容应用于文本框
+        var LocalSettings = parent.LocalSettings
+
+        $('#serverURL').attr('value', LocalSettings.settings.connections.serverURL)
+        $('#token').attr('value', LocalSettings.settings.connections.token)
+
+        //  serverURL修改时的触发器
+        let isu = document.getElementById('serverURL')
+        isu.oninput=()=>{
+            LocalSettings.settings.connections.serverURL = isu.value
+            LocalSettings.save2fs()
+
+        }
+
+        //  token修改时的触发器
+        let itk = document.getElementById('token')
+        itk.oninput=()=>{
+            LocalSettings.settings.connections.token = itk.value
+            LocalSettings.save2fs()
+        }
+
+    </script>
+</body>
diff --git a/conf/confitems/general.html b/conf/confitems/general.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <link href="../frame.css" rel="stylesheet">
+    <script src="../../static/js/jquery/jquery.min.js"></script>
+</head>
+<body>
+    <h1>常规</h1>
+    <form>
+        自定义标题<br>
+        <input id="customTitle" type="text" name="customTitle" placeholder="I can eat glass, it doesn't hurt me."><br>
+    </form>
+    <script>
+        //  将原设置内容应用于文本框
+        var LocalSettings = parent.LocalSettings
+        $('#customTitle').attr('value', LocalSettings.settings.general.customTitle)
+
+        //  customTitle修改时的触发器
+        let cst = document.getElementById('customTitle')
+        cst.oninput=()=>{
+            LocalSettings.settings.general.customTitle = cst.value
+            LocalSettings.save2fs()
+        }
+
+    </script>
+</body>
diff --git a/conf/confitems/notifications.html b/conf/confitems/notifications.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <link href="../frame.css" rel="stylesheet">
+    <script src="../../static/js/jquery/jquery.min.js"></script>
+</head>
+<body>
+    <h1>通知</h1>
+    <form>
+        <input id="noDisturb" type="checkbox" name="勿扰" >勿扰<br><br>
+    </form>
+    <div>
+
+    </div>
+    <script>
+        //  将原设置内容应用于文本框
+        var LocalSettings = parent.LocalSettings
+        $("#noDisturb").attr('checked', LocalSettings.settings.noDisturb.enable)
+
+
+        let nde = document.getElementById('noDisturb')
+        nde.oninput=()=>{
+            console.log($("#noDisturb").prop('checked'))
+            LocalSettings.settings.noDisturb.enable = $("#noDisturb").prop('checked')
+            LocalSettings.save2fs()
+        }
+        /*
+        let nde = document.getElementById('noDisturb')
+        nde.oninput=()=>{
+            LocalSettings.settings.noDisturb.enable = nde.value
+            LocalSettings.save2fs()
+        }
+        
+        $('#serverURL').attr('value', LocalSettings.settings.connections.serverURL)
+        $('#token').attr('value', LocalSettings.settings.connections.token)
+
+        //  serverURL修改时的触发器
+        let isu = document.getElementById('serverURL')
+        isu.oninput=()=>{
+            LocalSettings.settings.connections.serverURL = isu.value
+            LocalSettings.save2fs()
+
+        }
+
+        //  token修改时的触发器
+        let itk = document.getElementById('token')
+        itk.oninput=()=>{
+            LocalSettings.settings.connections.token = itk.value
+            LocalSettings.save2fs()
+        }
+*/
+    </script>
+</body>
diff --git a/conf/frame.css b/conf/frame.css
@@ -0,0 +1,18 @@
+body{
+    color: white;
+    font-size: 3vh;
+}
+
+h1{
+    font-size: 6vh;
+}
+
+input[type="text"]{
+    height: 5vh;
+    width: 60%;
+    border: aqua 1px solid;
+    border-radius: 2vh;
+    margin: 12px;
+    font-size: 3vh;
+}
+
diff --git a/conf/index.html b/conf/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">-->
+    <link href="../styles.css" rel="stylesheet">
+    <link href='../static/css/font-awesome/css/font-awesome.min.css' rel="stylesheet">
+    <link href='../static/css/remixicon/fonts/remixicon.css' rel="stylesheet">
+    <title>设置</title>
+</head>
+<style>
+a.settings-itemlnk {
+    font-size: 4vh;
+    padding: 5px;
+    text-decoration: none;
+    transition: color .3s;
+}
+a.settings-itemlnk:hover {
+    color: #00CCFF;
+}
+#settings-sidebar li {
+    list-style-type: none;
+    padding-top: 20px;
+    padding-bottom: 2px;
+}
+#settings-item-frame {
+    position: absolute;
+    left: 25vh;
+    right: 5vh;
+    top: 3vh;
+    bottom: 3vh;
+    text-overflow: clip;
+    overflow: hidden;
+}
+#settings-item-frame iframe{
+    width: 99%;
+    height: 99%;
+    background: #00000000;
+    color: white;
+    border: 0px;
+}
+</style>
+<body>
+    <script>window.$ = window.jQuery = require("../static/js/jquery/jquery.js");</script>
+    <div id="settings-sidebar" style="display: none"><ul id="settings-item-list"></ul></div>
+    <div id="settings-item-frame">
+        <iframe id="sframe" src="welcome.html"></iframe>
+    </div>
+</body>
+<script>
+    //  依赖 引入
+    const {usrdir} = require('../usrdir.js')
+    const settings = require('../settings.js')
+    const path = require('path')
+    const fs = require('fs')
+    const log = require('electron-log')
+
+    //  侧栏项目·模板
+    const template = '<li><a class="settings-itemlnk" href="#" data="{{ itemName }}" onclick="SwitchTo(\'{{ itemName }}\')" title="{{ itemLabel }}"><i class="{{ itemIcon }}"></i>{{ itemLabel }}</a></li><br>'
+
+    //  设置类
+    var LocalSettings = new settings.LocalSettings(usrdir.settings)
+    LocalSettings.loadFfs()
+
+    //  读取配置列表
+    function LoadConfItems(){
+        $('#settings-sidebar').empty()
+        let confItemList = require('./conf.json').SettingsItemList
+        confItemList.forEach((val, index) => {
+            let iout = template
+            iout = iout.replaceAll('{{ itemName }}', val.itemName)
+            iout = iout.replaceAll('{{ itemLabel }}', val.itemLabel)
+            iout = iout.replaceAll('{{ itemIcon }}', val.itemIcon)
+            $('#settings-sidebar').append(iout)
+        });
+        $('#settings-sidebar').slideDown()
+    }
+
+    //  切页
+    function SwitchTo(itemName){
+        LocalSettings.loadFfs()
+        $('.settings-itemlnk').removeAttr('style')
+        $(`[data="${itemName}"]`).css('color', "white")
+        $('#sframe').fadeOut()
+        setTimeout(()=>{
+            let x = $('#sframe')
+            x.attr('src', `confitems/${itemName}.html`)
+            setTimeout(()=>{x.fadeIn()}, 100)
+        }, 500)
+    }
+
+
+
+    LoadConfItems()
+</script>
diff --git a/conf/welcome.html b/conf/welcome.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <link href="frame.css" rel="stylesheet">
+</head>
+<body>
+    <h1>此处是设置</h1>
+    <span>若你在这一页多停留一分钟，你就会失去六十秒。</span>
+</body>
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
       <div id="main-wrapper">
         <h1 class="title">Ayase</h1>
         <div id="navi">
-          <a class="naviobj settings" title="设置" onclick="toMainTask('run', JSON.stringify({cmd: LocalSettings.file}))"><i class="fa fa-cog" aria-hidden="true"></i></a>
+          <a class="naviobj settings" title="设置" onclick="toMainTask('settings')"><i class="fa fa-cog" aria-hidden="true"></i></a>
           <a class="naviobj refresh" title="刷新" onclick="LocalSettings.loadFfs();GetDataFromRemote()"><i class="fa fa-refresh" aria-hidden="true"></i></a>
           <a class="naviobj nodisturb" title="勿扰"><i class="fa fa-bell" aria-hidden="true"></i></a>
           |
@@ -125,10 +125,12 @@ <h1 class="title">Ayase</h1>
           t += ': 开'
           $('.naviobj.nodisturb i').removeClass()
           $('.naviobj.nodisturb i').addClass(f + 'fa-bell-slash on')
+          $('.naviobj.nodisturb i').attr('enabled', 'true')
         }else{
           t += ': 关'
           $('.naviobj.nodisturb i').removeClass()
           $('.naviobj.nodisturb i').addClass(f + 'fa-bell')
+          $('.naviobj.nodisturb i').attr('enabled', 'false')
         }
         $('.naviobj.nodisturb').attr({'title': t})
         if(showSnack)SnackBar({message: t, position: 'tr', status: 'success'})
@@ -143,6 +145,16 @@ <h1 class="title">Ayase</h1>
         })
         noDisturbIcon(false)
       })
+
+      setInterval(()=>{
+          LocalSettings.loadFfs()
+          if(
+            (LocalSettings.settings.noDisturb.enable ^ ($('.naviobj.nodisturb i').attr('enabled') == 'true')) ||
+            (!LocalSettings.settings.noDisturb.enable ^ ($('.naviobj.nodisturb i').attr('enabled') == 'false'))
+          ){
+            noDisturbIcon()
+          }
+      }, 1000)
     </script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -76,7 +76,7 @@ ipcMain.on('asynchronous-message', (event, arg) => {
           },
         })
 
-        settingsWindow.loadFile('settings.html')
+        settingsWindow.loadFile('conf/index.html')
         log.info('Started Settings Window')
 
         settingsWindow.on('closed',()=>{
@@ -171,11 +171,11 @@ function sideNBar (scrwidth, scrheight) {
 
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
-  mainWindow.webContents.closeDevTools()
+
   log.info(`Loaded Sidebar Window`)
   //mainWindow.setSkipTaskbar(true)
   // Open the DevTools.
-  mainWindow.webContents.openDevTools()
+  //mainWindow.webContents.openDevTools()
 
   require("@electron/remote/main").enable(mainWindow.webContents)
 

diff --git a/renderer.js b/renderer.js
@@ -572,25 +572,10 @@ try{
 }
 
 //  用户目录
-var usrdir = {
-    rundir: __dirname,
-    home: process.env.USERPROFILE || process.env.HOME,
-}
-usrdir.usrdir = path.join(usrdir.home, '.ayase')
-if(!fs.existsSync(usrdir.usrdir)){
-    log.warn(`Initing User Directory: Does not exist`)
-    try{
-        fs.mkdirSync(usrdir.usrdir)
-    }catch(err){
-        log.error(`Creating User Directory: ${err}`)
-    }
-}
-usrdir.rendercache = path.join(usrdir.usrdir, 'rendercache')
-usrdir.settings = path.join(usrdir.usrdir, 'settings')
-usrdir.templates = path.join(usrdir.rundir, 'templates')
+const {usrdir} = require('./usrdir.js')
 
-// 设置项
 
+// 设置项
 try{
     const settings = require('./settings.js')
     var LocalSettings = new settings.LocalSettings(usrdir.settings)