逐词译提交失败通知

app/public/css/notify.css

@@ -1,16 +1,30 @@
-	.pcd_notify{
-		position: fixed;
-		top:3.6em;
-		left: 40vw;
-		min-width:20em;
-		max-width:95%;
-		text-align:center;
-		background-color:rgba(128, 128, 128, 0.64);
-		color:white;
-		padding:5px;
-		margin-left:auto;
-		margin-right:auto;
-		border-radius: 8px;
-		-webkit-transition-duration: 0.5s;
-		transition-duration: 0.5;
-	}
+.pcd_notify {
+	position: fixed;
+	top: 3.6em;
+	left: 40vw;
+	min-width: 20em;
+	max-width: 95%;
+	text-align: center;
+	background-color: rgba(128, 128, 128, 0.64);
+	color: white;
+	padding: 5px;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 8px;
+	-webkit-transition-duration: 0.5s;
+	transition-duration: 0.5;
+	z-index: 2000;
+}
+.pcd_notify_bar {
+	position: fixed;
+	top: 6em;
+	left: 0;
+	width: 100%;
+	text-align: left;
+	background-color: rgba(255, 72, 0, 0.753);
+	color: rgb(0, 0, 0);
+	padding: 5px;
+	-webkit-transition-duration: 0.5s;
+	transition-duration: 0.5;
+	z-index: 2000;
+}

app/public/js/notify.js

@@ -1,46 +1,48 @@
 var ntf_msg_list = new Array();
 var ntf_max_msg_line = 2;
-function ntf_init(lines = 5) {
-  ntf_max_msg_line = lines;
-  var divNotify = document.createElement("div");
-  var typ = document.createAttribute("class");
+function ntf_init(lines = 5, style = "dialog") {
+	ntf_max_msg_line = lines;
+	var divNotify = document.createElement("div");
+	var typ = document.createAttribute("class");
 
-  typ.nodeValue = "pcd_notify";
-  divNotify.attributes.setNamedItem(typ);
+	typ.nodeValue = "pcd_notify";
+	divNotify.attributes.setNamedItem(typ);
 
-  var typId = document.createAttribute("id");
-  typId.nodeValue = "id_pcd_notify";
-  divNotify.attributes.setNamedItem(typId);
+	var typId = document.createAttribute("id");
+	typId.nodeValue = "id_pcd_notify";
+	divNotify.attributes.setNamedItem(typId);
 
-  var body = document.getElementsByTagName("body")[0];
-  body.appendChild(divNotify);
-  divNotify.style.display = "none";
+	var body = document.getElementsByTagName("body")[0];
+	body.appendChild(divNotify);
+	divNotify.style.display = "none";
 }
-var time_out_func
+var time_out_func;
 function ntf_show(msg, timeout = 8) {
-
-  if (ntf_msg_list.length < ntf_max_msg_line) {
-    ntf_msg_list.push(msg);
-  } else {
-    for (let i = 1; i < ntf_msg_list.length; i++) {
-      ntf_msg_list[i - 1] = ntf_msg_list[i];
-    }
-    ntf_msg_list[ntf_msg_list.length - 1] = msg;
-  }
-  let divNotify = document.getElementById("id_pcd_notify");
-  if (divNotify) {
-    let strHtml = "";
-    for (const strMsg of ntf_msg_list) {
-      strHtml += "<div class='ntf_msg_div'>";
-      strHtml += strMsg;
-      strHtml += "</div>";
-    }
-    strHtml += "<button onclick='ntf_hide()' style='margin-left: 70%;white-space: nowrap;'>" + gLocal.gui.I_know + "</button>"
-    divNotify.innerHTML = strHtml;
-    divNotify.style.display = "block";
-    setTimeout("ntf_hide()", timeout * 1000);
-  }
+	if (ntf_msg_list.length < ntf_max_msg_line) {
+		ntf_msg_list.push(msg);
+	} else {
+		for (let i = 1; i < ntf_msg_list.length; i++) {
+			ntf_msg_list[i - 1] = ntf_msg_list[i];
+		}
+		ntf_msg_list[ntf_msg_list.length - 1] = msg;
+	}
+	let divNotify = document.getElementById("id_pcd_notify");
+	if (divNotify) {
+		let strHtml = "";
+		for (const strMsg of ntf_msg_list) {
+			strHtml += "<div class='ntf_msg_div'>";
+			strHtml += strMsg;
+			strHtml += "</div>";
+		}
+		strHtml +=
+			"<button onclick='ntf_hide()' style='margin-left: 70%;white-space: nowrap;'>" +
+			gLocal.gui.I_know +
+			"</button>";
+		divNotify.innerHTML = strHtml;
+		divNotify.style.display = "block";
+		setTimeout("ntf_hide()", timeout * 1000);
+	}
 }
 function ntf_hide() {
-  document.getElementById("id_pcd_notify").style.display = "none";
+	document.getElementById("id_pcd_notify").style.display = "none";
 }

app/studio/editor.php

@@ -40,6 +40,10 @@ else{$currDevice="computer";}
 	<script src="../public/js/marked.js"></script>
 
 <title id="file_title"><?php echo $_local->gui->pcd_studio; ?></title>
+
+	<script src="../../node_modules/jquery/dist/jquery.js"></script>
+	<script src="../public/js/jquery-ui-1.12.1/jquery-ui.js"></script>
+
 	<script language="javascript" src="config.js"></script>
 	<script language="javascript" src="../pali_sent/pali_sent_list.js"></script>
 	<script language="javascript" src="../usent/usent_ref.js"></script>
@@ -57,14 +61,17 @@ else{$currDevice="computer";}
 	
 	<script language="javascript" src="sent/sent.js"></script>
 	<script language="javascript" src="../public/js/notify.js"></script>
+
+	<script language="javascript" src="../widget/notify.js"></script>
+	<link type="text/css" rel="stylesheet" href="../widget/notify.css"/>
+
 	<script language="javascript" src="../public/js/comm.js"></script>
 	<script language="javascript" src="../public/js/localforage.min.js"></script>
 	<script language="javascript" src="../public/script/my.js"></script>
 	<script src="../public/js/mermaid.min.js"></script>
 	
 	<script language="javascript" src="module/editor/language/default.js"></script>	
-	<script src="./js/jquery-3.3.1.min.js"></script>
-	<script src="../public/js/jquery-ui-1.12.1/jquery-ui.js"></script>
+
 
 	<script src="../term/term.js"></script>
 	<script src="../term/note.js"></script>

app/uwbw/update.js

@@ -49,12 +49,12 @@ function user_wbw_push(block_id, wid, data) {
 	objData.para = doc_block("#" + block_id).info("paragraph");
 	user_wbw_data_buffer.push(objData);
 }
-
+var commitTimes = 0;
 function user_wbw_commit() {
 	if (user_wbw_data_buffer.length == 0) {
 		return;
 	}
-	$.post(
+	var jqxhr = $.post(
 		"../uwbw/update.php",
 		{
 			data: JSON.stringify(user_wbw_data_buffer),
@@ -63,15 +63,55 @@ function user_wbw_commit() {
 			try {
 				let result = JSON.parse(data);
 				if (result.status == 0) {
-					ntf_show("user wbw" + result.message);
+					ntf_show("user wbw " + result.message);
+					user_wbw_data_buffer = new Array();
 				} else {
 					ntf_show("user wbw error" + result.message);
 				}
 			} catch (e) {
 				console.error("user_wbw_update:" + e + " data:" + data);
-				ntf_show("user wbw");
+				ntf_show("wbw fail");
 			}
 		}
 	);
-	user_wbw_data_buffer = new Array();
+	jqxhr.done(function () {
+		notify_bar.hide();
+	});
+	jqxhr.fail(function (xhr, error, data) {
+		switch (xhr.status) {
+			case 500:
+				if (commitTimes < 5) {
+					commitTimes++;
+					notify_bar.show("发送失败，重试。第" + commitTimes + "次。");
+					user_wbw_commit();
+				} else {
+					notify_bar.show("重试次数过多，请稍后再试。");
+					commitTimes = 0;
+				}
+				break;
+			default:
+				notify_bar.show(xhr.statusText);
+				break;
+		}
+		switch (error) {
+			case "timeout":
+				notify_bar.show(
+					"服务器长时间没有回应。等待发送队列" +
+						user_wbw_data_buffer.length +
+						"<button onclick='user_wbw_commit()'>重试</button>"
+				);
+				break;
+			case "error":
+				notify_bar.show(
+					"与服务器通讯失败，您可能没有连接到网络。等待发送队列" +
+						user_wbw_data_buffer.length +
+						"<button onclick='user_wbw_commit()'>重试</button>"
+				);
+				break;
+			case "notmodified":
+				break;
+			default:
+				break;
+		}
+	});
 }

app/widget/notify.css

@@ -0,0 +1,30 @@
+.pcd_notify {
+	position: fixed;
+	top: 3.6em;
+	left: 40vw;
+	min-width: 20em;
+	max-width: 95%;
+	text-align: center;
+	background-color: rgba(128, 128, 128, 0.64);
+	color: white;
+	padding: 5px;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 8px;
+	-webkit-transition-duration: 0.5s;
+	transition-duration: 0.5;
+	z-index: 2000;
+}
+.pcd_notify_bar {
+	position: fixed;
+	top: 3.5em;
+	left: 0;
+	width: 100%;
+	text-align: left;
+	background-color: rgba(255, 72, 0, 0.753);
+	color: rgb(0, 0, 0);
+	padding: 5px;
+	-webkit-transition-duration: 0.5s;
+	transition-duration: 0.5;
+	z-index: 2000;
+}

app/widget/notify.js

@@ -0,0 +1,80 @@
+var notify_bar;
+$(document).ready(function () {
+	notify_bar = notify_init(1, "bar");
+});
+function notify_init(lines = 5, style = "dialog") {
+	let divNotify = document.createElement("div");
+	var typ = document.createAttribute("class");
+
+	switch (style) {
+		case "dialog":
+			typ.nodeValue = "pcd_notify";
+			break;
+		case "bar":
+			typ.nodeValue = "pcd_notify_bar";
+			break;
+		default:
+			typ.nodeValue = "pcd_notify";
+			break;
+	}
+
+	divNotify.attributes.setNamedItem(typ);
+
+	let typId = document.createAttribute("id");
+	let id = "notify_" + com_uuid();
+	typId.nodeValue = id;
+	divNotify.attributes.setNamedItem(typId);
+
+	let body = document.getElementsByTagName("body")[0];
+	body.appendChild(divNotify);
+	divNotify.style.display = "none";
+	var objNotify = new Object();
+	objNotify.id = id;
+	objNotify.top = "3.5em";
+	objNotify.style = style;
+	if (style == "bar") {
+		objNotify.max_msg_line = 1;
+	} else {
+		objNotify.max_msg_line = lines;
+	}
+
+	objNotify.msg_list = new Array();
+	objNotify.timeout = 8;
+	objNotify.show = function (msg) {
+		if (this.msg_list.length < this.max_msg_line) {
+			this.msg_list.push(msg);
+		} else {
+			for (let i = 1; i < this.msg_list.length; i++) {
+				this.msg_list[i - 1] = this.msg_list[i];
+			}
+			this.msg_list[this.msg_list.length - 1] = msg;
+		}
+
+		let divNotify = document.getElementById(this.id);
+		if (divNotify) {
+			let strHtml = "";
+			for (const strMsg of this.msg_list) {
+				strHtml += "<div class='ntf_msg_div'>";
+				strHtml += strMsg;
+				strHtml += "</div>";
+			}
+			if (this.style == "dialog") {
+				strHtml +=
+					"<button onclick='ntf_hide()' style='margin-left: 70%;white-space: nowrap;'>" +
+					gLocal.gui.I_know +
+					"</button>";
+			}
+
+			divNotify.innerHTML = strHtml;
+			divNotify.style.display = "block";
+			if (this.style == "dialog") {
+				setTimeout(this.hide, this.timeout * 1000);
+			}
+		}
+	};
+	objNotify.hide = function () {
+		document.getElementById(this.id).style.display = "none";
+	};
+
+	return objNotify;
+}