LogViewer/index.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3 <head>
   4 <meta charset="utf-8">
   5 <title>各種報告書 - KancolleSniffer</title>
   6
   7 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   8 <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
   9 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css">
  10 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  11 <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
  12 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
  13 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
  14 <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  15 <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  16 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ja.min.js"></script>
  17 <style>
  18 body {
  19     font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  20     line-height: 1.5;
  21     font-size: 14px;
  22 }
  23 .tab {overflow: hidden; list-style-type: none; margin: 0em 2em 2em 1em; padding: 0em;}
  24 .tab li {background: #eee; padding: 0.3em 2.0em; float: left; margin-right: 2px;}
  25 .tab li.select {background: #ccc;}
  26 .contents {list-style-type: none; margin: 0em; padding: 0em;}
  27 .hide {display: none;}
  28 </style>
  29
  30 </head>
  31 <body>
  32 <script>
  33 function showLog()
  34 {
  35     var query = "?from=" + moment().subtract(1, 'months').valueOf();
  36     if ($('input[name=term]:eq(1)').prop('checked')) {
  37         from = $('#term_from').datepicker("getDate");
  38         to = $('#term_to').datepicker("getDate");
  39         if (from != null)
  40             query = "?from=" + from.valueOf();
  41         if (to != null)
  42             query += "&to=" + (to.valueOf() + 3600 * 24 * 1000);
  43     }
  44     var jsons = [
  45         "海戦・ドロップ報告書.json",
  46         "海戦・ドロップ報告書.json",
  47         "遠征報告書.json",
  48         "開発報告書.json",
  49         "建造報告書.json",
  50         "資材ログ.json"
  51     ];
  52     var url = jsons[selectedTable] + query;
  53     $('#log' + selectedTable).DataTable().ajax.url(url).load();
  54 }
  55
  56 function initTables()
  57 {
  58     for (var t = 0; t < 6; t++) {
  59         var opts = {
  60             destroy: true,
  61             deferRender: true,
  62             stateSave: true,
  63             order: [[0, "desc"]],
  64             pageLength: 50,
  65             lengthMenu: [[50, 100, 200, -1],[50, 100, 200, "All"]]
  66         };
  67         if (t == 0) {
  68             opts.columns = [{data: 0}, {data: 1}, {data: 2}, {data: 3}, {data: 4}, {data: 9}, {data: 10}];
  69         } else if (t == 1) {
  70             var entries = [];
  71             for (i = 0; i < 35; i++) {
  72                 if (i == 9 || i == 10)
  73                     continue;
  74                 entries.push({data: i})
  75             }
  76             opts.columns = entries;
  77         }
  78         $('#log' + t).dataTable(opts);
  79     }
  80 }
  81
  82 const timeFormat = "YYYY-MM-DD HH:mm:ss";
  83 function parseDate(d)
  84 {
  85     return moment(d, timeFormat);
  86 }
  87
  88 function toString(d)
  89 {
  90     return d.format(timeFormat);
  91 }
  92
  93 function pickChartData(data, range)
  94 {
  95     var newdata = [];
  96     var ticks = [];
  97     var grid = [];
  98     var last = moment(data[data.length - 1][0]).valueOf();
  99     var first, interval, tickInterval;
 100     const oneDay = 3600 * 24 * 1000;
 101     switch (range) {
 102     case 0:
 103         first = moment(last).subtract(24, 'hours').valueOf();
 104         interval = 1000;
 105         tickInterval = 3600 * 1000;
 106         last -= last % tickInterval;
 107         break;
 108     case 1:
 109         first = moment(last).subtract(7, 'days').valueOf();
 110         interval = 1000;
 111         tickInterval = oneDay;
 112         last -= last % tickInterval + 3600 * 4000;
 113         break;
 114     case 2:
 115         first = moment(last).subtract(1, 'months').valueOf();
 116         last = moment(last).day(1).valueOf();
 117         interval = 3600 * 2000;
 118         tickInterval = oneDay * 7;
 119         last -= last % oneDay + 3600 * 4000;
 120         break;
 121     case 3:
 122         first = moment(data[0][0]).valueOf();
 123         last = moment(last).day(1).valueOf();
 124         interval = 3600 * 6000;
 125         tickInterval = oneDay * 7;
 126         last -= last % oneDay + 3600 * 4000;
 127         break;
 128     }
 129     for (var tick = last; tick > first; tick -= tickInterval)
 130     {
 131         var str = toString(moment(tick));
 132         ticks.unshift(str);
 133         grid.unshift({value: str});
 134     }
 135     var last_data;
 136     for (var i = data.length - 1; i >= 0; i--) {
 137         var row = data[i];
 138         var date = parseDate(row[0]).valueOf();
 139         if (date > first) {
 140             var v = date - date % interval;
 141             if (last_data != v) {
 142                 newdata.unshift(row);
 143                 last_data = v;
 144             }
 145         } else {
 146             break;
 147         }
 148     }
 149     return { data: newdata, tick: ticks, grid: grid };
 150 }
 151
 152 var selectedTable = 0;
 153 var selectedRange = 0;
 154
 155 function drawChart(data)
 156 {
 157     if (data == null) {
 158         $.get("./資材ログ.json?time=" + Date.now(), function (data) { drawChart(data);}, "json");
 159         return;
 160     }
 161     picked = pickChartData(data.data, selectedRange);
 162     var header = ["日付","燃料","弾薬","鋼材","ボーキ","高速建造材","高速修復材","開発資材","改修資材"];
 163     picked.data.unshift(header);
 164     var chart = c3.generate({
 165         bindto: '#chart',
 166         size: {
 167             height: 400,
 168             width: 800
 169         },
 170         data: {
 171             x: '日付',
 172             xFormat: '%Y-%m-%d %X',
 173             rows: picked.data,
 174             axes: {
 175                 燃料: 'y',
 176                 弾薬: 'y',
 177                 鋼材: 'y',
 178                 ボーキ: 'y',
 179                 高速建造材: 'y2',
 180                 高速修復材: 'y2',
 181                 開発資材: 'y2',
 182                 改修資材: 'y2'
 183             }
 184         },
 185         point: {
 186             show: false
 187         },
 188         tooltip: {
 189             show: true
 190         },
 191         grid: {
 192             x: {
 193                 lines: picked.grid
 194             }
 195         },
 196         axis: {
 197             x: {
 198                 type: 'timeseries',
 199                 tick: {
 200                     rotate: 30,
 201                     format: function (x) { return moment(x).format("MM-DD HH:mm"); },
 202                     values: picked.tick
 203                 },
 204                 height: 60
 205             },
 206             y2: {
 207                 show: true
 208             }
 209         }
 210     });
 211 }
 212
 213 function selectTopTab(i)
 214 {
 215     if (i < 6) {
 216         selectedTable = i;
 217         showLog();
 218     } else if (i == 6) {
 219         drawChart();
 220     }
 221     if (i < 6)
 222         $('#term').show();
 223     else
 224         $('#term').hide();
 225     var tab = $('.tab0 li');
 226     tab.removeClass('select');
 227     tab.eq(i).addClass('select');
 228     $('.contents .hide').hide();
 229     $('.contents .hide').eq(i).show();
 230 }
 231
 232 $(function() {
 233     $.fn.dataTable.ext.errMode = 'throw';
 234     $('.tab0 li').click(function() {
 235         var tab = $('.tab0 li');
 236         var i = tab.index(this)
 237         selectTopTab(i);
 238         sessionStorage.setItem('prevTab', i);
 239     });
 240     $('.tab1 li').click(function() {
 241         var tab = $('.tab1 li');
 242         var i = tab.index(this);
 243         selectedRange = i;
 244         drawChart();
 245         tab.removeClass('select');
 246         tab.eq(i).addClass('select');
 247         sessionStorage.setItem('prevRange', i);
 248     });
 249     $('table').addClass('display compact cell-border');
 250     initTables();
 251     var range = sessionStorage.getItem('prevRange');
 252     selectedRange = range == null ? 0 : +range;
 253     $('.tab1 li').eq(range).addClass('select');
 254     $('#term_from').datepicker({
 255         defaultDate: moment().subtract(1, 'months').toDate()
 256     });
 257     $('#term_to').datepicker();
 258     $('#term_apply').click(showLog);
 259     var prev = sessionStorage.getItem('prevTab');
 260     selectTopTab(prev == null ? 0 : +prev);
 261 });
 262 </script>
 263
 264 <ul class="tab tab0">
 265 <li>ドロップ</li>
 266 <li>海戦</li>
 267 <li>遠征</li>
 268 <li>開発</li>
 269 <li>建造</li>
 270 <li>資材</li>
 271 <li>資材グラフ</li>
 272 </ul>
 273
 274 <form id="term">
 275 <p>
 276 <label><input type="radio" name="term" value="0" checked="checked">直近一か月</label>
 277 <label><input type="radio" name="term" value="1">指定の期間: </label>
 278 <input type="text" id="term_from" style="width: 8em">～<input type="text" id="term_to" style="width: 8em">
 279 <input type="button" id="term_apply" value="適用">
 280 </p>
 281 </form>
 282
 283 <ul class="contents">
 284 <li class="hide">
 285 <table id="log0" cellspacing="0" width="100%">
 286 <thead>
 287 <tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘</th></tr>
 288 </thead>
 289 </table>
 290
 291 <li class="hide">
 292 <table id="log1" cellspacing="0" width="100%">
 293 <thead>
 294 <tr><th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>艦隊行動</th><th>味方陣形</th><th>敵陣形</th><th>敵艦隊</th><th>味方艦1</th><th>味方艦1HP</th><th>味方艦2</th><th>味方艦2HP</th><th>味方艦3</th><th>味方艦3HP</th><th>味方艦4</th><th>味方艦4HP</th><th>味方艦5</th><th>味方艦5HP</th><th>味方艦6</th><th>味方艦6HP</th><th>敵艦1</th><th>敵艦1HP</th><th>敵艦2</th><th>敵艦2HP</th><th>敵艦3</th><th>敵艦3HP</th><th>敵艦4</th><th>敵艦4HP</th><th>敵艦5</th><th>敵艦5HP</th><th>敵艦6</th><th>敵艦6HP</th></tr>
 295 </thead>
 296 </table>
 297
 298 <li class="hide">
 299 <table id="log2" cellspacing="0" width="100%">
 300 <thead>
 301 <tr><th>日付</th><th>結果</th><th>遠征</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>高速修復材</th><th>高速建造材</th></tr>
 302 </thead>
 303 </table>
 304
 305 <li class="hide">
 306 <table id="log3" cellspacing="0" width="100%">
 307 <thead>
 308 <tr><th>日付</th><th>開発装備</th><th>種別</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>秘書艦</th><th>司令部Lv</th></tr>
 309 </thead>
 310 </table>
 311
 312 <li class="hide">
 313 <table id="log4" cellspacing="0" width="100%">
 314 <thead>
 315 <tr><th>日付</th><th>種類</th><th>名前</th><th>艦種</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>開発資材</th><th>空きドック</th><th>秘書艦</th><th>司令部Lv</th></tr>
 316 </thead>
 317 </table>
 318
 319 <li class="hide">
 320 <table id="log5" cellspacing="0" width="100%">
 321 <thead>
 322 <tr><th>日付</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><th>高速建造材</th><th>高速修復材</th><th>開発資材</th><th>改修資材</th></tr>
 323 </thead>
 324 </table>
 325
 326 <li class="hide">
 327 <ul class="tab tab1" style="float: left">
 328 <li>一日</li>
 329 <li>一週間</li>
 330 <li>一か月</li>
 331 <li>すべて</li>
 332 </ul>
 333 <div id="chart" style="clear: both; width: 800px; margin: 1em;"></div>
 334 </ul>
 335 </body>
 336 </html>