d25d608 · project-m36 · git.iko.soy

git.iko.soy/project-m36

websocket test client styling changes

commitd25d608e73dd5ad64ad89de24251f7d6769d1069 authorAgentM <agentm@themactionfaction.com> dateTue 2 Aug 2016, 14:00 (10 years ago) parent27e83fb

3 files changed+90−10

compare with master

unifiedsplit

ProjectM36/Server/WebSocket.hs+1−1 ProjectM36/Server/project-m36.js+31−1 ProjectM36/Server/websocket-test.html+58−8

ProjectM36/Server/WebSocket.hs+1−1

@@ -51,7 +51,7 @@ websocketProxyServer dbname port host pending = do

5151 Right parsed -> do

5252 result <- evalTutorialD sessionId dbconn parsed

5353 handleOpResult conn dbconn result

54− _ -> WS.sendTextData conn ("message not expected" :: T.Text)

54+ _ -> WS.sendTextData conn ("messagenotexpected" :: T.Text)

5555 return ()

5656

5757notificationCallback :: WS.Connection -> NotificationCallback

ProjectM36/Server/project-m36.js+31−1

@@ -73,6 +73,11 @@ ProjectM36Connection.prototype.generateRelationHeader = function(header)

7373 th.appendChild(attrtype);

7474 headerrow.appendChild(th);

7575 }

76+ //special case- if there are no attributes (the "true" and "false" relations, then leave a class marker so that the table can be styled to appear regardless

77+ if(header.length == 0)

78+ {

79+ headerrow.setAttribute("class", "emptyrow");

80+ }

7681 thead.appendChild(headerrow);

7782 return thead;

7883}

@@ -92,7 +97,7 @@ ProjectM36Connection.prototype.generateAtomType = function(attr)

9297 var table = document.createElement("table");

9398 element.appendChild(table);

9499 var thead = document.createElement("thead");

95− element.appendChild(thead);

100+ table.appendChild(thead);

96101 var tr = document.createElement("tr");

97102 thead.appendChild(tr);

98103 var relattrs = attr[1]["contents"];

@@ -126,6 +131,11 @@ ProjectM36Connection.prototype.generateRelationBody = function (body)

126131 td.appendChild(atomNode);

127132 tablerow.appendChild(td);

128133 }

134+ //special case- mark row with class attribute if it contains no columns

135+ if(bodyrow[1].length == 0)

136+ {

137+ tablerow.setAttribute("class", "emptyrow");

138+ }

129139 tbody.appendChild(tablerow);

130140 }

131141 return tbody;

@@ -148,3 +158,23 @@ ProjectM36Connection.prototype.generateAtom = function(atom)

148158 return element;

149159}

150160

161+//special case to make sure that a table appears for "true" and "false"

162+function mungeEmptyRows()

163+{

164+ var empties = document.getElementsByClassName("emptyrow");

165+ for(var index=0; index < empties.length; index++)

166+ {

167+ var empty = empties[index];

168+ if(empty.childNodes.length == 0)

169+ {

170+ var elementType = "td";

171+ if(empty.parentNode.nodeName == "THEAD")

172+ {

173+ elementType = "th";

174+ }

175+ var dudHeader = document.createElement(elementType);

176+ dudHeader.innerHTML = " ";

177+ empty.appendChild(dudHeader);

178+ }

179+ }

180+}

ProjectM36/Server/websocket-test.html+58−8

@@ -25,6 +25,14 @@ var tutd = document.createElement("span");

2525tutd.textContent = title

2626template.getElementsByClassName("title")[0].appendChild(tutd);

2727template.getElementsByClassName("result")[0].appendChild(result);

28+if(result.nodeName == "TABLE") // show some relation statistics

29+{

30+ var tupleCount = result.querySelectorAll(".result > table > tbody > tr").length

31+ var attrCount = result.querySelectorAll(".result > table > thead > tr > th").length

32+ var attrText = attrCount + " attribute" + (attrCount == 1 ? "" : "s")

33+ var tupleText = tupleCount + " tuple" + (tupleCount == 1 ? "" : "s")

34+ template.getElementsByClassName("relinfo")[0].textContent = attrText + ", " + tupleText;

35+}

2836var interactor = document.getElementById("interactor");

2937sheet.insertBefore(template, interactor);

3038window.scrollTo(0,document.body.scrollHeight);

@@ -37,6 +45,7 @@ if(status.relation)

3745{

3846 var relastable = conn.generateRelation(status.relation);

3947 appendResult(tutd, relastable);

48+ mungeEmptyRows();

4049}

4150if(status.acknowledgement)

4251{

@@ -72,15 +81,54 @@ var deleteNode = element.parentNode;

7281}

7382</script>

7483<style>

75−#relationresult, th, td

84+#sectiontemplate

7685{

77− border: 1px solid black;

86+ display: none;

7887}

7988

80−#sectiontemplate

89+.deletesection

8190{

82− display: none;

91+ float:right;

92+ border: 1px solid;

93+ padding: 3px;

94+ border-radius: 3px;

95+ background: #ff8b8b;

96+}

97+

98+hr

99+{

100+border: 0;

101+height: 1px;

102+background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));

103+}

104+

105+.title

106+{

107+padding: 3pt;

108+border: 1px solid;

109+border-radius: 3px;

110+background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));

111+margin: 3px;

83112}

113+

114+.result table

115+{

116+ border-collapse: collapse;

117+ display: inline-block;

118+ vertical-align: middle;

119+}

120+

121+.result td, .result th

122+{

123+ border: 1px solid black;

124+ padding: 2px;

125+}

126+

127+.result th

128+{

129+ background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));

130+}

131+

84132</style>

85133</head>

86134<body>

@@ -94,11 +142,13 @@ var deleteNode = element.parentNode;

94142 </form>

95143 </div>

96144 <div id="sectiontemplate">

97− <span onclick="return hideParent(this);">X</span>

98145 <span class="title"></span>

99− <div class="result">

100− </div>

101− <hr/>

146+ <span class="deletesection" onclick="return hideParent(this);">X</span>

147+ <div style="clear: both;"></div>

148+ <div class="result">

149+ </div>

150+ <span class="relinfo"></span>

151+ <hr/>

102152 </div>

103153</body>

104154</html>