From 80b3161de0a5873db337ec84841f0c7eea0daab4 Mon Sep 17 00:00:00 2001
From: Metabox <vilijanac@gmail.com>
Date: Mon, 5 Aug 2019 11:41:13 +1000
Subject: [PATCH] RTF JSON page interation bettered.

---
 htdocs/cgi-bin/main.cgi      |  56 +++++++++-----
 htdocs/cgi-bin/wsrc/main.css |   3 +
 htdocs/cgi-bin/wsrc/main.js  | 140 ++++++++++++++++++++++++++++++-----
 3 files changed, 162 insertions(+), 37 deletions(-)

diff --git a/htdocs/cgi-bin/main.cgi b/htdocs/cgi-bin/main.cgi
index 70861bf..2bac432 100755
--- a/htdocs/cgi-bin/main.cgi
+++ b/htdocs/cgi-bin/main.cgi
@@ -510,8 +510,7 @@ qq(\n<img src="$lnk" width="$imgw" height="$imgh" class="tag_FRM"/>);
         }
 
         if ( $rtf > 0 ) {
-            $log .=
-qq(<hr><button id="btnRTF" onClick="return loadRTF(true, $id);">`RTF</button>);
+            $log .= qq(<hr><button id="btnRTF" onClick="return loadRTF(true, $id);">`RTF</button>);
         }
 
         $tbl .= qq(<tr class="r$tfId">
@@ -524,8 +523,17 @@ qq(<hr><button id="btnRTF" onClick="return loadRTF(true, $id);">`RTF</button>);
         <input id="r$id" type="hidden" value="$rtf"/>
 			<button class="edit" value="Edit" onclick="return edit($id);">Edit</button>
 			<input name="chk" type="checkbox" value="$id"/>
-		</td>
-	</tr>);
+		</td></tr>);
+        
+        if ( $rtf > 0 ) {
+             $tbl .= qq(<tr id="q-rtf$id" class="r$tfId" style="display:none;">
+                         <td colspan="6">
+                          <div id="q-scroll$id" style="height:auto; max-height:480px; padding: 10px; background:#fffafa; overflow-y: auto;">
+                            <div id="q-container$id"></div>
+                          </div>
+                        </td></tr>);
+        }
+
         $tbl_rc += 1;
 
         if ( $REC_LIMIT > 0 && $tbl_rc == $REC_LIMIT ) {
@@ -593,8 +601,10 @@ qq(<hr><button id="btnRTF" onClick="return loadRTF(true, $id);">`RTF</button>);
         }
     }
 
-    $tbl .=
-qq(<tr class="r0"><td colspan="2">[Show Again The Hidden By -> <a id="menu_close" href="#" onclick="return showAll();"><span  class="ui-icon ui-icon-heart"></span></a>]
+    $tbl .= <<_TXT;
+<tr class="r0"><td colspan="2">Show All Again -&#62; 
+<a id="menu_close" href="#" onclick="return showAll();"><span  class="ui-icon ui-icon-heart" style="float:none;></span></a>
+
 <a href="#top">&#x219F;</a></td>
 <td colspan="4" align="right"> 
     <input type="hidden" name="datediff" id="datediff" value="0"/>
@@ -610,12 +620,13 @@ qq(<tr class="r0"><td colspan="2">[Show Again The Hidden By -> <a id="menu_close
     <input id="rs_keys2" name="keywords" type="text" size="60"/></td>
     <td><input type="submit" value="Search"/></td></tr>
 </form>
-</TABLE>);
+</TABLE>
+_TXT
 
-    my ( $sp1, $sp2 );
-    $sp1 = '<span  class="ui-icon ui-icon-heart" style="float:right;"></span>';
-    $sp2 =
-qq(<span  class="ui-icon ui-icon-circle-triangle-s" style="float:right;"></span>);
+    my ( $sp1, $sp2, $sp3 );    
+    $sp1 = '<span  class="ui-icon ui-icon-heart"></span>';
+    $sp2 = '<span  class="ui-icon ui-icon-circle-triangle-s"></span>';
+    $sp3 = '<span  class="ui-icon ui-icon-arrow-4-diag"></span>';
 
     my $frm = qq(<a name="top"></a>
 <form id="frm_entry" action="main.cgi" onSubmit="return formValidation();">
@@ -630,7 +641,7 @@ qq(<span  class="ui-icon ui-icon-circle-triangle-s" style="float:right;"></span>
       . $today->ymd . " " . $today->hms . qq(">
 	
 	&nbsp;<button type="button" onclick="return setNow();">Now</button>
-			&nbsp;<button type="reset">Reset</button></td>
+			&nbsp;<button type="reset"  onclick="setNow();resetDoc(); return true;">Reset</button></td>
 			<td style="text-align:top; vertical-align:top">Category: 
     $cats
 				<br><br><div id="cat_desc" name="cat_desc"></div>
@@ -643,11 +654,11 @@ qq(<span  class="ui-icon ui-icon-circle-triangle-s" style="float:right;"></span>
 	</tr>
 	<tr class="collpsd"><td style="text-align:right"><a id="to_bottom" href="#bottom" title="Go to bottom of page.">&#x21A1;</a>&nbsp;Amount:</td>
 		<td id="al">
-			<input id="am" name="am" type="number" step="any">&nbsp;<input id="RTF" name="rtf" type="checkbox" onclick="return toggleDocument();"/> RTF Document
+			<input id="am" name="am" type="number" step="any">&nbsp;<input id="RTF" name="rtf" type="checkbox" onclick="return toggleDoc(true);"/> RTF Document
 		</td>
 		<td align="right">			  
 				<div style="float: right;"><button id="btn_srch" onclick="toggleSearch(); return false;">Show Search</button>&nbsp;
-				<input id="log_submit" type="submit" onclick="saveRTF(-1, 'store');" value="Submit"/></div>
+				<input id="log_submit" type="submit" onclick="return saveRTF(-1, 'store');" value="Submit"/></div>
 		</td>		
 	</tr>
 	<tr class="collpsd"><td colspan="3"></td></tr>
@@ -707,9 +718,10 @@ qq(<span  class="ui-icon ui-icon-circle-triangle-s" style="float:right;"></span>
     print
 qq(<div id="menu" title="To close this menu click on its heart, and wait.">
 <div class="hdr" style="marging=0;padding:0px;">
-<a id="to_top" href="#top" title="Go to top of page."><span class="ui-icon ui-icon-arrowthick-1-n"></span></a>&nbsp;
-<a id="to_bottom" href="#bottom" title="Go to bottom of page."><span class="ui-icon ui-icon-arrowthick-1-s"></span></a>
-<a id="menu_close" href="#" onclick="return hideLog();"><span  class="ui-icon ui-icon-heart"></span></a>
+
+<a id="to_top" href="#top" title="Go to top of page."><span class="ui-icon ui-icon-arrowthick-1-n" style="float:none;"></span></a>&nbsp;
+<a id="to_bottom" href="#bottom" title="Go to bottom of page."><span class="ui-icon ui-icon-arrowthick-1-s" style="float:none;"></span></a>
+<a id="menu_close" href="#" onclick="return hideLog();"><span class="ui-icon ui-icon-heart" style="float:none;"></span></a>
 </div>
 <hr>
 <a class="a_" href="stats.cgi">Stats</a><hr>
@@ -1090,9 +1102,10 @@ sub quill{
 
 return <<___STR;
 <table id="tbl_doc" class="tbl" width="$PRC_WIDTH%" style="border:1; margin-top: 5px;" hidden>
-	<tr class="r0" style="text-align:center"><td><b>* Document *</b>
+	<tr class="r0" style="text-align:center"><td><b>* Document *</b>    
     <a id="log_close" href="#" onclick="return hideDoc();">$sp1</a>
-    <a id="log_close" href="#" onclick="return toggleDoc();">$sp2</a>    
+    <a id="log_close" href="#" onclick="return toggleDoc();">$sp2</a>
+    <a id="log_close" href="#" onclick="return resizeDoc();">$sp3</a>
     </td>
 </tr>
 <tr id="rtf_doc"><td>
@@ -1137,6 +1150,11 @@ return <<___STR;
       <button class="ql-video"></button>
       <button class="ql-formula"></button>
     </span>  
+    <span class="ql-formats">        
+        <button class="ql-formats" id="pbck_lighter" onClick="editorBackgroundLighter();">Lighter&nbsp;&nbsp;</button>
+        <button class="ql-formats" id="pbck_neutral" onClick="editorBackgroundReset();">&nbsp;Reset&nbsp;</button>
+        <button id="pbck_darker" onClick="editorBackgroundDarker();">&nbsp;&nbsp;Darker</button>        
+    </span>
   </div>
   <div id="editor-container" style="$height"></div>
   <div class="save_button">
diff --git a/htdocs/cgi-bin/wsrc/main.css b/htdocs/cgi-bin/wsrc/main.css
index 01b2f68..c8a550c 100644
--- a/htdocs/cgi-bin/wsrc/main.css
+++ b/htdocs/cgi-bin/wsrc/main.css
@@ -194,6 +194,9 @@ img {
 .ui-menu .ui-menu-item a.ui-state-active {
     margin: -1px;
 }
+.ui-icon{
+    float:right;
+}
 
 #standalone-container {
     margin-top: 5px;
diff --git a/htdocs/cgi-bin/wsrc/main.js b/htdocs/cgi-bin/wsrc/main.js
index 2c0fa13..4719a88 100644
--- a/htdocs/cgi-bin/wsrc/main.js
+++ b/htdocs/cgi-bin/wsrc/main.js
@@ -232,6 +232,7 @@ function setNow() {
     var dd = fix0(dt.getDate());
     date.value = dt.getFullYear() + "-" + mm + "-" + dd + " " +
         fix0(dt.getHours()) + ":" + fix0(dt.getMinutes()) + ":" + fix0(dt.getSeconds());
+    toggleDoc(true);
     return false;
 }
 
@@ -358,9 +359,26 @@ function viewAll() {
     return false;
 }
 
-function toggleDocument() {
-    $('#tbl_doc').toggle();
-    $('#toolbar-container').toggle();
+
+function toggleDoc(whole) {
+
+    
+    if(whole){
+        if($("#RTF").prop('checked')){
+            $("#rtf_doc").show();
+            $('#tbl_doc').show();
+            $('#toolbar-container').show();
+        }
+        else{
+            $("#rtf_doc").hide();
+            $('#tbl_doc').hide();
+            $('#toolbar-container').hide();
+        }
+    }
+    else{
+        $("#rtf_doc").toggle();
+    }
+
     if (!RTF_SET) {
 
         CHANGE = new Delta();
@@ -391,6 +409,27 @@ function toggleDocument() {
 
 }
 
+var RTF_DOC_RESIZED = false;
+var RTF_DOC_ORIG;
+function resizeDoc() {
+    var css = $("#editor-container").prop('style');
+    if(RTF_DOC_RESIZED){
+        RTF_DOC_RESIZED = false;
+        css.height = RTF_DOC_ORIG;
+    }
+    else{
+        RTF_DOC_RESIZED = true;
+        RTF_DOC_ORIG = css.height;
+        css.height = '480px';
+    }
+    
+}
+function resetDoc(){
+    if (RTF_SET) {
+        QUILL.setText("");
+    }
+}
+
 
 function toggleSearch() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
@@ -428,9 +467,7 @@ function toggleVisibility(target, ensureOff) {
     }
 }
 
-function toggleDoc() {
-    $("#rtf_doc").toggle();
-}
+
 
 function toggleLog() {
     if (!_collpsd_toggle) {
@@ -521,31 +558,88 @@ function sumSelected() {
     return false;
 }
 
+var RTF_SUBMIT = false;
+
 function saveRTF(id, action) {
     // alert(JSON.stringify(QUILL.getContents()));
-    
-    if (id == -1) {
+    var is_submit = (id==-1);
+    if (id < 1) {
         id = $("#submit_is_edit").val(); 
     }
-    $.post('json.cgi', {action:'store', id:id, doc: JSON.stringify(QUILL.getContents()) }, saveRTFResult);
-    
+    if(is_submit && !$("#RTF").prop('checked')){
+        return true;//we submit normal log entry
+    }
+    RTF_SUBMIT = true;
+    $.post('json.cgi', {action:'store', id:id, doc: JSON.stringify(QUILL.getContents())}, saveRTFResult);
+    if(is_submit){
+        //we must wait before submitting actual form!
+        $("#idx_cat").value = "SAVING DOCUMENT...";
+        $("#idx_cat").show();        
+        setTimeout(delayedSubmit, 200);
+    }
+    return false;    
+}
+
+function delayedSubmit(){
+    if(RTF_SUBMIT){
+        setTimeout(delayedSubmit, 200);
+        return;
+    }
+    $("#frm_entry").submit();
 }
 
 function saveRTFResult(result) {
     //alert("Result->" + result);
     console.log("Result->" + result);
     var obj = JSON.parse(result);
-    alert(obj.response);
+    alert(obj.response);    
+    if(obj.log_id>0){
+        //update under log display
+        if($("#q-rtf"+obj.log_id).is(":visible")){
+            loadRTF(true, obj.log_id);
+        }
+    }
+    RTF_SUBMIT = false;
 }
 
-function loadRTF(showFullPage, id){ 
-    $.post('json.cgi', {action:'load', id:id}, loadRTFResult);
-    if(showFullPage){
-        //show under entry the document
-    }
+function loadRTF(under, id){ 
+    
+    //show under log entry the document
+    if(under){
+        
+
+        if($("#q-rtf"+id).is(":visible")){
+            $("#q-rtf"+id).hide();
+            return false;
+        }
 
+        
+        var quill = new Quill('#q-container'+id, {
+            /*
+            modules: {
+              toolbar: [
+                [{ header: [1, 2, false] }],
+                ['bold', 'italic', 'underline'],
+                ['image', 'code-block']
+              ]
+            },*/
+            scrollingContainer: '#q-scroll'+id, 
+            placeholder: 'Loading Document...',
+            readOnly: true,
+            //theme: 'bubble'
+          });
+          $.post('json.cgi', {action:'load', id:id}, function (result){
+                var json = JSON.parse(result);
+                 console.log("Panel load result->" + result.toString());                 
+                 quill.setContents(json.content);
+          });
+          $("#q-rtf"+id).show();
+        return false;
+    }
+    
     //var json = "[{'insert': 'Loading Document...', 'attributes': { 'bold': true }}, {'insert': '\n'}]";    
     QUILL.setText('Loading Document...\n');
+    $.post('json.cgi', {action:'load', id:id}, loadRTFResult);
     $("#rtf_doc").show();
     $('#tbl_doc').show();
     $('#toolbar-container').show();
@@ -555,7 +649,17 @@ function loadRTF(showFullPage, id){
 
 function loadRTFResult(result) {
     console.log("Result->" + result);
-    var obj = JSON.parse(result);
-    QUILL.setContents(obj);
+    var json = JSON.parse(result);
+    QUILL.setContents(json.content);
     //alert(obj.response);
+}
+
+function editorBackgroundLighter(){
+    alert("Sorry, Feature Under Development!");
+}
+function editorBackgroundReset(){
+    alert("Sorry, Feature Under Development!");
+}
+function editorBackgroundDarker(){
+    alert("Sorry, Feature Under Development!");
 }
\ No newline at end of file
-- 
2.34.1