@@ -12,6 +12,8 @@
1212 }
1313 socket.onmessage = function (event) {
1414 console.log("message received: " + event.data);
15+ var msg = JSON.parse(event.data);
16+ handleResponse(msg);
1517 }
1618 socket.onclose = function(event) {
1719 console.log("conn closed: " + event);
@@ -30,14 +32,99 @@ function setStatus(text)
3032
3133function execTutorialD()
3234{
33− var tutd = document.getElementById("tutd").value
34− socket.send("executetutd:" + tutd)
35+ var tutd = document.getElementById("tutd").value;
36+ socket.send("executetutd:" + tutd);
37+ return false;
38+}
39+
40+function handleResponse(message)
41+{
42+ var relation = message["displayrelation"];
43+ var acknowledged = message["acknowledged"];
44+ if(relation)
45+ {
46+ showRelation(relation);
47+ }
48+ else
49+ {
50+ }
51+
52+ var message = "";
53+ if(acknowledged)
54+ {
55+ message="acknowledged";
56+ }
57+ document.getElementById("resultstatus").innerHTML = message;
58+}
59+
60+function showRelation(relation)
61+{
62+ var relid = document.getElementById("relationresult");
63+ var relidheaders = relid.getElementsByTagName("thead")[0];
64+ var relidbody = relid.getElementsByTagName("tbody")[0];
65+ var headers = showRelationHeader(relation[0]);
66+ var body = showRelationBody(relation[1]);
67+
68+ relid.replaceChild(headers, relidheaders);
69+ relid.replaceChild(body, relidbody);
70+}
71+
72+function showRelationHeader(header)
73+{
74+ var thead = document.createElement("thead");
75+ var headerrow = document.createElement("tr");
76+ for(var hindex=0; hindex < header.length; hindex++)
77+ {
78+ var th = document.createElement("th");
79+ var attrname = header[hindex][0];
80+ var attrtype = header[hindex][1]["contents"]["serialrep"][0][2];
81+ th.textContent = attrname + "::" + attrtype;
82+ headerrow.appendChild(th);
83+ }
84+ thead.appendChild(headerrow);
85+ return thead;
86+}
87+
88+function showRelationBody(body)
89+{
90+ var bodyrows = body["asList"]
91+ var tbody = document.createElement("tbody");
92+ for(var rindex=0; rindex < bodyrows.length; rindex++)
93+ {
94+ var tablerow = document.createElement("tr");
95+ var bodyrow = bodyrows[rindex];
96+ for(var atomindex=0; atomindex < bodyrow[1].length; atomindex++)
97+ {
98+ var td = document.createElement("td");
99+ var val = bodyrow[1][atomindex]["val"];
100+ td.textContent = val
101+ tablerow.appendChild(td);
102+ }
103+ tbody.appendChild(tablerow);
104+ }
105+ return tbody;
35106}
36107
37108</script>
109+<style>
110+#relationresult, th, td
111+{
112+ border: 1px solid black;
113+}
114+</style>
38115</head>
39116<body>
40117<p>Status:<span id="status">Fresh</span></p>
41−<p><input type="text" id="tutd"/><input type="submit" onclick="execTutorialD();"/>
118+<form onsubmit="return execTutorialD();">
119+ <input type="text" id="tutd"/>
120+ <input type="submit"/>
121+</form>
122+<p>Message:<span id="resultstatus"></span></p>
123+<table id="relationresult">
124+ <thead>
125+ </thead>
126+ <tbody>
127+ </tbody>
128+</table>
42129</body>
43130</html>