prepare for add

chem/index.html

@@ -63,6 +63,17 @@
             display: inline-block;
             transform: translateY(-2px);
             cursor: pointer;
+            transition-duration: 100ms;
+        }
+
+        .label:hover {
+            box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.15);
+            transform: translateY(-3px);
+        }
+
+        .label.label-sub:not(:hover) {
+            font-size: 10px;
+            opacity: 0.5;
         }
 
         .MathJax {
@@ -87,15 +98,15 @@
             height: 34px;
         }
 
-        .addInput {
+        .add {
             margin-top: -1px;
         }
 
-        .addInput:not(:last-child)>:is(span, input) {
+        .add:not(:last-child)>:is(span, input) {
             border-radius: 0;
         }
 
-        .addInput>:is(span, input, textarea) {
+        .add>:is(span, input, textarea) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
@@ -130,7 +141,7 @@
         .frame:not(.active) {
             max-height: 60px;
             min-height: 60px;
-            box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .1);
+            box-shadow: 0 -10px 10px -5px rgba(0, 0, 0, 0.15) inset;
             width: 80%;
             cursor: pointer;
         }
@@ -138,7 +149,7 @@
         .frame:not(.active):hover {
             max-height: 160px;
             width: 100%;
-            box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .1);
+            box-shadow: 0 -10px 10px -5px rgba(0, 0, 0, 0.05) inset;
         }
 
         .has:has(.active) {
@@ -213,8 +224,9 @@
                     <label class="btn btn-default" onclick="nameq='io';setQry()"><input type="radio">离子</label>
                     <label class="btn btn-default" onclick="nameq='el';setQry()"><input type="radio">元素</label>
                 </div>
-                <button type="button" class="btn btn-default" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');strict=!strict;toggl('查询方程式 <span class=\'glyphicon glyphicon-search\'></span>', 0, strict);input()" id="strict"><span class="glyphicon glyphicon-cog"></span> 限制等号左右</button>
-                <button type="button" class="btn btn-default" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');qryToggleMatch()" id="qryMatch"><span class="glyphicon glyphicon-cog"></span> 匹配分子</button>
+                <button type="button" class="btn btn-default op op-query-eq" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');strict=!strict;toggl('查询方程式 <span class=\'glyphicon glyphicon-search\'></span>', strict);input()" id="strict"><span class="glyphicon glyphicon-cog"></span> 限制等号左右</button>
+                <button type="button" class="btn btn-default op op-query-eq" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');qryToggleMatch()" id="qryMatch"><span class="glyphicon glyphicon-cog"></span> 匹配分子</button>
+                <button type="button" class="btn btn-default op op-query-mo" style="display: none;" data-toggle="button" onclick="$(this).toggleClass('btn-info');qryToggleMatch()" id="qryIon"><span class="glyphicon glyphicon-cog"></span> 查找离子</button>
             </h2>
             <div class="input-group">
                 <input style="border-bottom-left-radius: 0;" id="qryInput" type="text" class="form-control qryInput" autocomplete="off" oninput="input2()">
@@ -225,19 +237,31 @@
                 </span>
             </div>
             <div>
-                <span class="input-group addInput" id="addId"><span class="input-group-addon">id</span>
+                <span class="input-group add upd-eq upd-mo" id="addId"><span class="input-group-addon">id</span>
                     <input type="text" class="form-control" id="addIdText" oninput="inputId()" autocomplete="off" placeholder="输入 id">
                 </span>
-                <span class="input-group addInput">
+                <span class="input-group add add-eq">
                     <span class="input-group-addon">反应条件</span>
                     <input id="addCondition" type="text" class="form-control" autocomplete="off" placeholder="加热;高温;点燃;通电;光照;MnO2">
                 </span>
-                <span class="input-group addInput">
+                <span class="input-group add add-mo">
+                    <span class="input-group-addon">中文名</span>
+                    <input id="addTitle" type="text" class="form-control" autocomplete="off" placeholder="四氧化三铁">
+                </span>
+                <span class="input-group add add-mo">
+                    <span class="input-group-addon">化合价</span>
+                    <input id="addCondition" type="text" class="form-control" autocomplete="off" placeholder="">
+                </span>
+                <span class="input-group add add-mo">
+                    <span class="input-group-addon">离子</span>
+                    <input id="addCondition" type="text" class="form-control" autocomplete="off" placeholder="">
+                </span>
+                <span class="input-group add add-eq add-mo">
                     <span class="input-group-addon">描述</span>
                     <textarea id="addDescription" type="text" class="form-control" autocomplete="off" style="resize:vertical"></textarea>
                 </span>
             </div>
-            <pre class="ok" style="font-family: Chalkduster,Consolas;top: -1px;position: relative;border-top-left-radius: 0;border-top-right-radius: 0;"></pre>
+            <pre class="ok op op-query-eq op-query-mo op-query-io op-query-el" style="font-family: Chalkduster,Consolas;top: -1px;position: relative;border-top-left-radius: 0;border-top-right-radius: 0;"></pre>
             <hr>
             <div class="has">
                 <span onclick="nameq='eq';setQry()">化学式</span>
@@ -248,7 +272,19 @@
             <div class="has">
                 <span onclick="nameq='mo';setQry()">分子</span>
                 <div class="well frame">
-                    <span id="qryInputRender-mo"></span>
+                    <span id="qryInputRender-mo">...</span>
+                </div>
+            </div>
+            <div class="has">
+                <span onclick="nameq='io';setQry()">离子</span>
+                <div class="well frame">
+                    <span id="qryInputRender-io">...</span>
+                </div>
+            </div>
+            <div class="has">
+                <span onclick="nameq='el';setQry()">元素</span>
+                <div class="well frame">
+                    <span id="qryInputRender-el">...</span>
                 </div>
             </div>
         </div>

js/chem.js

@@ -297,19 +297,17 @@ function balUp() {
 //QUERY-------------------------------
 
 var modeq = 'query', nameq = 'eq', strict = false, matchMode = 'mole'
-function toggl(str, e = 0, f = 0) {
+function toggl(str, is = 0) {
     $('#qryBtn').html(str)
-    if (e) {
-        $('#strict').hide()
-        $('#qryMatch').hide(), $('.addInput').show(), $('.ok').hide()
-        if (e == 2) $('#addId').show()
+    $('.add').hide()
+    $('.op').hide()
+    $('.op-' + modeq + '-' + nameq).show()
+    if (modeq == 'add' || modeq == 'upd') {
+        $('.add-' + nameq).show()
+        if (modeq == 'upd') $('#addId').show()
         else $('#addId').hide()
     }
-    else {
-        $('#strict').show()
-        $('#qryMatch').show(), $('.addInput').hide(), $('.ok').show()
-    }
-    if (f) $('.qryInputHidable').show()
+    if (is) $('.qryInputHidable').show()
     else $('.qryInputHidable').hide()
 }
 function setQry() {
@@ -320,20 +318,15 @@ function setQry() {
         $('.qry-group>label').removeClass('active')
         $('.qry-group>label')[0].classList.add('active')
         if (modeq == 'query') {
-            toggl('查询 <span class="glyphicon glyphicon-search"></span>')
-            strict = false
-            $('#strict').removeClass('btn-info').removeClass('active')
-            $('#qryMatch').removeClass('btn-info').removeClass('active')
-            $('#qryMatch').html('<span class="glyphicon glyphicon-cog"></span> 匹配分子')
-            matchMode = 'mole'
+            toggl('查询 <span class="glyphicon glyphicon-search"></span>', strict)
             $('#qryInput').attr('placeholder', 'O2=H2O' + '（输入化学式查询数据库，也可输入 id）')
             input2();
         }
         else if (modeq == 'add') {
-            toggl('上传 <span class="glyphicon glyphicon-plus"></span>', 1)
+            toggl('上传 <span class="glyphicon glyphicon-plus"></span>')
             $('#qryInput').attr('placeholder', 'H2+O2=H2O' + '（输入化学式上传至数据库）')
         } else {
-            toggl('修改 <span class="glyphicon glyphicon-pencil"></span>', 2)
+            toggl('修改 <span class="glyphicon glyphicon-pencil"></span>')
             $('#qryInput').attr('placeholder', '（修改已有化学式）')
         }
     } else if (nameq == 'mo') {
@@ -342,6 +335,32 @@ function setQry() {
         $('.frame').removeClass('active')
         $('.frame')[0].classList.add('active')
         $('.frame')[2].classList.add('active')
+        if (modeq == 'query') {
+            toggl('查询 <span class="glyphicon glyphicon-search"></span>')
+            $('#qryMatch').html('<span class="glyphicon glyphicon-cog"></span> 匹配分子')
+            matchMode = 'mole'
+            $('#qryInput').attr('placeholder', 'Fe' + '（输入分子查询数据库，也可输入 id）')
+            input2();
+        }
+        else if (modeq == 'add') {
+            toggl('上传 <span class="glyphicon glyphicon-plus"></span>')
+            $('#qryInput').attr('placeholder', 'Fe3O4' + '（输入分子上传至数据库）')
+        } else {
+            toggl('修改 <span class="glyphicon glyphicon-pencil"></span>')
+            $('#qryInput').attr('placeholder', '（修改已有分子）')
+        }
+    } else if (nameq == 'io') {
+        $('.qry-group>label').removeClass('active')
+        $('.qry-group>label')[2].classList.add('active')
+        $('.frame').removeClass('active')
+        $('.frame')[0].classList.add('active')
+        $('.frame')[3].classList.add('active')
+    } else {
+        $('.qry-group>label').removeClass('active')
+        $('.qry-group>label')[3].classList.add('active')
+        $('.frame').removeClass('active')
+        $('.frame')[0].classList.add('active')
+        $('.frame')[4].classList.add('active')
     }
     input2()
 }
@@ -399,7 +418,7 @@ function getRegex() {
 }
 
 function doQuery(bd, isId = '', replace = 1, insAfter = -1) {
-    console.log(bd, isId)
+    console.log(bd, isId, replace)
     return fetch('/chem/query/' + nameq + isId, {
         method: 'POST',
         headers: {
@@ -436,14 +455,14 @@ function doQuery(bd, isId = '', replace = 1, insAfter = -1) {
                 } else $('.frame')[1].innerHTML = ''
                 var str = ''
                 for (let i = 0; i < e.length; i++) {
-                    str += '<div class="result res-' + i + '">' + renderEquation(e[i].content, e[i].conditions) + '<br><span class="label label-' + (e[i].rel ? (e[i].rel > 0 ? 'warning' : 'success') : 'default') + '" onclick="$(\'#qryInput\').val(' + e[i].id + ');input2()">' + e[i].id + '</span> ';
+                    str += `<div class="result res-${i}">${renderEquation(e[i].content, e[i].conditions)}<br><span class="label label-${e[i].rel ? (e[i].rel > 0 ? 'warning' : 'success') : 'default'}" onclick="doQuery(JSON.stringify({content:'${e[i].id}'}),'id',2,-2)">${e[i].id}</span> `;
                     if (e[i].conditions) str += '（' + e[i].conditions + '）';
                     str += e[i].descriptions + '<br>';
                     if (e[i].rel > 0) {
-                        str += `<span class="glyphicon glyphicon-share-alt"></span> <span class="label label-success" onclick="$(this).siblings('.result').length||doQuery(JSON.stringify({content:'${e[i].rel}'}),'id',0,${i})">${e[i].rel}</span><br>`;
+                        str += `<span class="glyphicon glyphicon-share-alt"></span> <span class="label label-sub label-success" onclick="$(this).siblings('.result').length||doQuery(JSON.stringify({content:'${e[i].rel}'}),'id',2,${i})">${e[i].rel}</span><br>`;
                     }
                     if (e[i].rel < 0) {
-                        str += `<span class="glyphicon glyphicon-share-alt"></span> <span class="label label-warning" onclick="$(this).siblings('.result').length||doQuery(JSON.stringify({content:'${-e[i].rel}'}),'id',0,${i})">${-e[i].rel}</span><br>`;
+                        str += `<span class="glyphicon glyphicon-share-alt"></span> <span class="label label-sub label-warning" onclick="$(this).siblings('.result').length||doQuery(JSON.stringify({content:'${-e[i].rel}'}),'id',2,${i})">${-e[i].rel}</span><br>`;
                     }
                     if (isId) {
                         if (replace) $('#qryInput').val(e[0].content)