<!DOCTYPE html>
    <html>
    <head>
    	<title>漢語公鏈論壇</title>
    	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    	
    	<!-- Layout and CSS altered from https://codepen.io/ahmadajmi/pen/YwNrNG -->
    <style> 
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-family: Arial;
      background-color: #f2f2f2;
    }
    
    .box { 
      padding: 1em;
    }
    
    input {
      width: 100%;
      padding: 1em;
      outline: none;
      border: 1px solid #f2f2f2;
    }
    
    .message-list {
      margin: 0;
      padding: 0;
    }
    
    .message-list li {
      padding: .2em;
      margin-top: 1em;
      margin-bottom: 1em;
      background-color: #f2f2f2;
    }
    
    .app-layout {
      display: grid;
      height: 100vh;
      grid-template-columns: 250px 1fr;
      grid-template-rows: auto 1fr auto;
    }
    
    .header     { background-color: #ffffff; }
    .teams      { background-color: #362233; text-align: center; color: #fff;}
    .channels   { background-color: #52364E; color: #ccc;}
    .messages   { background-color: #ffffff; color: #333;}
    .write      { background-color: #f2f2f2; }
    .login		{ background-color: #362233; }
    
    .teams {
      font-size: 80%;
      grid-column: 1;
      grid-row: 1;
    }
    
    .channels {
      grid-column: 1;
      grid-row: 2 / 3;
    }
    
    .header {
      grid-column: 2;
      grid-row: 1;
      border-bottom: 1px solid #999;
      color: #999;
    }
    #channel_name {
      font-weight: bold;
      font-size:120%;
      color:#000;
    }
    #channel_address {
    	font-size: 100%;
    	margin-left: 0.3em;
    	color: #aaa;
    }
    .channel_info {
    	font-size: 90%;
    	padding-left: 1em;
    	padding-top:0.2em;
    }
    
    .messages {
      grid-column: 2;
      grid-row: 2;
      padding: 0 1em;
      overflow-y: scroll;
    }
    
    .input {
      grid-column: 2;
      grid-row: 3;
    }
    
    a.channel {
    	color: #aaa;
    	text-decoration: none;
    	text-align: left;
    }
    .channles-list {
    	list-style-type: none;
    }
    .channles-list li {
    	margin: 0.2em;
    	list-style-type: none;
    }
    div.message {
    	padding: 1em 0.2em;
    	
    }
    div.message_body {
    	padding-top: 0.3em;
    	padding-left: 0.4em ;
    }
    span.sender {
    	font-weight: bold;
    }
    span.datatime {
    	font-size: 80%;
    	color: #aaa;
    }
    .account_note {
    	font-weight: normal;
    	font-size: 90%;
    	color: #999;
    }
    a.selected_channel {
    	font-weight: bold;
    	color: #FFF;
    }
    #current_login_account {
    	margin:0.3em 0.3em;
    	margin-bottom: 0.5em;
    	color: #ccc;
    }
    #current_login_name {
    	font-size: 120%;
    }
    #select_node {
    	width: 90%;
    }
    .app_info {
    	font-size: 75%;
    	border: 1px solid #aaa;
    	padding: 0.5em;
    	margin-top: 1.5em;
    }
    </style>
    </head>
    <body>
    <div class='app-layout'>
        <div class='teams box'>
    			<div id='current_login_name'></div>
    			<div id='current_login_account'></div>
    	</div>
        <div class='channels box'>漢語公鏈論壇
    	  <ul class='channles-list'>
            <li><a class="channel" id="ARDOR-Y8VS-TQC2-JJMF-36CRK" data-channel-name="論壇概念區" href="#" >
    		# 論壇概念區</a></li>
            <li><a class="channel" id="ARDOR-BJW7-EHPW-8WZH-G2YYJ" data-channel-name="塗鴉板" href="#" >
    		# 塗鴉板</a></li>
            <li><a class="channel" id="ARDOR-XM2A-CZ6G-8UAH-CQR2S" data-channel-name="Hong Kong 香港連儂牆" href="#" >
    		# HK 香港連儂牆</a></li>
            <li><a class="channel" id="ARDOR-YD4L-V4HA-AMAY-85BD3" data-channel-name="Taiwan 台灣自由地" href="#" >
    		# TW 台灣自由地</a></li>
          </ul>
    	   <div class="app_info">
    		運用瀏覽器(Chrome 或 Firefox)打開此 html 存檔,默認信息讀取節點是(不能上載信息) :<br/><br/>
    		https://ardor.jelurida.com/nxt <br/><br/>
    		以上網址或許會中斷服務,建議用戶安裝 Ardor Client 軟件,本機節點 full node 在線同步下,可自行修改此 html 存檔,把第219行默認網址改成:<br/><br/>
            http://localhost:27876/nxt<br/> <br/>
    		使用本機終端內的節點(localhost)就不必依賴外接網站,可上載信息,是一種信息自由體現。 <br/><br/>
    2023年9月附加版:<br/><br/>
    <a target="_top" style="color: #808000" href="/hanboard2">/hanboard2</a> 信息讀取節點是 http://localhost:27876/nxt <br/> <br/>
    <a target="_top" style="color: #808000" href="/hanboard3">/hanboard3</a> 信息讀取節點是 https://ardor.blockfrikis.com:27876/nxt 能上載信息<br/> <br/>
    
    	  </div>
    	   <div class="app_info">
    	    周公吐哺通告<br/><br/>
    	    
    	   	原版出處是 : <a target="_tab" style="color: #808000" href="https://ardor.jelurida.com/nxt?requestType=downloadTaggedData&transactionFullHash=2a7e3b5d70c455f338ab88dd4418aa16aa965274763d9a4cfbf229f60c2e9b92&chain=2&retrieve=true">ardor-board-v001</a> , 
    	  	此 html 存檔有幾個外接網址,請自行評估網安。<br/><br/> 
    	  	 
    		建議特別開個小存額 Ardor 戶口來運作此網頁,10 Ignis 足夠做多則信息上載。<br/><br/>
    		用 Ardor 錢包軟件發送 Message 可達到同樣效果,Encrypt Message 和 Message is Never Deleted
    		(<a target="_tab"  style="color: #808000" href="https://ipfs.io/ipfs/QmTYEcGc3Vh1WYFs3ESxu1haWSYWnur2THdpT6HSG5UkD5/han_app_send_sample.jpg">見圖</a>)不打勾。<br/><br/>
    		<br/>
    	  </div>
    	</div>
    	<div class='login box'>
    		<input type="password" style="text-align:left;margin-top:8px;height:1em;" id="text_passphrase" placeholder='在此輸入密碼'></input>
    	</div>
        <div class='header box'><span id='channel_name'># test</span> <span id='channel_address'></span><div class='channel_info'>
    		取用任何 Ardor 錢包軟件發送 <strong>無加密</strong>信息到以上 Ignis 地址會顯現同樣效果。 :)</div></div>
        <div class='messages box' style=''>
    		<div class='message'>
    			<div class='message_header'><span class='sender'></span><span class='datatime'></span></div>
    			<div class='message_body'>No messages.</div>
    		</div>
        </div>
        <div class='input box'>
          <input type='text' placeholder='< - 持有 Ignis 者登入後可上載信息 ' id='_message' disabled='disabled' maxlength="500" >
        </div>
      </div>
      
      </body>
      <script>
    		var MAX_MESSAGES = 100;
    		var FEE_IGNIS = 0.03;
    		var REFRESH_TIMS = 30;
    		
    		var _node_url = "https://ardor.jelurida.com/nxt";
    
    		var _current_login_account;
    		var _passphrase;
    		
    		var _current_channel_address = "ARDOR-Y8VS-TQC2-JJMF-36CRK";
    		var _current_channel_name = "論壇概念區";
    	
    		function _login() {
    			  $.ajax({url: _node_url, data: {'requestType': 'getAccountId', 'secretPhrase': _passphrase }, 
    				success: function(data) {
    					_current_login_account = $.parseJSON(data)["accountRS"];
    					$("#current_login_account").text(_current_login_account);
    					$("#_message").attr("placeholder", "上載信息的地址是 " + _current_login_account);
    					$("#_message").prop('disabled', false);
    					
    					$.ajax({url: _node_url, data: {'requestType': 'getAccount', 'account': _current_login_account }, 
    							success: function(data) {
    								var name = $.parseJSON(data)["name"];	
    								if (name && name.length > 0) {
    									$('#current_login_name').text(name);
    									$("#_message").attr("placeholder", "上載信息的地址是 " + name + ' (' + _current_login_account + ')');
    								}
    						}
    					});	
    					//if(localStorage){ localStorage.setItem("_passphrase", _passphrase); }
    				},
    				error: function() {
    					alert('error login');
    				}
    			});
    		}
    		
    		$("#text_passphrase").change(function() {
    			_passphrase = this.value;
    			if(_passphrase)
    				_login();
    		});
    			
    		function _show_sender_name(account, id) {				
    				$.ajax({url: _node_url, data: {'requestType': 'getAccount', 'account': account }, 
    					success: function(data) {
    						var name = $.parseJSON(data)["name"];	
    						if (name && name.length > 0) {
    							$('#'+id+" span.sender").text(name).append("<span class='account_note'> (" + account + ") </span>");
    						}
    				}
    				});				
    		}
    
    		function show_messages() {
    			  $.ajax({url: _node_url, data: {'requestType': 'getPrunableMessages', 'chain': 2, 'account': _current_channel_address, 'lastIndex': MAX_MESSAGES }, 
    				success: function(data) {
    					var mgs = $.parseJSON(data)["prunableMessages"];
    					$("div.messages").empty();
    					for(var i=mgs.length-1;i>=0;i--){
    						if(mgs[i]['isText'] && mgs[i]['message']) {
    							var date = new Date(mgs[i]['transactionTimestamp']*1000 + Date.UTC(2018));
    							var _message = "<div class='message' id='" + mgs[i]['transactionTimestamp'] + "'><div class='message_header'><span class='sender'>" + 
    											mgs[i]['senderRS'] + "</span><span class='datatime'> " + date.toLocaleString() + "</span></div><div class='message_body'>" + "</div></div>";
    							$("div.messages").append(_message);
    							$("#"+ mgs[i]['transactionTimestamp'] +' .message_body').text(mgs[i]['message']);
    							
    							_show_sender_name(mgs[i]['senderRS'], mgs[i]['transactionTimestamp']);
    						}
    					}
    					$("#channel_name").text('# ' + _current_channel_name);
    					$("#channel_address").text('' + _current_channel_address + '');
    					
    					$("a.channel").removeClass('selected_channel');
    					$("#"+_current_channel_address).addClass('selected_channel');
    					$("div.messages").animate({scrollTop: $("div.messages").prop("scrollHeight") }, 10);
    				},
    				error: function() {
    					alert('error fecthing messages');
    				}
    			});
    		
    		}
    		
    		function _send_message(msg) {
    			  $.ajax({url: _node_url, data: {'requestType': 'sendMessage', 'chain': 2, 'recipient': _current_channel_address, 
    											 'secretPhrase': _passphrase, 'feeNQT': FEE_IGNIS*100000000,
    											 'message': msg, 'messageIsText': true, 'messageIsPrunable': true
    											 }, type: 'POST',
    				success: function(data) {
    						var rtn_msg = $.parseJSON(data);
    						if(rtn_msg['errorDescription']) {
    							alert('信息無法上載錯誤 Error sending message: ' + rtn_msg['errorDescription']);
    						} else {
    							if(rtn_msg["transactionJSON"]) {
    								$('#_message').val("");
    								$("#_message").attr("placeholder", "信息成功上載 " + (new Date(rtn_msg["transactionJSON"]['timestamp']*1000 + Date.UTC(2018))).toTimeString().split(' ')[0] + ". 信息將會在約60秒內顯示(1區塊時段)");
    							}
    						}						
    				},
    				error: function() {
    					alert('信息無法上載錯誤 error sending messages');
    				}
    			});		
    		}
    		
    		$("a.channel").click(function() {
    			$("a.channel").removeClass('selected_channel');
    			_current_channel_address = this.getAttribute("id");
    			_current_channel_name = this.getAttribute("data-channel-name");
    			show_messages();	
    			$(this).addClass('selected_channel');
    		});
    		
    		$("#_message").keypress(function(e) {
    			if(e.which == 13) {
    				var msg = $(this).val();
    				if( msg.length > 0 && _passphrase) {
    					_send_message(msg);
    				}
    			}
    		});
    		
    		$( document ).ready(function() {
    				//if(localStorage) {
    					//_passphrase = localStorage.getItem("_passphrase");
    					//$("#text_passphrase").val(_passphrase);
    					//_login();
    				//}
    				
    				show_messages();
    				setInterval(show_messages, REFRESH_TIMS*1000);				
    		});		
      </script>
    </html>