Mercurial > hg > Members > nobuyasu > Consensus
annotate public/viewer/index.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 | 3440be06e501 |
| children |
| rev | line source |
|---|---|
| 51 | 1 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
| 2 <link rel='stylesheet' href="form.css"> | |
| 3 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script> | |
| 4 <script src='form.js'></script> | |
| 5 <script> | |
| 6 var LOAD_INTERVAL=5; | |
| 7 var BASE_URL=""; | |
| 8 var viewer_url="viewer.html"; | |
| 9 $(function(){ | |
| 10 popupInit(); | |
| 11 $('body')[0].onresize=function(){placementUpdate()}; | |
| 56 | 12 if(localStorage.userName){ |
| 13 login(localStorage.userName); | |
| 14 }else{ | |
| 15 var u=$('#loginUserName'); | |
| 16 $("#loginPopup").css("display","block"); | |
| 17 u.val(localStorage.userName||''); | |
| 18 u.focus(); | |
| 19 } | |
| 51 | 20 }); |
| 21 | |
| 22 var loadedClaimIDs={}; | |
| 23 var userList=[]; | |
| 24 function loadUserList(){ | |
| 25 $.ajax({ | |
| 26 url:BASE_URL+"/users/all", | |
| 27 success:function(o){userList=o.sort()}, | |
| 28 type:"GET",cache:false, | |
| 29 error:function(o){console.log("ERROR",o)} | |
| 30 }); | |
| 31 } | |
| 32 function loadClaimIDList(){ | |
| 33 $.ajax({ | |
| 80 | 34 // url:BASE_URL+"/users/consensus/"+userName, |
| 35 url:BASE_URL+"/users/latest/consensus/"+userName, | |
| 51 | 36 success:function(o){claimIDListLoaded(o)}, |
| 37 type:"GET",cache:false, | |
| 38 error:function(o){console.log("ERROR",o)} | |
| 39 }); | |
| 40 function claimIDListLoaded(arr){ | |
| 41 console.log(arr); | |
| 42 for(var i=0;i<arr.length;i++){ | |
| 43 var id=arr[i]; | |
| 44 if(!loadedClaimIDs[id])loadClaim(id); | |
| 45 } | |
| 46 } | |
| 47 function loadClaim(id){ | |
| 48 loadedClaimIDs[id]="loading"; | |
| 49 $.ajax({ | |
| 50 url:BASE_URL+"/consensus/browse/"+id, | |
| 51 success:function(o){claimLoaded(id,o)}, | |
| 52 dataType:"json", | |
| 53 type:"GET",cache:false, | |
| 54 error:function(o){ | |
| 55 console.log("ERROR",o); | |
| 56 if(loadedClaimIDs[id]=="loading")delete loadedClaimIDs[id]; | |
| 57 } | |
| 58 }) | |
| 59 } | |
| 60 function claimLoaded(id,o){ | |
| 61 console.log(id,o,loadedClaimIDs[id]); | |
| 62 if(loadedClaimIDs[id]&&loadedClaimIDs[id]!="loading")return; | |
| 63 var a=$("<a class='claim'></a>"); | |
| 64 a.text(o.toulmin.title); | |
| 65 a[0].href=viewer_url+"?q="+id; | |
| 66 a[0].id=id; | |
| 67 console.log(id) | |
| 68 placementUpdate(a); | |
| 69 loadedClaimIDs[id]={element:a,info:o}; | |
| 70 } | |
| 71 } | |
| 72 | |
| 73 var placementList=[]; | |
| 74 var headerSize=50; | |
| 75 function placementUpdate(element){ | |
| 76 if(element){ | |
| 77 element.appendTo(document.body); | |
| 78 placementList.push(element); | |
| 79 } | |
| 80 if(placementList.length==0)return; | |
| 81 var W=$('body').width(); | |
| 82 var w=placementList[0].outerWidth(); | |
| 83 var w2=w+30; | |
| 84 var n=Math.floor(W/w2); | |
| 85 w2=W/n; | |
| 86 var harr=[];for(var i=0;i<n;i++)harr[i]=headerSize; | |
| 87 for(var i=0;i<placementList.length;i++){ | |
| 88 var e=placementList[i]; | |
| 89 var index=0,y=harr[0]; | |
| 90 for(var j=1;j<n;j++)if(harr[j]<y)y=harr[index=j]; | |
| 91 var x=index*w2+(w2-w)/2; | |
| 92 harr[index]+=e.outerHeight()+30; | |
| 93 e.css({position:"absolute",left:x,top:y+30}); | |
| 94 } | |
| 95 } | |
| 96 | |
| 97 function login(uname){ | |
| 98 userName=localStorage.userName=uname; | |
| 99 $('#header_title').text("R-Consensus : "+uname); | |
| 100 $.ajax({ | |
| 101 url:BASE_URL+"/users/create/"+uname, | |
| 102 success:function(o){console.log(o)}, | |
| 103 type:"PUT",cache:false, | |
| 104 error:function(o){console.log(o)} | |
| 105 }); | |
| 106 loadClaimIDList(uname); | |
| 107 loadUserList(); | |
| 108 setInterval(function(){loadUserList();loadClaimIDList(uname)},LOAD_INTERVAL*1000); | |
| 109 } | |
| 110 | |
| 111 var claimUserMap | |
| 112 function showForm(){ | |
| 113 $("#claimbody")[0].className="claim_contents"; | |
| 114 | |
| 53 | 115 var keys=['title','contents','w','d','b','q','r']; |
| 116 for(var i=0;i<keys.length;i++)$("#claimform_"+keys[i]).val(""); | |
| 51 | 117 $("#claim_author").text(userName); |
| 118 $("#claimvote_option")[0].className="option1"; | |
| 119 claimUserMap=new HashSet(); | |
| 120 $("#claim_users").text(""); | |
| 121 for(var i=0;i<userList.length;i++){ | |
| 122 var name=userList[i]; | |
| 123 if(name==userName)continue; | |
| 124 createUserSelectItem(name,"",claimUserMap).appendTo($("#claim_users")); | |
| 125 } | |
| 126 popupShowMain(); | |
| 127 } | |
| 61 | 128 function logout(){ |
| 129 localStorage.userName = ""; | |
| 130 location.href = ""; | |
| 131 } | |
| 63 | 132 function reset(){ |
| 133 $.ajax({ | |
| 134 url:BASE_URL+"/reset", | |
| 135 success:function(o){}, | |
| 136 type:"GET",cache:false, | |
| 137 error:function(o){ | |
| 138 console.log("reset Data"); | |
| 139 } | |
| 140 }) | |
| 141 logout(); | |
| 142 } | |
| 143 | |
| 51 | 144 function claimSave(){ |
| 145 var agreeType=[null,"unanimously","majority"][($('#claimvote_option')[0].className.match("[0-9]+")||"0")[0]]; | |
| 146 var title=$('#claimform_title').val(); | |
| 147 var contents=$('#claimform_contents').val(); | |
| 148 var d=$('#claimform_d').val(); | |
| 149 var w=$('#claimform_w').val(); | |
| 150 var b=$('#claimform_b').val(); | |
| 151 var q=$('#claimform_q').val(); | |
| 152 var r=$('#claimform_r').val(); | |
| 153 var users=claimUserMap.toArray(); | |
| 154 var errors=[]; | |
| 155 if(!title)errors.push("タイトル"); | |
| 156 if(!agreeType)errors.push("採決方法"); | |
| 157 if(users.length==0)errors.push("同意を取るユーザ"); | |
| 158 if(errors.length){ | |
| 159 alert("未入力項目："+errors.join(", ")); | |
| 160 }else{ | |
| 161 $.ajax({ | |
| 162 url:BASE_URL+"/claims/create", | |
| 163 success:function(o){loadClaimIDList()}, | |
| 164 type:"POST",cache:false,contentType:"application/json", | |
| 165 data:JSON.stringify({type:agreeType,toulmin:{title:title,contents:contents,q:q,d:d,w:w,b:b,r:r},author:userName,users:users}), | |
| 166 error:function(o){console.log("ERROR",o)} | |
| 167 }); | |
| 168 popupHideAll(); | |
| 169 } | |
| 170 } | |
| 171 | |
| 172 | |
| 173 </script> | |
| 174 <style> | |
| 175 body{ | |
| 176 background:black; | |
| 177 } | |
| 178 a.claim{ | |
| 179 overflow:hidden; | |
| 180 font-size:32px; | |
| 181 border-radius:16px; | |
| 182 background:silver; | |
| 183 display:block; | |
| 184 width:200px; | |
| 185 padding:5px; | |
| 186 background:white; | |
| 187 box-shadow:0 0 10px white; | |
| 188 } | |
| 189 a.claim:hover{box-shadow:0 0 30px white;} | |
| 190 | |
| 191 </style> | |
| 56 | 192 <div id="loginPopup" style='position:fixed;left:0;top:0;width:100%;height:100%;z-index:10;display:none;'> |
|
118
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
193 <div style='position:absolute;left:0;top:0;width:100%;height:100%;background:black;opacity:0.5'></div> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
194 <div style='position:absolute;left:50%;top:50%;'> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
195 <div style='position:absolute;left:-160px;top:-80px;width:320px;height:120px;background:white'> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
196 <form onsubmit="try{a=$('#loginUserName');if(a.val()){login(a.val());$('#loginPopup').remove();}}catch(e){console.log(e)}return false"> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
197 <div style='position:absolute;left:20px;top:15px;font-size:24px;width:280;text-align:center;'> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
198 R-Consensus Login |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
199 </div> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
200 <input type=text placeholder='username' style='position:absolute;left:20px;top:70px;width:180px;font-size:16px;height:24px;' id='loginUserName'> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
201 <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> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
202 </form> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
203 </div> |
|
3440be06e501
modified Claim.java and TPGRaph getLatestVertexId method
one
parents:
80
diff
changeset
|
204 </div> |
| 51 | 205 </div> |
| 206 | |
| 207 | |
| 208 | |
| 209 | |
| 210 | |
| 211 | |
| 212 <style> | |
| 213 | |
| 214 div.claiminfo{left:-300px;top:-200px;} | |
| 215 | |
| 216 | |
| 217 body{ | |
| 218 margin:0px; | |
| 219 } | |
| 220 div.header{ | |
| 221 position:fixed; | |
| 222 left:0;top:0; | |
| 223 z-index:5; | |
| 224 height:50px; | |
| 225 width:100%; | |
| 53 | 226 background:#223; |
| 227 background:-moz-linear-gradient(top,#002,#223); | |
| 51 | 228 background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223)); |
| 229 color:silver; | |
| 230 font-size:40px; | |
| 231 } | |
| 232 span.createButton{ | |
| 233 position:absolute;right:0;top:0; | |
| 234 text-align:center; | |
| 235 width:160;height:50; | |
| 236 cursor:pointer; | |
| 53 | 237 background:#334; |
| 238 background:-moz-linear-gradient(top,#224,#334); | |
| 51 | 239 background:-webkit-gradient(linear,left top,left bottom,from(#224),to(#334)); |
| 240 color:silver; | |
| 241 } | |
| 61 | 242 span.logoutButton{ |
| 63 | 243 position:absolute;right:500;top:0; |
| 244 text-align:center; | |
| 245 width:160;height:50; | |
| 246 cursor:pointer; | |
| 247 background:#334; | |
| 248 background:-moz-linear-gradient(top,#224,#334); | |
| 249 background:-webkit-gradient(linear,left top,left bottom,from(#224),to(#334)); | |
| 250 color:silver; | |
| 251 } | |
| 252 span.resetButton{ | |
| 253 position:absolute;right:300;top:0; | |
| 61 | 254 text-align:center; |
| 255 width:160;height:50; | |
| 256 cursor:pointer; | |
| 257 background:#334; | |
| 258 background:-moz-linear-gradient(top,#224,#334); | |
| 259 background:-webkit-gradient(linear,left top,left bottom,from(#224),to(#334)); | |
| 260 color:silver; | |
| 261 } | |
| 51 | 262 </style> |
| 263 | |
| 264 <div class='header'> | |
| 265 <span id='header_title'>R-Consensus : Login</span> | |
| 266 <span onclick="showForm()" class='createButton'>create</span> | |
| 61 | 267 <span onclick="logout()" class='logoutButton'>logout</span> |
| 63 | 268 <span onclick="reset()" class='resetButton'>reset</span> |
| 51 | 269 |
| 270 </div> | |
| 271 <div id='popup_base' style='display:none;z-index:100'> | |
| 272 <div id='popup_background' onclick="$('#popup_base').css('display','none')"></div> | |
| 273 <div class='popup_center'> | |
| 274 <div class='mentioninfo' id='mentioninfo'><div class='cover' id='mention_cover'></div></div> | |
| 275 <div class='claiminfo' id='claiminfo'> | |
| 276 <div class='claim_title'><input placeholder="title" id='claimform_title'></div> | |
| 277 <div id='claimbody' class='claim_contents'> | |
| 278 <div class='claim_menu'> | |
| 279 <div class='menu_item menu_contents' onclick="$('#claimbody')[0].className='claim_contents'">Contents</div> | |
| 280 <div class='menu_item menu_toulmin' onclick="$('#claimbody')[0].className='claim_toulmin'">Toulmin</div> | |
| 281 <div class='menu_item menu_users' onclick="$('#claimbody')[0].className='claim_users'">Users</div> | |
| 282 <div id='claim_status'></div> | |
| 283 </div> | |
| 284 <div class='claim_main main_contents'> | |
| 285 <textarea placeholder='contents' id='claimform_contents'></textarea> | |
| 286 </div> | |
| 287 <div class='claim_main main_toulmin'> | |
| 288 <div class='item_toulmin'><span>データ</span><input id='claimform_d'></div> | |
| 289 <div class='item_toulmin'><span>論拠 </span><input id='claimform_w'></div> | |
| 290 <div class='item_toulmin'><span>裏付け</span><input id='claimform_b'></div> | |
| 291 <div class='item_toulmin'><span>限定詞</span><input id='claimform_q'></div> | |
| 292 <div class='item_toulmin'><span>反駁 </span><input id='claimform_r'></div> | |
| 293 </div> | |
| 294 <div class='claim_main main_users'> | |
| 295 <span class='author_label'>作者:</span> | |
| 296 <span class='author_name' id='claim_author'></span> | |
| 297 <div class='option option1' id='claimvote_option'> | |
| 298 <span class='option option1 vote1' onclick="$('#claimvote_option')[0].className='option option1'">全会一致</span> | |
| 299 <span class='option option2 vote2' onclick="$('#claimvote_option')[0].className='option option2'">多数決</span> | |
| 300 </div> | |
| 301 <div id='claim_users'></div> | |
| 302 </div> | |
| 303 </div> | |
| 304 <div class='claim_footer'> | |
| 305 <div id='claim_button'> | |
| 306 <span class='button cancel' onclick="popupHideAll()">cancel</span> | |
| 307 <span class='button save' onclick="claimSave()">save</span> | |
| 308 </div> | |
| 309 </div> | |
| 310 <div id='claim_cover' class='cover'></div> | |
| 311 </div> | |
| 312 </div> | |
| 313 </div> |