@@ -1,9 +1,9 @@
11<html>
22<head>
3+<title>Project:M36 WebSocket Client</title>
34<script>
45 var socket = new WebSocket("ws://localhost:8888");
56 socket.onopen = function(event) {
6− //socket.send("smoked");
77 console.log("connected");
88 setStatus("connected");
99 }
@@ -67,30 +67,63 @@ function showRelation(relation)
6767 var relid = document.getElementById("relationresult");
6868 var relidheaders = relid.getElementsByTagName("thead")[0];
6969 var relidbody = relid.getElementsByTagName("tbody")[0];
70− var headers = showRelationHeader(relation[0]);
71− var body = showRelationBody(relation[1]);
70+ var headers = generateRelationHeader(relation[0]);
71+ var body = generateRelationBody(relation[1]);
7272
7373 relid.replaceChild(headers, relidheaders);
7474 relid.replaceChild(body, relidbody);
7575}
7676
77−function showRelationHeader(header)
77+function generateRelationHeader(header)
7878{
7979 var thead = document.createElement("thead");
8080 var headerrow = document.createElement("tr");
8181 for(var hindex=0; hindex < header.length; hindex++)
8282 {
8383 var th = document.createElement("th");
84− var attrname = header[hindex][0];
85− var attrtype = header[hindex][1]["contents"]["serialrep"][0][2];
86− th.textContent = attrname + "::" + attrtype;
84+ var attrtype = generateAtomType(header[hindex]);
85+ th.appendChild(attrtype);
8786 headerrow.appendChild(th);
8887 }
8988 thead.appendChild(headerrow);
9089 return thead;
9190}
9291
93−function showRelationBody(body)
92+function generateAtomType(attr)
93+{
94+ var atomType = attr[1]["tag"];
95+ var attrName = attr[0];
96+ var element = document.createElement("span");
97+ element.textContent = attrName + "::";
98+ if(atomType == "AtomType")
99+ {
100+ element.textContent += attr[1]["contents"]["serialrep"][0][2];
101+ }
102+ else if (atomType == "RelationAtomType")
103+ {
104+ var table = document.createElement("table");
105+ element.appendChild(table);
106+ var thead = document.createElement("thead");
107+ element.appendChild(thead);
108+ var tr = document.createElement("tr");
109+ thead.appendChild(tr);
110+ var relattrs = attr[1]["contents"];
111+ for(var attrindex = 0; attrindex < relattrs.length; attrindex++)
112+ {
113+ var th = document.createElement("th");
114+ var relattrNode = generateAtomType(relattrs[attrindex]);
115+ th.appendChild(relattrNode);
116+ tr.appendChild(th);
117+ }
118+ }
119+ else
120+ {
121+ element.textContent = "unknown";
122+ }
123+ return element
124+}
125+
126+function generateRelationBody(body)
94127{
95128 var bodyrows = body["asList"]
96129 var tbody = document.createElement("tbody");
@@ -101,14 +134,31 @@ function showRelationBody(body)
101134 for(var atomindex=0; atomindex < bodyrow[1].length; atomindex++)
102135 {
103136 var td = document.createElement("td");
104− var val = bodyrow[1][atomindex]["val"];
105− td.textContent = val
137+ var atomNode = generateAtom(bodyrow[atomIndex]);
138+ td.appendChild(atomNode);
106139 tablerow.appendChild(td);
107140 }
108141 tbody.appendChild(tablerow);
109142 }
110143 return tbody;
111144}
145+
146+function generateAtom(atom)
147+{
148+ var element = document.createElement("span");
149+ var atomType = atom[0]["contents"]["tag"];
150+
151+ if(atomType == "RelationAtomType")
152+ {
153+
154+ }
155+ else
156+ {
157+ element.textContent = atom[
158+ }
159+ return element;
160+}
161+
112162
113163</script>
114164<style>
@@ -119,6 +169,7 @@ function showRelationBody(body)
119169</style>
120170</head>
121171<body>
172+<h1>Project:M36 WebSocket Client</h1>
122173<p>Status:<span id="status">Fresh</span></p>
123174<form onsubmit="return execTutorialD();">
124175 <input type="text" id="tutd"/>