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