Rec10WEBG3/trunk/rec10webg3.htm

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html dir="ltr">
   3     <head>
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5         <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
   6                 <!--<link rel="stylesheet" type="text/css" href="./dojo-release-1.5.0/dijit/themes/claro/claro.css">-->
   7         <style type="text/css">
   8             body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
   9         </style>
  10         <style type="text/css">
  11             html, body { width: 100%; height: 100%; margin: 0; overflow:hidden; }
  12             #borderContainerTwo { width: 100%; height: 100%; }
  13         </style>
  14                 <title>Rec10Suite 0.0.1</title>
  15                 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>
  16                 <!--<script src="./dojo-release-1.5.0/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad : true, isDebug : true"></script>-->
  17                 <script type="text/javascript">
  18                 dojo.require("dijit.layout.ContentPane");
  19                 dojo.require("dijit.layout.TabContainer");
  20                 dojo.require("dijit.layout.AccordionContainer");
  21                         dojo.require("dijit.layout.BorderContainer");
  22                         dojo.require("dojo.data.ItemFileReadStore");
  23                         dojo.require("dijit.form.FilteringSelect");
  24                         dojo.require("dijit.form.DateTextBox");
  25                         dojo.require("dijit.form.TimeTextBox");
  26                         dojo.require("dijit.form.HorizontalSlider");
  27                         dojo.require("dijit.form.HorizontalRuleLabels");
  28                         dojo.require("dojo.date");
  29                         dojo.require("dojo.date.locale");
  30                         function readCh(){
  31                                 var chlistPaneTE=dojo.byId("progTableTE");
  32                                 var chlistPaneBS=dojo.byId("progTableBS");
  33                                 var chlistPaneCS=dojo.byId("progTableCS");
  34                                 dojo.xhrGet({
  35                                         url:"chlist.json",
  36                                         handleAs: "json",
  37                                         load: function(data,ioargs){
  38                                                 //console.log("res=", data['items']);
  39                                                 for (i=0;i<data['items'].length;i++){
  40                                                         var node = document.createElement("div");
  41                                                         var child = new dijit.form.ToggleButton
  42                                                                 ( {id: data['items'][i]["name"],
  43                                                                 label: data['items'][i]["label"],
  44                                                                 iconClass: "dijitCheckBoxIcon" },node );
  45                                                         if (data['items'][i]['type']=="bs"){
  46                                                                 chlistPaneBS.appendChild(child.domNode);
  47                                                         }else if (data['items'][i]['type']=="cs"){
  48                                                                 chlistPaneCS.appendChild(child.domNode);
  49                                                         }else {
  50                                                                 chlistPaneTE.appendChild(child.domNode);
  51                                                         }
  52                                                 };
  53                                         },
  54                                         error: function(error,args) {
  55                                           console.warn("error!",error);
  56                                         }
  57                                 });
  58                         };
  59                         function changeTab(tabid){
  60                                 dijit.byId("main_tab").selectChild(dijit.byId(tabid));
  61                         }
  62                         function setFilteringSelectValue(dijitid){
  63                                 console.warn("test");
  64                                 dijit.byId(dijitid).set('value',dijit.byId(dijitid).store._arrayOfAllItems[0]['id']);
  65                         }
  66                         function DateTime2dt(ttime){
  67                                 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));
  68                                 return tt
  69                         }
  70                         function dt2DateTime(tt){
  71                                 function get2(t){
  72                                         if (t<10){
  73                                                 return "0"+t
  74                                         }else{
  75                                                 return t
  76                                         }
  77                                 }
  78                                 var month=parseInt(tt.getMonth());
  79                                 return tt.getFullYear()+"-"+get2(month)+"-"+get2(tt.getDate())+"T"+get2(tt.getHours())+":"+get2(tt.getMinutes())+":"+get2(tt.getSeconds());
  80                         }
  81                         function calcMaxHeight(parentid,chlists,bt,et,fontsize){
  82                                 var maxH=0;
  83                                 var tempH=0;
  84                                 for (ch in chlists){
  85                                         var chnode=dojo.doc.createElement("div");
  86                                         chnode.setAttribute("style","width:100%;");
  87                                         //chnode.setAttribute("id",data['items'][i]['id']);
  88                                         dojo.xhrGet({
  89                                                 url:parentid+".json",
  90                                                 handleAs: "json",
  91                                                 sync: true,
  92                                                 load: function(data,ioargs){
  93                                                         var baseForm=dojo.byId(parentid);
  94                                                         for (i=0;i<data['items'].length;i++){
  95                                                                 var node = dojo.doc.createElement("div");
  96                                                                 node.setAttribute("style","border:3px solid #CCC;width:100%;");
  97                                                                 node.setAttribute("id",data['items'][i]['id']);
  98                                                                 var nodetitle = dojo.doc.createElement("h5");
  99                                                                 var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);
 100                                                                 var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);
 101                                                                 nodetitle.appendChild(node_str);
 102                                                                 node.appendChild(nodetitle);
 103                                                                 node.appendChild(node_str_desc);
 104                                                                 baseForm.appendChild(node);
 105                                                                 tempH=tempH+node.clientHeight;
 106                                                                 if (maxH<tempH){
 107                                                                         maxH=tempH;
 108                                                                 }
 109                                                                 baseForm.removeChild(node);
 110                                                         };
 111                                                 },
 112                                                 error: function(error,args) {
 113                                                   console.warn("error!",error);
 114                                                 }
 115                                         });
 116                                         //console.log(maxH);
 117                                         //console.log(tempH);
 118                                         if (maxH<tempH){
 119                                                 maxH=tempH;
 120                                         }
 121                                         tempH=0;
 122                                 }
 123                                 return maxH;
 124                         }
 125                         function showTimeTableSingleCH(parentid,ch,bt,et,fontsize,maxsize){
 126                                 var thisMaxheight=calcMaxHeight(parentid,[ch,],bt,et,fontsize);
 127                                 dojo.xhrGet({
 128                                         url:parentid+".json",
 129                                         handleAs: "json",
 130                                         load: function(data,ioargs){
 131                                                 var baseForm=dojo.byId(parentid);
 132                                                 console.dir(baseForm);
 133                                                 for (i=0;i<data['items'].length;i++){
 134                                                         var node = dojo.doc.createElement("div");
 135                                                         node.setAttribute("style","border:3px solid #FFFFFF;width:100%;");
 136                                                         node.setAttribute("id",data['items'][i]['id']+"_test");
 137                                                         var nodetitle = dojo.doc.createElement("h5");
 138                                                         var node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);
 139                                                         var node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);
 140                                                         nodetitle.appendChild(node_str);
 141                                                         node.appendChild(nodetitle);
 142                                                         node.appendChild(node_str_desc);
 143                                                         baseForm.appendChild(node);
 144                                                         var h=node.clientHeight;
 145                                                         console.log(h);
 146                                                         baseForm.removeChild(node);
 147                                                         node = dojo.doc.createElement("div");
 148                                                         node.setAttribute("style","border:3px solid #CCC;width:100%;height:"+h*maxsize/thisMaxheight+"");
 149                                                         node.setAttribute("id",data['items'][i]['id']);
 150                                                         nodetitle = dojo.doc.createElement("h5");
 151                                                         node_str = dojo.doc.createTextNode(data['items'][i]['min']+" : "+data['items'][i]['title']);
 152                                                         node_str_desc = dojo.doc.createTextNode(data['items'][i]['desc']);
 153                                                         nodetitle.appendChild(node_str);
 154                                                         node.appendChild(nodetitle);
 155                                                         node.appendChild(node_str_desc);
 156                                                         baseForm.appendChild(node);
 157                                                 };
 158                                         },
 159                                         error: function(error,args) {
 160                                           console.warn("error!",error);
 161                                         }
 162                                 });
 163                         }
 164                         function showTimeTable(parentid,chlists,btime,etime,fontsize){
 165                                 var widthp=Math.floor(100/chlists.length);
 166                                 var every_width=20;
 167                                 var timetabelArray= new Array();
 168                                 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));
 169                                 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));
 170                                 bt.setSeconds(0);
 171                                 if (bt.getMinutes()>30){
 172                                         bt.setMinutes(30);
 173                                 }else{
 174                                         bt.setMinutes(0);
 175                                 }
 176                                 et.setSeconds(0);
 177                                 if (et.getMinutes()>30){
 178                                         et.setMinutes(30);
 179                                         et=dojo.date.add(et, "minute", 30);
 180                                 }else{
 181                                         et.setMinutes(30);
 182                                 }
 183                                 var dt=dojo.date.difference(bt,et,"minute");
 184                                 var nbt=bt;
 185                                 var i=0;
 186                                 while(dt>i){
 187                                         console.dir([dt,i]);
 188                                         net=dojo.date.add(nbt,"minute",30);
 189                                         var theight=calcMaxHeight("timetable-id0",chlists,dt2DateTime(nbt),dt2DateTime(net),fontsize);
 190                                         console.log(theight)
 191                                         for (j=0;j<chlists.length;j++){
 192                                                 if (j>2){
 193                                                         j=chlists.length;
 194                                                 }else{
 195                                                         showTimeTableSingleCH("timetable-id"+j,chlists[j],nbt,net,fontsize,theight);
 196                                                 }
 197                                         }
 198                                         i=i+30;
 199                                         nbt=dojo.date.add(nbt,"minute",30);
 200                                 }
 201                         }
 202                         dojo.addOnLoad
 203                         (
 204                             function(){
 205                                         readCh();
 206                                 }
 207                         );
 208         </script>
 209     </head>
 210
 211     <body class=" claro ">
 212         <div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo">
 213             <div dojoType="dijit.layout.ContentPane" region="top" splitter="false">
 214                 Rec10Suite WEB Interface version 0.0.1
 215             </div>
 216             <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
 217             region="center" id="mainSplit">
 218                 <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;"
 219                 id="leftMainAccordion" region="leading" splitter="true">
 220                     <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">
 221                         <div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 100%;"
 222                                 id="leftProgramTabTE" region="leading" splitter="true">
 223                                                         <div dojoType="dijit.layout.BorderContainer" id="progTableTE" title="地上派" selected="true"></div>
 224                                                         <div dojoType="dijit.layout.BorderContainer" id="progTableBS" title="BS"></div>
 225                                                         <div dojoType="dijit.layout.BorderContainer" id="progTableCS" title="CS"></div>
 226                                                 </div>
 227                     </div>
 228                     <div dojoType="dijit.layout.ContentPane" title="予約">
 229                                                 <div dojoType="dijit.form.Button" id="simpleReserveButton" label="新規予約" onclick=changeTab("tab_newreserve")></div>
 230                     </div>
 231                     <div dojoType="dijit.layout.ContentPane" title="設定">
 232                     </div>
 233                     <div dojoType="dijit.layout.ContentPane" title="その他">
 234                     </div>
 235                 </div>
 236                 <div dojoType="dijit.layout.TabContainer" id="main_tab" region="center" tabStrip="true">
 237                     <div dojoType="dijit.layout.ContentPane" title="番組表" selected="true">
 238                         <div dojoType="dijit.layout.BorderContainer" id="timetableContainer" design="headline" style="width:100%;height:100%;" gutters="true">
 239                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-id0" region="left" style="width:30%"></div>
 240                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-id1" region="center"></div>
 241                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-id2" region="right" style="width:30%"></div>
 242                                                         <div dojoType="dijit.layout.ContentPane" id="timetable-button" region="bottom" style="height:4%;position:relative;">
 243                                                                 <div dojoType="dijit.form.Button" style="position:absolute;left:0.5em;" onClick=showTimeTable()><<前</div>
 244                                                                 <div dojoType="dijit.form.Button" style="position:absolute;right:0.5em;" onClick=showTimeTable()>次>></div>
 245                                                                 <div dojoType="dijit.form.Button" style="position:absolute;left:40%;" onClick=showTimeTable()>06h</div>
 246                                                                 <div dojoType="dijit.form.Button" style="position:absolute;left:48.5%;" onClick=showTimeTable()>12h</div>
 247                                                                 <div dojoType="dijit.form.Button" style="position:absolute;right:40%;" onClick=showTimeTable()>24h</div>
 248                                                                 <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>
 249                                                         </div>
 250                                                 </div>
 251                         </div>
 252                     <div dojoType="dijit.layout.ContentPane" title="番組検索">
 253                         Lorem ipsum and all around - second...
 254                     </div>
 255                     <div dojoType="dijit.layout.ContentPane" id="tab_newreserve" title="新規予約">
 256                                 <h2>新規予約</h2><br>
 257                                                         <p>
 258                                                         <div dojoType="dojo.data.ItemFileReadStore" jsId="chlistStore"
 259                                                 url="chlist.json"></div>
 260                                                         <div dojoType="dojo.data.ItemFileReadStore" jsId="dbtypeStore"
 261                                                 url="typelist.json" ></div>
 262                                                                 <h3>タイトル:</h3>
 263                                                                 <div dojoType="dijit.form.TextBox" id="newreserve_title" style="width:30%"></div><br>
 264                                                         </p>
 265                                                         <p>
 266                                                                 <h3>詳細設定</h3>
 267                                                                 コマンド:
 268                                                                 <div dojoType="dijit.form.FilteringSelect" id="newreserve_dbtype_list"
 269                                                                         autoComplete="true" store="dbtypeStore" searchAttr= "label"
 270                                                                         onShow="setFilteringSelectValue('newreserve_dbtype_list')"></div>
 271                                                                 チャンネル:
 272                                                                 <div dojoType="dijit.form.FilteringSelect" id="newreserve_ch_list"
 273                                                                         autoComplete="true" store="chlistStore" searchAttr= "label"
 274                                                                         onShow="setFilteringSelectValue('newreserve_ch_list')"></div><br>
 275                                                                 <p>
 276                                                                         <h4>時刻設定</h4>
 277                                                                         開始時間:
 278                                                                         <div dojoType="dijit.form.DateTextBox" id="newreserve_bdata" constraints="{datePattern:'yyyy-MM-dd'}"></div>
 279                                                                         <div dojoType="dijit.form.TimeTextBox" id="newreserve_btime"></div><br>
 280                                                                         終了時間:
 281                                                                         <div dojoType="dijit.form.DateTextBox" id="newreserve_edata" constraints="{datePattern:'yyyy-MM-dd'}"></div>
 282                                                                         <div dojoType="dijit.form.TimeTextBox" id="newreserve_etime"></div><br><br>
 283                                                                         <p>
 284                                                                         隔日検索:
 285                                                                         <div dojoType="dijit.form.HorizontalSlider" id="newreserve_deladay"
 286                                                                         minimum="1" maximum="7" value="7" discreteValues="7"
 287                                                                          intermediateChanges="true" style="width:300px">
 288                                                                                 <ol dojoType="dijit.form.HorizontalRuleLabels">
 289                                                                                         <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
 290                                                                                         <li>6</li><li>7</li>
 291                                                                                 </ol>
 292                                                                          </div><br>
 293                                                                          時刻揺らぎ:
 294                                                                          <div dojoType="dijit.form.HorizontalSlider" id="newreserve_delatime"
 295                                                                         minimum="1" maximum="10" value="3" discreteValues="10"
 296                                                                          intermediateChanges="true" style="width:300px">
 297                                                                                 <ol dojoType="dijit.form.HorizontalRuleLabels">
 298                                                                                         <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
 299                                                                                         <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
 300                                                                                 </ol>
 301                                                                          </div>
 302                                                                          </p>
 303                                                                 </p>
 304                                                         </p>
 305                                                         <div dojoType="dijit.form.Button" onClick=showTimeTable("tab_newreserve",["tb1","tb2"],"2001-01-01T12:00:00","2001-01-01T13:15:00",5)></div>
 306                     </div>
 307                 </div>
 308             </div>
 309         </div>
 310     </body>
 311 </html>
 312