Mercurial > hg > Members > nobuyasu > Consensus
annotate public/viewer/revisionviewer.html @ 123:bb930ac4cfd8 draft
remove createOptionTag method
| author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
|---|---|
| date | Fri, 19 Apr 2013 20:29:44 +0900 |
| parents | 9cfb52e94bd0 |
| children | 26896f0aed2a |
| rev | line source |
|---|---|
| 87 | 1 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
| 2 <title>R-Consensus</title> | |
| 3 <link rel='stylesheet' href="form.css"> | |
| 119 | 4 <link rel="stylesheet" href="jquery-ui.css"> |
| 87 | 5 <script src='form.js'></script> |
| 6 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script> | |
| 7 <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script> | |
| 8 <script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js"></script> | |
| 9 <script type="text/javascript" src="js/lib/jsBezier-0.4-min.js"></script> | |
| 10 <script type="text/javascript" src="js/1.3.15/jsPlumb-util-1.3.15-RC1.js"></script> | |
| 11 <script type="text/javascript" src="js/1.3.15/jsPlumb-dom-adapter-1.3.15-RC1.js"></script> | |
| 12 <script type="text/javascript" src="js/1.3.15/jsPlumb-1.3.15-RC1.js"></script> | |
| 13 <script type="text/javascript" src="js/1.3.15/jsPlumb-defaults-1.3.15-RC1.js"></script> | |
| 14 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-svg-1.3.15-RC1.js"></script> | |
| 15 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-canvas-1.3.15-RC1.js"></script> | |
| 16 <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script> | |
| 17 <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script> | |
| 18 <script type="text/javascript" src='treeArrangement.js'></script> | |
| 19 <script type="text/javascript"> | |
| 119 | 20 var LOAD_INTERVAL=5; |
| 87 | 21 var BASE_URL=""; |
| 22 if(!Array.prototype.filter){ | |
| 119 | 23 Array.prototype.filter=function(func){ |
| 24 var arr=[]; | |
| 25 for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); | |
| 26 return arr; | |
| 27 } | |
| 87 | 28 } |
| 29 | |
| 30 var userName; | |
| 31 var treeInfo; | |
| 32 var userList=[]; | |
| 33 var root_id; | |
| 34 function loadConsensus(id){ | |
| 119 | 35 function onload(json){ |
| 36 document.title="R-Consensus:"+json.toulmin.title; | |
| 37 $("#headertitle_main").text(json.toulmin.title) | |
| 38 if(treeInfo){ | |
| 39 updateToNew(json); | |
| 40 }else{ | |
| 41 console.log(JSON.parse(JSON.stringify(json))); | |
| 42 treeInfo=createJSONTreeInfo(json) | |
| 43 //userList=getUserListFromJSONTree(treeInfo.root); | |
| 44 showUserList([]); | |
| 45 updateNode(treeInfo.root); | |
| 46 updateTree(); | |
| 87 | 47 } |
| 119 | 48 } |
| 49 $.ajax({ | |
| 50 url:BASE_URL+"/consensus/browse/"+id, | |
| 51 success:function(o){onload(o)}, | |
| 52 type:"GET",cache:false, | |
| 53 error:function(o){console.log("ERROR",o)} | |
| 54 }); | |
| 87 | 55 } |
| 56 function loadUserList(){ | |
| 119 | 57 $.ajax({ |
| 58 url:BASE_URL+"/users/all", | |
| 59 success:function(o){userList=o.sort();showUserList([]);}, | |
| 60 type:"GET",cache:false, | |
| 61 error:function(o){console.log("ERROR",o)} | |
| 62 }); | |
| 87 | 63 } |
| 64 | |
| 88 | 65 function loadRevisionInfo(consensus_id) { |
| 119 | 66 $.ajax({ |
| 67 url:BASE_URL+"/claims/get/revision/"+consensus_id, | |
|
123
bb930ac4cfd8
remove createOptionTag method
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
122
diff
changeset
|
68 success:function(o){ console.log("revision = "+ o) |
|
bb930ac4cfd8
remove createOptionTag method
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
122
diff
changeset
|
69 createSlider(o); |
|
122
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
70 }, |
| 119 | 71 type:"GET",cache:false, |
| 72 error:function(o){console.log("ERROR",o)} | |
| 73 }); | |
| 88 | 74 } |
| 75 | |
| 90 | 76 function changeRevision(id) { |
| 77 root_id = id; | |
| 78 loadConsensus(id); | |
| 79 } | |
| 80 | |
|
122
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
81 var REVISION_INFO = {}; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
82 var STEP = 5; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
83 var SLIDE_DISTANCE = 20; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
84 function createSlider(revisionInfo) { |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
85 $('#slider').css('width',revisionInfo.length * SLIDE_DISTANCE); |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
86 var slideMax = 0; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
87 for (var i=0; i<revisionInfo.length; i++) { |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
88 var r = revisionInfo[i]; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
89 REVISION_INFO[i*STEP] = r; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
90 slideMax = i*STEP; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
91 } |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
92 var MAX_REV = revisionInfo.length-1; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
93 $('#revisionDisplayId').val("0/"+MAX_REV); |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
94 $('#slider').slider({ step:STEP, |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
95 max:slideMax, |
|
123
bb930ac4cfd8
remove createOptionTag method
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
122
diff
changeset
|
96 slide: function(event, ui){ var id = REVISION_INFO[ui.value]; |
|
122
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
97 $('#revisionDisplayId').val(ui.value/STEP+"/"+MAX_REV); |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
98 changeRevision(id); |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
99 }, |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
100 // stop: function(event, ui){ console.log(ui.value); } |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
101 }); |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
102 $('#slider').slider('option','value',0); |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
103 $('#slider').slider(); |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
104 } |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
105 |
| 87 | 106 $(function(){ |
| 119 | 107 userName=localStorage.userName; |
| 108 if(userName)start(); | |
| 109 else $("#loginPopup").css("display","block"); | |
| 87 | 110 }) |
| 111 function login(uname){ | |
| 119 | 112 userName=localStorage.userName=uname; |
| 113 start(); | |
| 87 | 114 } |
| 115 function start(){ | |
| 119 | 116 popupInit(); |
| 117 jsPlumb.importDefaults({ | |
| 118 Connector : [ "Straight", { curviness:50 } ], | |
| 119 PaintStyle : { strokeStyle:"gray", lineWidth:2 }, | |
| 120 EndpointStyle : {}, | |
| 121 Anchors: ["BottomCenter","TopCenter"] | |
| 122 }); | |
| 123 var consensus_id=(location.search.match("[0-9]+")||[])[0]; | |
| 124 if(consensus_id){ | |
| 125 root_id=consensus_id; | |
| 126 loadUserList(); | |
| 127 loadRevisionInfo(consensus_id); | |
| 128 loadConsensus(consensus_id); | |
| 129 }else{ | |
| 130 document.body.innerHTML="<div style='color:white;font-size:64px'>No ClaimID Specified.<br><a href='index.html' style='color:#88f'>back</a></div>"; | |
| 131 } | |
| 87 | 132 } |
| 133 | |
| 134 function updateToNew(json){ | |
| 119 | 135 var t2=createJSONTreeInfo(json) |
| 136 updateJSONTreeDiff(treeInfo.root,t2.root); | |
| 137 | |
| 138 updateNode(treeInfo.root); | |
| 139 treeInfo.newLayout=t2.layout; | |
| 140 var cnt=0,time=500; | |
| 141 var time0=new Date(); | |
| 142 var prevCnt=0; | |
| 143 function tfunc(t){return 2*t-t*t} | |
| 144 function animation(){ | |
| 145 var cnt=(new Date()-time0)/time; | |
| 146 if(cnt<1){ | |
| 147 if(prevCnt!=cnt){ | |
| 148 var pt=tfunc(prevCnt); | |
| 149 var t=tfunc(cnt); | |
| 150 animateTree((t-1)/(pt-t)); | |
| 151 prevCnt=cnt; | |
| 152 | |
| 153 } | |
| 154 setTimeout(animation,10); | |
| 155 }else{ | |
| 156 animateTree(0); | |
| 157 } | |
| 87 | 158 updateNode(treeInfo.root); |
| 119 | 159 updateTree(); |
| 160 } | |
| 161 animation(); | |
| 87 | 162 } |
| 163 | |
| 164 var ViewParam={ | |
| 119 | 165 offsetTop:100, |
| 166 offsetBottom:100, | |
| 167 offsetLeft:100, | |
| 168 offsetRight:100, | |
| 169 nodeWidth:120, | |
| 170 nodeHeight:60, | |
| 171 intervalX:140, | |
| 172 intervalY:120 | |
| 87 | 173 }; |
| 174 | |
| 175 function animateTree(t){ | |
| 119 | 176 function animateNodePosition(node,t){ |
| 177 node.position.x=(node.position.x*t+node.newPosition.x)/(1+t); | |
| 178 node.position.y=(node.position.y*t+node.newPosition.y)/(1+t); | |
| 179 for(var i=0;i<node.mentions.length;i++){ | |
| 180 animateNodePosition(node.mentions[i],t); | |
| 87 | 181 } |
| 119 | 182 if(t==0){ |
| 183 if(node.newPosition.remove){ | |
| 184 jsPlumb.removeAllEndpoints(node.view); | |
| 185 $(node.view).remove(); | |
| 186 } | |
| 187 node.mentions=node.mentions.filter(function(n){return !n.newPosition.remove}); | |
| 188 } | |
| 189 } | |
| 190 animateNodePosition(treeInfo.root,t); | |
| 191 treeInfo.layout.left=(treeInfo.layout.left*t+treeInfo.newLayout.left)/(1+t); | |
| 192 treeInfo.layout.right=(treeInfo.layout.right*t+treeInfo.newLayout.right)/(1+t); | |
| 193 treeInfo.layout.depth=(treeInfo.layout.depth*t+treeInfo.newLayout.depth)/(1+t); | |
| 87 | 194 } |
| 195 | |
| 196 function updateTree(){ | |
| 119 | 197 with(treeInfo.layout){ |
| 198 $("#treeRoot").css({ | |
| 199 left:ViewParam.offsetLeft+ViewParam.nodeWidth/2-ViewParam.intervalX*left, | |
| 200 top:ViewParam.offsetTop+ViewParam.nodeHeight/2}); | |
| 201 $("#treeMain").css({ | |
| 202 width:ViewParam.intervalX*(right-left)+ViewParam.nodeWidth+ViewParam.offsetLeft+ViewParam.offsetRight, | |
| 203 height:ViewParam.intervalY*(depth-1)+ViewParam.nodeHeight+ViewParam.offsetTop+ViewParam.offsetBottom, | |
| 204 top:50}); | |
| 205 } | |
| 206 jsPlumb.repaintEverything(); | |
| 87 | 207 } |
| 208 | |
| 209 | |
| 210 var relationJPMap={ | |
| 119 | 211 suggestion:"提案", |
| 212 refutation:"反論", | |
| 213 question:"質問" | |
| 87 | 214 }; |
| 215 function updateNode(node){ | |
| 119 | 216 if(updateClaimElement(node)){ |
| 217 var fc=$("#treeRoot")[0].firstChild; | |
| 218 if(fc)$("#treeRoot")[0].insertBefore(node.view[0],fc); | |
| 219 else $("#treeRoot").append(node.view); | |
| 220 } | |
| 221 node.view.css({ | |
| 222 left:node.position.x*ViewParam.intervalX-ViewParam.nodeWidth/2, | |
| 223 top:node.position.y*ViewParam.intervalY-ViewParam.nodeHeight/2 | |
| 224 }); | |
| 225 var childs=node.mentions; | |
| 226 for(var i=0;i<childs.length;i++){ | |
| 227 var child=childs[i]; | |
| 228 var created=!child.view; | |
| 229 updateNode(child); | |
| 230 if(created){ | |
| 231 var c=jsPlumb.connect({source:node.view[0],target:child.view[0]}); | |
| 232 c.setLabel({label:"<span style='color:white'>"+(relationJPMap[child.relation]||child.relation)+"</span>",cssStyle:"color:white"}); | |
| 87 | 233 } |
| 119 | 234 } |
| 87 | 235 } |
| 236 | |
| 237 var focusedUser=null; | |
| 238 function setFocusedShadowEverything(){ | |
| 119 | 239 function recFocusShadow(node){ |
| 240 setFocusedShadow(node); | |
| 241 for(var i=0;i<node.mentions.length;i++){ | |
| 242 recFocusShadow(node.mentions[i]); | |
| 87 | 243 } |
| 119 | 244 } |
| 245 recFocusShadow(treeInfo.root); | |
| 87 | 246 } |
| 247 function setFocusedShadow(node){ | |
| 119 | 248 var name=focusedUser||userName; |
| 249 var color; | |
| 250 // console.log(node.info.author) | |
| 251 if(node.info.author==name)color="#afa"; | |
| 252 else{ | |
| 253 var users=node.info.users,status; | |
| 254 for(var i=0;i<users.length;i++){ | |
| 255 var u=users[i]; | |
| 256 if(u.id==name){status=u.status;break;} | |
| 87 | 257 } |
| 119 | 258 color=({agreed:"#aaf",denied:"#faa",pend:"white",unknown:"white"})[status]; |
| 259 } | |
| 260 node.view.css("box-shadow",color?color+" 0 0 30px":"none"); | |
| 261 } | |
| 262 function appendStatusElement(viewDiv, status){ | |
| 263 var statusView = $("<div class='nodeStatus'/>"); | |
| 264 statusView.text(status); | |
| 265 statusView.css({ | |
| 266 left:0, | |
| 267 top:-5 | |
| 268 }); | |
| 269 viewDiv[0].appendChild(statusView[0]); | |
| 87 | 270 } |
| 271 function updateClaimElement(node){ | |
| 119 | 272 var created=false; |
| 273 if(!node.view){ | |
| 274 created=true | |
| 275 node.view=$("<div class='claimNode'/>"); | |
| 276 node.view.click(function(){showClaim(node);}); | |
| 277 node.view.hover( | |
| 278 function(){div.css("box-shadow","white 0 0 50px");showUserList(node.info.users,node.info.author)}, | |
| 279 function(){try{setFocusedShadow(node);}catch(e){/*console.log(e)*/;}showUserList([])} | |
| 280 ) | |
| 281 } | |
| 282 setFocusedShadow(node); | |
| 283 var div=node.view; | |
| 284 div.text(node.info.toulmin.title); | |
| 285 appendStatusElement(node.view, node.info.status); | |
| 286 var statusBackground={pass:"#aaf",unknown:"#fff",failed:"#faa",fail:"#faa"}; | |
| 287 var statusBorder={pass:"#66a",unknown:"#aaa",failed:"#a66",fail:"#a66"}; | |
| 288 div.css("background",statusBackground[node.info.status]||"white"); | |
| 289 div.css("border-color",statusBorder[node.info.status]||"white"); | |
| 290 return created; | |
| 87 | 291 } |
| 292 | |
| 293 | |
| 294 function showUserList(users,author){ | |
| 119 | 295 var statusMap={}; |
| 296 var userListElement=$(".userList"); | |
| 297 userListElement.text('') | |
| 298 if(author)statusMap['#'+author]='author'; | |
| 299 for(var i=0;i<users.length;i++){ | |
| 300 statusMap['#'+users[i].id]=users[i].status; | |
| 301 } | |
| 302 for(var i=0;i<userList.length;i++){ | |
| 303 var u=userList[i]; | |
| 304 var ue=createUserElement(u==userName?"あなた("+u+")":u,statusMap['#'+u]); | |
| 305 if(u==userName){ | |
| 306 ue.css({fontWeight:"bold"}) | |
| 87 | 307 } |
| 119 | 308 ue.appendTo(userListElement); |
| 309 with({name:u,element:ue}){ | |
| 310 ue.hover( | |
| 311 function(){ | |
| 312 element.css("opacity",1); | |
| 313 focusedUser=name;setFocusedShadowEverything() | |
| 314 }, | |
| 315 function(){ | |
| 316 element.css("opacity",0.5); | |
| 317 focusedUser=userName;setFocusedShadowEverything() | |
| 87 | 318 } |
| 119 | 319 ) |
| 87 | 320 } |
| 119 | 321 |
| 322 } | |
| 323 $(".userList").css("opacity","1"); | |
| 87 | 324 } |
| 325 function hideUserList(){ | |
| 119 | 326 $(".userStatus").css("background","none"); |
| 327 $(".userItem").css("opacity","1"); | |
| 328 $(".userList").css("opacity","0.2"); | |
| 87 | 329 } |
| 330 </script> | |
| 331 <style> | |
| 332 body{background-color:black;} | |
|
122
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
333 p.revisionDisplay{ |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
334 position:absolute; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
335 left:5px; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
336 top:60px; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
337 z-index:5; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
338 color:white; |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
339 } |
| 119 | 340 div.revisionSlider{ |
| 341 position:absolute; | |
|
122
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
342 left:0;top:100px; |
| 119 | 343 z-index:5; |
| 344 width:50%; | |
| 87 | 345 } |
|
122
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
346 |
| 87 | 347 </style> |
| 348 <script> | |
| 349 function resetMentionForm(){ | |
| 350 var keys=['title','contents','w','d','b','q','r']; | |
| 351 for(var i=0;i<keys.length;i++)$("#mentionform_"+keys[i]).val(""); | |
| 352 $("#mention_option")[0].className="option"; | |
| 353 } | |
| 354 var formClaim; | |
| 355 var claimUserMap,mentionUserMap; | |
| 356 function showClaim(claim){ | |
| 357 formClaim=claim; | |
| 358 var info=claim.info; | |
| 359 var keys=['title','contents','w','d','b','q','r']; | |
| 360 for(var i=0;i<keys.length;i++)$("#claimform_"+keys[i]).val(info.toulmin[keys[i]]); | |
| 361 | |
| 362 var status=""; | |
| 363 for(var i=0;i<info.users.length;i++)if(info.users[i].id==userName)status=info.users[i].status; | |
| 364 var op=({denied:1,pend:2,agreed:3})[status]; | |
| 365 | |
| 366 $("#claim_status").text(info.status) | |
| 367 $("#claim_status").css("color",({pass:"blue",failed:"red",fail:"red",unknown:"black"})[info.status]); | |
| 368 $("#agree_option")[0].className="option"+(op?" option"+op:""); | |
| 369 $("#agree_option").css("display",status?"block":"none"); | |
| 370 | |
| 371 $("#claim_button").css("display",(userName==info.author)?"block":"none"); | |
| 372 $("#claimvote_option").css("display",status?"block":"none"); | |
| 373 | |
| 374 $("#claimbody")[0].className="claim_contents"; | |
| 375 $("#mentionbody")[0].className="mention_contents"; | |
| 376 | |
| 377 $("#claim_author").text(info.author); | |
| 378 $("#mention_author").text(userName); | |
| 379 $("#claimvote_option")[0].className="option option"+(claim.agreeType=="majority"?2:1); | |
| 380 $("#mentionvote_option")[0].className="option option1"; | |
| 381 var stateMap={}; | |
| 382 for(var i=0;i<info.users.length;i++)stateMap['#'+info.users[i].id]=info.users[i].status; | |
| 383 claimUserMap=new HashSet(info.users.map(function(u){return u.id})); | |
| 384 mentionUserMap=new HashSet(); | |
| 385 $("#claim_users").text(""); | |
| 386 $("#mention_users").text(""); | |
| 387 if(userName!=info.author)mentionUserMap.add(info.author); | |
| 388 for(var i=0;i<userList.length;i++){ | |
| 389 var name=userList[i]; | |
| 390 if(name!=info.author){ | |
| 391 var status=stateMap['#'+name]; | |
| 392 createUserSelectItem(name,status,claimUserMap).appendTo($("#claim_users")); | |
| 393 }if(name!=userName){ | |
| 394 createUserSelectItem(name,name==info.author?"unknown":"",mentionUserMap).appendTo($("#mention_users")); | |
| 395 } | |
| 396 } | |
| 397 resetMentionForm(); | |
| 398 popupShowMain() | |
| 399 } | |
| 400 | |
| 401 | |
| 402 function claimSave(){ | |
| 403 var claim=formClaim; | |
| 404 var info=claim.info; | |
| 405 var id=claim.id||root_id; | |
| 406 var agreeType=[null,"unanimously","majority"][($('#claimvote_option')[0].className.match("[0-9]+")||"0")[0]]; | |
| 407 var title=$('#claimform_title').val(); | |
| 408 var contents=$('#claimform_contents').val(); | |
| 409 var d=$('#claimform_d').val(); | |
| 410 var w=$('#claimform_w').val(); | |
| 411 var b=$('#claimform_b').val(); | |
| 412 var q=$('#claimform_q').val(); | |
| 413 var r=$('#claimform_r').val(); | |
| 414 var users=claimUserMap.toArray(); | |
| 415 var errors=[]; | |
| 416 if(!title)errors.push("タイトル"); | |
| 417 if(!agreeType)errors.push("採決方法"); | |
| 418 if(users.length==0)errors.push("同意を取るユーザ"); | |
| 419 if(errors.length){ | |
| 420 alert("未入力項目："+errors.join(", ")); | |
| 421 }else{ | |
| 422 $.ajax({ | |
| 423 url:BASE_URL+"/claims/edit/"+id, | |
| 424 success:function(o){loadConsensus(root_id)}, | |
| 425 type:"POST",cache:false, | |
| 426 contentType:"application/json", | |
| 427 data:JSON.stringify({type:agreeType,toulmin:{title:title,contents:contents,q:q,d:d,w:w,b:b,r:r},author:userName,users:users}), | |
| 428 error:function(o){console.log("ERROR",o)} | |
| 429 }); | |
| 430 popupHideAll(); | |
| 431 } | |
| 432 } | |
| 433 function claimAgree(status){ | |
| 434 var claim=formClaim; | |
| 435 var info=claim.info; | |
| 436 var id=claim.id||root_id; | |
| 437 $.ajax({ | |
| 438 url:BASE_URL+"/claims/answer/"+id+"/"+userName+"/"+status, | |
| 439 success:function(o){loadConsensus(root_id)}, | |
| 440 type:"POST",cache:false, | |
| 441 error:function(o){console.log("ERROR",o)} | |
| 442 }); | |
| 443 popupHideAll(); | |
| 444 } | |
| 445 function mentionSave(){ | |
| 446 var claim=formClaim; | |
| 447 var info=claim.info; | |
| 448 var id=claim.id||root_id; | |
| 449 var mentionType=[null,"refutation","question","suggestion"][($('#mention_option')[0].className.match("[0-9]+")||"0")[0]]; | |
| 450 var agreeType=[null,"unanimously","majority"][($('#mentionvote_option')[0].className.match("[0-9]+")||"0")[0]]; | |
| 451 var title=$('#mentionform_title').val(); | |
| 452 var contents=$('#mentionform_contents').val(); | |
| 453 var d=$('#mentionform_d').val(); | |
| 454 var w=$('#mentionform_w').val(); | |
| 455 var b=$('#mentionform_b').val(); | |
| 456 var q=$('#mentionform_q').val(); | |
| 457 var r=$('#mentionform_r').val(); | |
| 458 var users=mentionUserMap.toArray(); | |
| 459 var author=userName; | |
| 460 var errors=[]; | |
| 461 if(!title)errors.push("タイトル"); | |
| 462 if(!agreeType)errors.push("採決方法"); | |
| 463 if(!mentionType)errors.push("反論質問提案"); | |
| 464 if(users.length==0)errors.push("同意を取るユーザ"); | |
| 465 if(errors.length){ | |
| 466 alert("未入力項目："+errors.join(", ")); | |
| 467 }else{ | |
| 468 $.ajax({ | |
| 469 url:BASE_URL+"/claims/"+mentionType+"/"+id+"/create", | |
| 470 success:function(o){loadConsensus(root_id)}, | |
| 471 type:"POST",cache:false,contentType:"application/json", | |
| 472 data:JSON.stringify({type:agreeType,toulmin:{title:title,contents:contents,q:q,d:d,w:w,b:b,r:r},author:author,users:users}), | |
| 473 error:function(o){console.log("ERROR",o)} | |
| 474 }); | |
| 475 popupHideAll(); | |
| 476 } | |
| 477 } | |
| 478 | |
| 479 </script> | |
| 480 <div class='header'> | |
| 481 <nobr id='header_title'><a href='index.html'>Home</a><span id='headertitle_main' style='margin-left:40px;'>loading</span></nobr> | |
| 482 </div> | |
|
122
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
483 <p class='revisionDisplay'> |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
484 <label for="revInfo">Revision Number:</label> |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
485 <input type="text" id="revisionDisplayId" style='background-color:black; border:0; color:white;'/> |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
486 </p> |
|
9cfb52e94bd0
implemented slider
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
119
diff
changeset
|
487 <div class="revisionSlider" id="slider" style='left:20px;' ></div> |
| 87 | 488 |
| 489 <div style="position:relative;left:0;top:0;" id='treeMain'> | |
| 490 <div style="position:absolute;width:0;height:0;left:100;" id='treeRoot'> | |
| 491 </div> | |
| 492 </div> | |
| 493 | |
| 494 <div class='userList'></div> | |
| 495 | |
| 496 | |
| 497 <div id='popup_base' style='display:none;z-index:100'> | |
| 498 <div id='popup_background'></div> | |
| 499 <div class='popup_center'> | |
| 500 <div class='claiminfo' id='claiminfo'> | |
| 501 <div class='claim_title'><input placeholder="title" id='claimform_title'></div> | |
| 502 <div id='claimbody' class='claim_contents'> | |
| 503 <div class='claim_menu'> | |
| 504 <div class='menu_item menu_contents' onclick="$('#claimbody')[0].className='claim_contents'">Contents</div> | |
| 505 <div class='menu_item menu_toulmin' onclick="$('#claimbody')[0].className='claim_toulmin'">Toulmin</div> | |
| 506 <div class='menu_item menu_users' onclick="$('#claimbody')[0].className='claim_users'">Users</div> | |
| 507 <div id='claim_status'></div> | |
| 508 </div> | |
| 509 <div class='claim_main main_contents'> | |
| 510 <textarea placeholder='contents' id='claimform_contents'></textarea> | |
| 511 </div> | |
| 512 <div class='claim_main main_toulmin'> | |
| 513 <div class='item_toulmin'><span>データ</span><input id='claimform_d'></div> | |
| 514 <div class='item_toulmin'><span>論拠 </span><input id='claimform_w'></div> | |
| 515 <div class='item_toulmin'><span>裏付け</span><input id='claimform_b'></div> | |
| 516 <div class='item_toulmin'><span>限定詞</span><input id='claimform_q'></div> | |
| 517 <div class='item_toulmin'><span>反駁 </span><input id='claimform_r'></div> | |
| 518 </div> | |
| 519 <div class='claim_main main_users'> | |
| 520 <span class='author_label'>作者:</span> | |
| 521 <span class='author_name' id='claim_author'></span> | |
| 522 <div class='option option1' id='claimvote_option'> | |
| 523 <span class='option option1 vote1' onclick="$('#claimvote_option')[0].className='option option1'">全会一致</span> | |
| 524 <span class='option option2 vote2' onclick="$('#claimvote_option')[0].className='option option2'">多数決</span> | |
| 525 </div> | |
| 526 <div id='claim_users'></div> | |
| 527 </div> | |
| 528 </div> | |
| 529 <div class='claim_footer'> | |
| 530 <span onclick='popupShowSubMain()' class='button mention_button'>mention</span> | |
| 531 <div class='option' id='agree_option'> | |
| 532 <span class='option option1 agree1' onclick="$('#agree_option')[0].className='option option1';claimAgree('denied');">否認</span> | |
| 533 <span class='option option2 agree2' onclick="$('#agree_option')[0].className='option option2';claimAgree('pend');">保留</span> | |
| 534 <span class='option option3 agree3' onclick="$('#agree_option')[0].className='option option3';claimAgree('agreed');">合意</span> | |
| 535 </div> | |
| 536 <div id='claim_button'> | |
| 537 <span class='button cancel' onclick="popupHideAll()">cancel</span> | |
| 538 <span class='button save' onclick="claimSave()">save</span> | |
| 539 </div> | |
| 540 </div> | |
| 541 <div class='cover' id='claim_cover'></div> | |
| 542 </div> | |
| 543 | |
| 544 | |
| 545 <div class='mentioninfo' id='mentioninfo'> | |
| 546 <div class='claim_title'><input placeholder="title" id='mentionform_title'></div> | |
| 547 <div id='mentionbody' class='mention_contents'> | |
| 548 <div class='claim_menu'> | |
| 549 <div class='menu_item menu_contents' onclick="$('#mentionbody')[0].className='mention_contents'">Contents</div> | |
| 550 <div class='menu_item menu_toulmin' onclick="$('#mentionbody')[0].className='mention_toulmin'">Toulmin</div> | |
| 551 <div class='menu_item menu_users' onclick="$('#mentionbody')[0].className='mention_users'">Users</div> | |
| 552 </div> | |
| 553 <div class='mention_main main_contents'> | |
| 554 <textarea placeholder='contents' id='mentionform_contents'></textarea> | |
| 555 </div> | |
| 556 <div class='mention_main main_toulmin'> | |
| 557 <div class='item_toulmin'><span>データ</span><input id='mentionform_d'></div> | |
| 558 <div class='item_toulmin'><span>論拠 </span><input id='mentionform_w'></div> | |
| 559 <div class='item_toulmin'><span>裏付け</span><input id='mentionform_b'></div> | |
| 560 <div class='item_toulmin'><span>限定詞</span><input id='mentionform_q'></div> | |
| 561 <div class='item_toulmin'><span>反駁 </span><input id='mentionform_r'></div> | |
| 562 </div> | |
| 563 <div class='mention_main main_users'> | |
| 564 <span class='author_label'>作者:</span> | |
| 565 <span class='author_name' id='mention_author'></span> | |
| 566 <div class='option option1' id='mentionvote_option'> | |
| 567 <span class='option option1 vote1' onclick="$('#mentionvote_option')[0].className='option option1'">全会一致</span> | |
| 568 <span class='option option2 vote2' onclick="$('#mentionvote_option')[0].className='option option2'">多数決</span> | |
| 569 </div> | |
| 570 <div id='mention_users'></div> | |
| 571 </div> | |
| 572 </div> | |
| 573 <div class='claim_footer'> | |
| 574 <div class='option' id='mention_option'> | |
| 575 <span class='option option1 mention1' onclick="$('#mention_option')[0].className='option option1'">反論</span> | |
| 576 <span class='option option2 mention2' onclick="$('#mention_option')[0].className='option option2'">質問</span> | |
| 577 <span class='option option3 mention3' onclick="$('#mention_option')[0].className='option option3'">提案</span> | |
| 578 </div> | |
| 579 <span class='button cancel' onclick="popupShowMain()">cancel</span> | |
| 580 <span class='button save' onclick="mentionSave()">save</span> | |
| 581 </div> | |
| 582 <div class='cover' id='mention_cover'></div> | |
| 583 </div> | |
| 584 </div> | |
| 585 </div> | |
| 586 | |
| 587 | |
| 588 | |
| 589 | |
| 590 <div id="loginPopup" style='position:fixed;left:0;top:0;width:100%;height:100%;z-index:10;display:none;'> | |
| 591 <div style='position:absolute;left:0;top:0;width:100%;height:100%;background:black;opacity:0.5'></div> | |
| 592 <div style='position:absolute;left:50%;top:50%;'> | |
| 593 <div style='position:absolute;left:-160px;top:-80px;width:320px;height:120px;background:white'> | |
| 594 <form onsubmit="try{a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}}catch(e){console.log(e)}return false"> | |
| 595 <div style='position:absolute;left:20px;top:15px;font-size:24px;width:280;text-align:center;'> | |
| 596 R-Consensus Login | |
| 597 </div> | |
| 598 <input type=text placeholder='username' style='position:absolute;left:20px;top:70px;width:180px;font-size:16px;height:24px;' id='loginUserName'> | |
| 599 <span style='position:absolute;left:220px;top:70px;width:80px;font-size:16px;height:24px;line-height:24px;' class='button' value='login' onclick="try{a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}}catch(e){console.log(e)}return false">login</span> | |
| 600 </form> | |
| 601 </div> | |
| 602 </div> | |
| 603 </div> |