LogViewer/index.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3 <head>
   4 <meta charset="utf-8">
   5 <title>各種報告書 - KancolleSniffer</title>
   6 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   7 <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
   8 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css">
   9 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
  10 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
  11 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css">
  12 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
  13 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
  14 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
  15 <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.12.0/riot+compiler.min.js"></script>
  16 <style>
  17 body {
  18     font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  19     line-height: 1.5;
  20     font-size: 14px;
  21 }
  22 .tab {overflow: hidden; list-style-type: none; margin: 0 0 2em 1em; padding: 0;}
  23 .tab li {background: #eee; padding: 0.3em 1.5em; float: left; margin-right: 2px; cursor: pointer;}
  24 .tab li.select {background: #ccc;}
  25 .tabsub li {padding: 0.3em 1em;}
  26 .c3 .tick {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 12px;}
  27 .c3-legend-item {font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 14px;}
  28 #loading {
  29     width: 48px;
  30     height: 48px;
  31     display: none;
  32     position: fixed;
  33     top: 50%;
  34     left: 50%;
  35     margin-top: -24px;
  36     margin-left: -24px;
  37     z-index: 100;
  38 }
  39 </style>
  40 </head>
  41 <body>
  42 <div id="loading"><img src="https://kancollesniffer.osdn.jp/ajax-loader.gif" alt="読み込み中..."></div>
  43
  44 <script>
  45 /* global moment, riot */
  46
  47 var timeFormat = "YYYY-MM-DD HH:mm:ss";
  48 var mixin = {
  49     mainTabs: [
  50         "ドロップ",
  51         "海戦",
  52         "遠征",
  53         "開発",
  54         "建造",
  55         "改修",
  56         "資材",
  57         "資材グラフ",
  58         "戦果",
  59         "出撃統計"
  60     ],
  61     logTables: 7,
  62     oneDay: 3600 * 24 * 1000,
  63     parseDate: function(d) {
  64         return moment(d, timeFormat);
  65     },
  66     toDateString: function(d) {
  67         return d.format(timeFormat);
  68     },
  69     to5am: function(tick) {
  70         return tick - tick % (3600 * 24000) - 3600 * 4000;
  71     },
  72     pxPerEm: Number(getComputedStyle(document.body, null).fontSize.replace(/[^\d]/g, '')),
  73     chartSize: function() {
  74         return {
  75             height: Math.max($(window).height() - 15 * this.pxPerEm, 400),
  76             width: Math.max($(window).width() - 6 * this.pxPerEm, 800)
  77         };
  78     },
  79     initPicker: function(from, to, updatePicker) {
  80         [$(from), $(to)].forEach(function(input) {
  81             var prev, ignore;
  82             input.attr('autocomplete', 'off');
  83             input.datetimepicker({
  84                 onSelectDate: function() {
  85                     ignore = true;
  86                 }
  87             });
  88             input.change(function() {
  89                 if (ignore) {
  90                     ignore = false;
  91                     return;
  92                 }
  93                 var cur = input.val();
  94                 if (typeof cur !== 'string' || cur === prev)
  95                     return;
  96                 prev = cur;
  97                 input.datetimepicker({value: cur});
  98                 updatePicker(input);
  99             });
 100         });
 101     }
 102 };
 103
 104 $.datetimepicker.setLocale('ja');
 105 </script>
 106
 107 <main-tab></main-tab>
 108
 109 <log-term></log-term>
 110
 111 <log-tables></log-tables>
 112
 113 <chart-type></chart-type>
 114
 115 <chart-range></chart-range>
 116
 117 <sequential-chart></sequential-chart>
 118
 119 <differential-chart></differential-chart>
 120
 121 <material-chart></material-chart>
 122
 123 <achivement-table></achivement-table>
 124
 125 <sortie-stat></sortie-stat>
 126
 127 <script src="tags.tag" type="riot/tag"></script>
 128
 129 <script>
 130 var obs = riot.observable();
 131 var spec = new Object();
 132 var range = new Object();
 133 riot.mixin(mixin);
 134 riot.mount("dummy");
 135 riot.mount("log-term", {observable: obs, logRange: range});
 136 riot.mount("log-tables", {observable: obs, logRange: range});
 137 riot.mount("chart-type", {observable: obs, chartSpec: spec});
 138 riot.mount("chart-range", {observable: obs, chartSpec: spec});
 139 riot.mount("sequential-chart", {observable: obs, chartSpec: spec});
 140 riot.mount("differential-chart", {observable: obs, chartSpec: spec});
 141 riot.mount("material-chart", {observable: obs, chartSpec: spec});
 142 riot.mount("achivement-table", {observable: obs});
 143 riot.mount("sortie-stat", {observable: obs});
 144 riot.mount("main-tab", {observable: obs});
 145 </script>
 146 </body>
 147 </html>