OSDN Git Service

implement rec10webg3 colored type.
[rec10/rec10-git.git] / Rec10WEBG3 / trunk / rec10webg3.htm
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
2 <html dir="ltr">\r
3     <head>\r
4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
5         <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">\r
6                 <!--<link rel="stylesheet" type="text/css" href="./dojo-release-1.5.0/dijit/themes/claro/claro.css">-->\r
7         <style type="text/css">\r
8             body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }\r
9         </style>\r
10         <style type="text/css">\r
11                 html, body { width: 100%; height: 100%; margin: 0; overflow:hidden; }\r
12                 #borderContainerTwo { width: 100%; height: 100%; }\r
13         </style>\r
14                 <title>Rec10Suite 0.0.3</title>\r
15                 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>\r
16                 <!--<script src="./dojo-release-1.5.0/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>-->\r
17                 <script type="text/javascript">\r
18                         //dojo.require("dojo.event.connect");\r
19                 dojo.require("dijit.layout.ContentPane");\r
20                 dojo.require("dijit.layout.TabContainer");\r
21                 dojo.require("dijit.layout.AccordionContainer");\r
22                         dojo.require("dijit.layout.BorderContainer");\r
23                         dojo.require("dojo.data.ItemFileReadStore");\r
24                         dojo.require("dijit.form.FilteringSelect");\r
25                         dojo.require("dijit.form.DateTextBox");\r
26                         dojo.require("dijit.form.TimeTextBox");\r
27                         dojo.require("dijit.form.HorizontalSlider");\r
28                         dojo.require("dijit.form.HorizontalRuleLabels");\r
29                         dojo.require("dojox.grid.DataGrid");\r
30                         //dojo.require("dojo.date");\r
31                         dojo.require("dojo.date.locale");\r
32                         var ttch=["","",""];\r
33                         var ttlastchange=0;\r
34                         var gbtime="";\r
35                         var getime="";\r
36                         var reserve_grid_structure= [{cells:[\r
37                                 {name:"ID",field:"id",width:"4em"},\r
38                                 {name:"タイプ",field:"type",width:"5em",formatter:gridTypeFormatter},\r
39                                 {name:"チャンネル",field:"chtxt",width:"5em"},\r
40                                 {name:"開始",field:"btime",width:"6em"},\r
41                                 {name:"終了",field:"etime",width:"3em"},\r
42                                 {name:"タイトル",field:"title",width:"auto"},\r
43                                 {name:"opt",field:"opt",width:"3em"},\r
44                                 {name:"dt",field:"deltatime",width:"3em"},\r
45                                 {name:"dd",field:"deltaday",width:"3em"}\r
46                         ]}];\r
47                         function readCh(){\r
48                                 var chlistPaneTE=dojo.byId("progTableTE");\r
49                                 var chlistPaneBS=dojo.byId("progTableBS");\r
50                                 var chlistPaneCS=dojo.byId("progTableCS");\r
51                                 dojo.xhrGet({\r
52                                         url:"rec10webg3.py?mode=chlist",\r
53                                         handleAs: "json",\r
54                                         load: function(data,ioargs){\r
55                                                 //console.log("res=", data['items']);\r
56                                                 for (i=0;i<data['items'].length;i++){\r
57                                                         var node = document.createElement("div");\r
58                                                         var child = new dijit.form.ToggleButton\r
59                                                                 ( {id: data['items'][i]["name"], \r
60                                                                 label: data['items'][i]["label"],\r
61                                                                 iconClass: "dijitCheckBoxIcon"},node );\r
62                                                         dojo.connect(node,"onClick",data['items'][i]["name"],addTimetableCh);\r
63                                                         if (data['items'][i]['type']=="bs"){\r
64                                                                 chlistPaneBS.appendChild(child.domNode);\r
65                                                         }else if (data['items'][i]['type']=="cs"){\r
66                                                                 chlistPaneCS.appendChild(child.domNode);\r
67                                                         }else {\r
68                                                                 chlistPaneTE.appendChild(child.domNode);\r
69                                                         }\r
70                                                 }; \r
71                                         },\r
72                                         error: function(error,args) {\r
73                                           console.warn("error!",error);\r
74                                         }\r
75                                 });\r
76                         };\r
77                         function changeTab(tabid){\r
78                                 dijit.byId("main_tab").selectChild(dijit.byId(tabid));\r
79                         }\r
80                         function setFilteringSelectValue(dijitid){\r
81                                 console.warn("test");\r
82                                 dijit.byId(dijitid).set('value',dijit.byId(dijitid).store._arrayOfAllItems[0]['id']);\r
83                         }\r
84                         function DateTime2dt(ttime){\r
85                                 var tt=new Date(parseInt(ttime.substring(0,4)),parseInt(ttime.substring(5,7)),parseInt(ttime.substring(8,10)),parseInt(ttime.substring(11,13)),parseInt(ttime.substring(14,16),0));\r
86                                 return tt\r
87                         }\r
88                         function dt2DateTime(tt){\r
89                                 function get2(t){\r
90                                         if (t<10){\r
91                                                 return "0"+t\r
92                                         }else{\r
93                                                 return t\r
94                                         }\r
95                                 }\r
96                                 var month=parseInt(tt.getMonth());\r
97                                 return tt.getFullYear()+"-"+get2(month)+"-"+get2(tt.getDate())+"T"+get2(tt.getHours())+":"+get2(tt.getMinutes())+":"+get2(tt.getSeconds());\r
98                         }\r
99                         function addTimetableCh(chtxt){\r
100                                 var have = 0;\r
101                                 console.dir(chtxt);\r
102                                 for (i = 0; i < 3; i++) {\r
103                                         if (ttch[i] == chtxt) {\r
104                                                 ttch[i] = "";\r
105                                                 have = 1;\r
106                                                 removeSingleCh("timetable-id"+i);\r
107                                         }\r
108                                 }\r
109                                 if (have == 0) {\r
110                                         var change = 0;\r
111                                         for (i = 0; i < 3; i++) {\r
112                                                 if (ttch[i].length == 0) {\r
113                                                         ttch[i] = chtxt;\r
114                                                         ttlastchange = i;\r
115                                                         change = 1;\r
116                                                 }\r
117                                         }\r
118                                         if (change == 0) {\r
119                                                 ttch[(ttlastchange + 1) % 3] = chtxt;\r
120                                                 change = 1;\r
121                                                 ttlastchange = (ttlastchange + 1) % 3;\r
122                                         }\r
123                                         showTimeTable("timetableContainer", ttch, gbtime, getime, 5);\r
124                                 }\r
125                         }\r
126                         function calcMaxHeight(parentid,chlists,bt,et,fontsize){\r
127                                 var maxH=0;\r
128                                 var tempH=0;\r
129                                 for (ch in chlists){\r
130                                         var chnode=dojo.doc.createElement("div");\r
131                                         chnode.setAttribute("style","width:100%;");\r
132                                         //chnode.setAttribute("id",data['items'][i]['id']);\r
133                                         dojo.xhrGet({\r
134                                                 url:parentid+".json",\r
135                                                 handleAs: "json",\r
136                                                 sync: true,\r
137                                                 load: function(data,ioargs){\r
138                                                         var baseForm=dojo.byId(parentid);\r
139                                                         for (i=0;i<data['items'].length;i++){\r
140                                                                 var node = dojo.doc.createElement("div");\r
141                                                                 node.setAttribute("style","border:3px solid #CCC;width:100%;");\r
142                                                                 node.setAttribute("id",data['items'][i]['id']);\r
143                                                                 var nodetitle = dojo.doc.createElement("h5");\r
144                                                                 var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);\r
145                                                                 var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);\r
146                                                                 nodetitle.appendChild(node_str);\r
147                                                                 node.appendChild(nodetitle);\r
148                                                                 node.appendChild(node_str_desc);\r
149                                                                 baseForm.appendChild(node);\r
150                                                                 tempH=tempH+node.clientHeight;\r
151                                                                 if (maxH<tempH){\r
152                                                                         maxH=tempH;\r
153                                                                 }\r
154                                                                 baseForm.removeChild(node);\r
155                                                         }; \r
156                                                 },\r
157                                                 error: function(error,args) {\r
158                                                   console.warn("error!",error);\r
159                                                 }\r
160                                         });\r
161                                         //console.log(maxH);\r
162                                         //console.log(tempH);\r
163                                         if (maxH<tempH){\r
164                                                 maxH=tempH;\r
165                                         }\r
166                                         tempH=0;\r
167                                 }\r
168                                 return maxH;\r
169                         }\r
170                         function showTimeTableSingleCH(parentid,ch,bt,et,fontsize,maxsize){\r
171                                 var thisMaxheight=calcMaxHeight(parentid,[ch,],bt,et,fontsize);\r
172                                 dojo.xhrGet({\r
173                                         url:parentid+".json",\r
174                                         handleAs: "json",\r
175                                         load: function(data,ioargs){\r
176                                                 var baseForm=dojo.byId(parentid);\r
177                                                 console.dir(baseForm);\r
178                                                 for (i=0;i<data['items'].length;i++){\r
179                                                         var node = dojo.doc.createElement("div");\r
180                                                         node.setAttribute("style","border:3px solid #FFFFFF;width:100%;");\r
181                                                         node.setAttribute("id",data['items'][i]['id']+"_test");\r
182                                                         var nodetitle = dojo.doc.createElement("h5");\r
183                                                         var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);\r
184                                                         var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);\r
185                                                         nodetitle.appendChild(node_str);\r
186                                                         node.appendChild(nodetitle);\r
187                                                         node.appendChild(node_str_desc);\r
188                                                         baseForm.appendChild(node);\r
189                                                         var h=node.clientHeight;\r
190                                                         console.log(h);\r
191                                                         baseForm.removeChild(node);\r
192                                                         node = dojo.doc.createElement("div");\r
193                                                         node.setAttribute("style","border:3px solid #CCC;width:100%;height:"+h*maxsize/thisMaxheight+"");\r
194                                                         node.setAttribute("id",data['items'][i]['id']);\r
195                                                         nodetitle = dojo.doc.createElement("h5");\r
196                                                         node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);\r
197                                                         node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);\r
198                                                         nodetitle.appendChild(node_str);\r
199                                                         node.appendChild(nodetitle);\r
200                                                         node.appendChild(node_str_desc);\r
201                                                         baseForm.appendChild(node);\r
202                                                 }; \r
203                                         },\r
204                                         error: function(error,args) {\r
205                                           console.warn("error!",error);\r
206                                         }\r
207                                 });\r
208                         }\r
209                         function removeSingleCh(parentid){\r
210                                 var baseForm=dojo.byId(parentid);\r
211                                 var children=baseForm.getChildren();\r
212                                 console.dir(children);\r
213                                 for (i=0;i<children.length();i++){\r
214                                         baseForm.removeChild(childen[i]);\r
215                                 }\r
216                         }\r
217                         function showTimeTable(parentid,chlists,btime,etime,fontsize){\r
218                                 var widthp=Math.floor(100/chlists.length);\r
219                                 var every_width=20;\r
220                                 var timetabelArray= new Array();\r
221                                 var bt=new Date(parseInt(btime.substring(0,4)),parseInt(btime.substring(5,7)),parseInt(btime.substring(8,10)),parseInt(btime.substring(11,13)),parseInt(btime.substring(14,16),0));\r
222                                 var et=new Date(parseInt(etime.substring(0,4)),parseInt(etime.substring(5,7)),parseInt(etime.substring(8,10)),parseInt(etime.substring(11,13)),parseInt(etime.substring(14,16),0));\r
223                                 bt.setSeconds(0);\r
224                                 if (bt.getMinutes()>30){\r
225                                         bt.setMinutes(30);\r
226                                 }else{\r
227                                         bt.setMinutes(0);\r
228                                 }\r
229                                 et.setSeconds(0);\r
230                                 if (et.getMinutes()>30){\r
231                                         et.setMinutes(30);\r
232                                         et=dojo.date.add(et, "minute", 30);\r
233                                 }else{\r
234                                         et.setMinutes(30);\r
235                                 }\r
236                                 var dt=dojo.date.difference(bt,et,"minute");\r
237                                 var nbt=bt;\r
238                                 var i=0;\r
239                                 while(dt>i){\r
240                                         console.dir([dt,i]);\r
241                                         net=dojo.date.add(nbt,"minute",30);\r
242                                         var theight=calcMaxHeight("timetable-id0",chlists,dt2DateTime(nbt),dt2DateTime(net),fontsize);\r
243                                         console.log(theight)\r
244                                         for (j=0;j<chlists.length;j++){\r
245                                                 if (j>2){\r
246                                                         j=chlists.length;\r
247                                                 }else{\r
248                                                         showTimeTableSingleCH("timetable-id"+j,chlists[j],nbt,net,fontsize,theight);\r
249                                                 }\r
250                                         }\r
251                                         i=i+30;\r
252                                         nbt=dojo.date.add(nbt,"minute",30);\r
253                                 }\r
254                         }
255                         function gridTypeFormatter(type){
256                                 switch(type){
257                                 case "reserve_flexible":return "<span style='color:skyblue'>未確定予約</span>";
258                                 case "reserve_fixed":return "<span style='color:blue'>確定予約</span>";
259                                 case "convert_ts_mp4_network":return "<span style='color:black'>ネット変換予約</span>";
260                                 case "convert_ts_mp4_running":return "<span style='color:orange'>動画圧縮中</span>";
261                                 case "convert_ts_mp4":return "<span style='color:yellow'>圧縮予約</span>";
262                                 case "convert_avi_mp4_miss":return "<span style='color:'></span>";
263                                 case "search_today":return "<span style='color:skyblue'>当日予約</span>";
264                                 case "search_everyday":return "<span style='color:purple'>隔日予約</span>";
265                                 case "convert_ts_mp4_finished":return "<span style='color:gray'>圧縮終了</span>";
266                                 case "convert_b25_ts_miss":return "<blink><span style='color:red'>解読失敗</span></blink>";
267                                 case "convert_b25_ts":return "<span style='color:green'>解読予約</span>";
268                                 case "convert_b25_ts_running":return "<span style='color:yellowgreen'>解読中</span>";
269                                 case "reserve_running":return "<span style='color:orange'>録画中</span>";
270                                 case "convert_mkv_mp4_runnings":return "<span style='color:'></span>";
271                                 case "convert_avi_mkv":return "<span style='color:'></span>";
272                                 case "convert_avi_mp4":return "<span style='color:'></span>";
273                                 case "convert_mkv_mp4":return "<span style='color:'></span>";
274                                 case "move_end":return "<span style='color:gray'>移動終了</span>";
275                                 
276                                 default : return type;
277                                 }
278                         }\r
279                         dojo.addOnLoad\r
280                         (\r
281                             function(){\r
282                                         readCh();\r
283                                 }\r
284                         );\r
285         </script>\r
286                 <style type="text/css">\r
287                         @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";\r
288             @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";\r
289                 </style>\r
290     </head>\r
291     \r
292     <body class=" claro ">\r
293         <div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo">\r
294             <div dojoType="dijit.layout.ContentPane" region="top" splitter="false">\r
295                 Rec10Suite WEB Interface version 0.0.1\r
296             </div>\r
297             <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"\r
298             region="center" id="mainSplit">\r
299                 <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;"\r
300                 id="leftMainAccordion" region="leading" splitter="true">\r
301                     <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">\r
302                         <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 100%;"\r
303                                 id="leftProgramTabTE" region="leading" splitter="true">\r
304                                                         <div dojoType="dijit.layout.BorderContainer" id="progTableTE" title="地上派" selected="true"></div>\r
305                                                         <div dojoType="dijit.layout.BorderContainer" id="progTableBS" title="BS"></div>\r
306                                                         <div dojoType="dijit.layout.BorderContainer" id="progTableCS" title="CS"></div>\r
307                                                 </div>\r
308                     </div>\r
309                     <div dojoType="dijit.layout.ContentPane" title="予約">\r
310                                                 <div dojoType="dijit.form.Button" id="simpleReserveButton" label="新規予約" onclick=changeTab("tab_newreserve")></div>\r
311                                                 <hr>\r
312                                                 <div dojoType="dijit.form.Button" id="ReserveListTimeButton" label="予約確認(時間順)" onclick=changeTab("tab_list_time")></div>\r
313                     </div>\r
314                     <div dojoType="dijit.layout.ContentPane" title="設定">\r
315                     </div>\r
316                     <div dojoType="dijit.layout.ContentPane" title="その他">\r
317                     </div>\r
318                 </div>\r
319                 <div dojoType="dijit.layout.TabContainer" id="main_tab" region="center" tabStrip="true">\r
320                     <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">\r
321                         <div dojoType="dijit.layout.BorderContainer" id="timetableContainer" design="headline" style="width:100%;height:100%;" gutters="true">\r
322                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-id0" region="left" style="width:30%"></div>\r
323                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-id1" region="center"></div>\r
324                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-id2" region="right" style="width:30%"></div>\r
325                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-button" region="bottom" style="height:4%;position:relative;">\r
326                                                                 <div dojoType="dijit.form.Button" style="position:absolute;left:0.5em;" onClick=showTimeTable()><<前</div>\r
327                                                                 <div dojoType="dijit.form.Button" style="position:absolute;right:0.5em;" onClick=showTimeTable()>次>></div>\r
328                                                                 <div dojoType="dijit.form.Button" style="position:absolute;left:40%;" onClick=showTimeTable()>06h</div>\r
329                                                                 <div dojoType="dijit.form.Button" style="position:absolute;left:48.5%;" onClick=showTimeTable()>12h</div>\r
330                                                                 <div dojoType="dijit.form.Button" style="position:absolute;right:40%;" onClick=showTimeTable()>24h</div>\r
331                                                                 <div dojoType="dijit.form.Button" style="position:absolute;left:10%;" onClick=showTimeTable("timetableContainer",["tb1","tb2","tb3"],"2001-01-01T12:00:00","2001-01-01T13:15:00",5)>test</div>\r
332                                                         </div>\r
333                                                 </div>\r
334                         </div>
335                         <div dojoType="dijit.layout.ContentPane" id="tab_timetablebasic" title="TimeTable" href="rec10webg2.pl">
336                         </div>\r
337                     <div dojoType="dijit.layout.ContentPane" id="tab_list_time" title="予約確認(時間順)">\r
338                         <div dojoType="dojo.data.ItemFileReadStore" jsId="reserveStore"\r
339                                                 url="rec10webg3.py?mode=timeline"></div>\r
340                         <table dojoType="dojox.grid.DataGrid" id="grid_reserve_list_time" structure="reserve_grid_structure"\r
341                                                  store="reserveStore" style="font-size:1.4em;"></table>\r
342                     </div>\r
343                     <div dojoType="dijit.layout.ContentPane" id="tab_newreserve" title="新規予約">\r
344                                 <h2>新規予約</h2><br>\r
345                                                         <p>\r
346                                                         <div dojoType="dojo.data.ItemFileReadStore" jsId="chlistStore"\r
347                                                 url="chlist.json"></div>\r
348                                                         <div dojoType="dojo.data.ItemFileReadStore" jsId="dbtypeStore"\r
349                                                 url="typelist.json" ></div>\r
350                                                                 <h3>タイトル:</h3>\r
351                                                                 <div dojoType="dijit.form.TextBox" id="newreserve_title" style="width:30%"></div><br>\r
352                                                         </p>\r
353                                                         <p>\r
354                                                                 <h3>詳細設定</h3>\r
355                                                                 コマンド:\r
356                                                                 <div dojoType="dijit.form.FilteringSelect" id="newreserve_dbtype_list" \r
357                                                                         autoComplete="true" store="dbtypeStore" searchAttr= "label" \r
358                                                                         onShow="setFilteringSelectValue('newreserve_dbtype_list')"></div>\r
359                                                                 チャンネル:\r
360                                                                 <div dojoType="dijit.form.FilteringSelect" id="newreserve_ch_list" \r
361                                                                         autoComplete="true" store="chlistStore" searchAttr= "label" \r
362                                                                         onShow="setFilteringSelectValue('newreserve_ch_list')"></div><br>\r
363                                                                 <p>\r
364                                                                         <h4>時刻設定</h4>\r
365                                                                         開始時間:\r
366                                                                         <div dojoType="dijit.form.DateTextBox" id="newreserve_bdata" constraints="{datePattern:'yyyy-MM-dd'}"></div>\r
367                                                                         <div dojoType="dijit.form.TimeTextBox" id="newreserve_btime"></div><br>\r
368                                                                         終了時間:\r
369                                                                         <div dojoType="dijit.form.DateTextBox" id="newreserve_edata" constraints="{datePattern:'yyyy-MM-dd'}"></div>\r
370                                                                         <div dojoType="dijit.form.TimeTextBox" id="newreserve_etime"></div><br><br>\r
371                                                                         <p>\r
372                                                                         隔日検索:\r
373                                                                         <div dojoType="dijit.form.HorizontalSlider" id="newreserve_deladay" \r
374                                                                         minimum="1" maximum="7" value="7" discreteValues="7"\r
375                                                                          intermediateChanges="true" style="width:300px">\r
376                                                                                 <ol dojoType="dijit.form.HorizontalRuleLabels">\r
377                                                                                         <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>\r
378                                                                                         <li>6</li><li>7</li>\r
379                                                                                 </ol>\r
380                                                                          </div><br>\r
381                                                                          時刻揺らぎ:\r
382                                                                          <div dojoType="dijit.form.HorizontalSlider" id="newreserve_delatime" \r
383                                                                         minimum="1" maximum="10" value="3" discreteValues="10"\r
384                                                                          intermediateChanges="true" style="width:300px">\r
385                                                                                 <ol dojoType="dijit.form.HorizontalRuleLabels">\r
386                                                                                         <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>\r
387                                                                                         <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>\r
388                                                                                 </ol>\r
389                                                                          </div>\r
390                                                                          </p>\r
391                                                                 </p>\r
392                                                         </p>\r
393                                                         <div dojoType="dijit.form.Button" onClick=showTimeTable("tab_newreserve",["tb1","tb2"],"2001-01-01T12:00:00","2001-01-01T13:15:00",5)></div>\r
394                     </div>\r
395                 </div>\r
396             </div>\r
397         </div>\r
398     </body>\r
399 </html>\r