<li each={name, i in rangeTabs} class={select: opts.logRange.val === i} onclick={parent.rangeTabChange}>{name}</li>
</ul>
<div style="padding: 0.2em 0;">
-<input type="text" id="term_from" style="width: 7em">~<input type="text" id="term_to" style="width: 7em">
+<input type="text" id="term_from" style="width: 10em">~<input type="text" id="term_to" style="width: 10em">
</div>
</div>
opts.logRange.val = val === null ? 2 : +val;
this.init = function() {
- $('#term_from').datepicker({
- onClose: function() {
- if (opts.logRange.val === 4)
- opts.observable.trigger("logRangeChanged");
- }
- });
- $('#term_to').datepicker({
- onClose: function() {
- if (opts.logRange.val === 4)
- opts.observable.trigger("logRangeChanged");
- }
+ self.initPicker('#term_from', '#term_to', function() {
+ if (opts.logRange.val === 4)
+ opts.observable.trigger( "logRangeChanged");
});
};
<thead>
<tr></tr>
</thead>
+<tfoot>
+<tr></tr>
+</toot>
</table>
</div>
<script>
this.tables = [
-"<th>日付</th><th>海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>ドロップ艦種</th><th>ドロップ艦娘", // ドロップ
-"<th>日付</th><th style=\"min-width: 3.2em;\">海域</th><th>マス</th><th>ボス</th><th>ランク</th><th>艦隊行動</th><th>味方陣形</th><th>敵陣形</th><th style=\"min-width: 3.2em;\">敵艦隊</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>大破艦</ht><th style=\"min-width: 2.2em;\">敵艦1</th><th>敵艦1HP</th><th style=\"min-width: 2.2em;\">敵艦2</th><th>敵艦2HP</th><th style=\"min-width: 2.2em;\">敵艦3</th><th>敵艦3HP</th><th style=\"min-width: 2.2em;\">敵艦4</th><th>敵艦4HP</th><th style=\"min-width: 2.2em;\">敵艦5</th><th>敵艦5HP</th><th style=\"min-width: 2.2em;\">敵艦6</th><th>敵艦6HP</th><th>味方制空値</th><th>敵制空値</th><th>制空状態</th>", // 海戦
+"<th>æ\97¥ä»\98</th><th>æµ·å\9f\9f</th><th>ã\83\9eã\83\83ã\83\97</th><th>ã\83\9eã\82¹</th><th>ã\83\9cã\82¹</th><th>ã\83©ã\83³ã\82¯</th><th>ã\83\89ã\83ã\83\83ã\83\97è\89¦ç¨®</th><th>ã\83\89ã\83ã\83\83ã\83\97è\89¦å¨\98", // ã\83\89ã\83ã\83\83ã\83\97
+"<th>æ\97¥ä»\98</th><th style=\"min-width: 3.2em;\">æµ·å\9f\9f</th><th>ã\83\9eã\83\83ã\83\97</th><th>ã\83\9eã\82¹</th><th>ã\83\9cã\82¹</th><th>ã\83©ã\83³ã\82¯</th><th>è\89¦é\9a\8aè¡\8cå\8b\95</th><th>å\91³æ\96¹é\99£å½¢</th><th>æ\95µé\99£å½¢</th><th style=\"min-width: 3.2em;\">æ\95µè\89¦é\9a\8a</th><th>å\91³æ\96¹è\89¦1</th><th>å\91³æ\96¹è\89¦1HP</th><th>å\91³æ\96¹è\89¦2</th><th>å\91³æ\96¹è\89¦2HP</th><th>å\91³æ\96¹è\89¦3</th><th>å\91³æ\96¹è\89¦3HP</th><th>å\91³æ\96¹è\89¦4</th><th>å\91³æ\96¹è\89¦4HP</th><th>å\91³æ\96¹è\89¦5</th><th>å\91³æ\96¹è\89¦5HP</th><th>å\91³æ\96¹è\89¦6</th><th>å\91³æ\96¹è\89¦6HP</th><th>å¤§ç ´è\89¦</ht><th style=\"min-width: 2.2em;\">æ\95µè\89¦1</th><th>æ\95µè\89¦1HP</th><th style=\"min-width: 2.2em;\">æ\95µè\89¦2</th><th>æ\95µè\89¦2HP</th><th style=\"min-width: 2.2em;\">æ\95µè\89¦3</th><th>æ\95µè\89¦3HP</th><th style=\"min-width: 2.2em;\">æ\95µè\89¦4</th><th>æ\95µè\89¦4HP</th><th style=\"min-width: 2.2em;\">æ\95µè\89¦5</th><th>æ\95µè\89¦5HP</th><th style=\"min-width: 2.2em;\">æ\95µè\89¦6</th><th>æ\95µè\89¦6HP</th><th>å\91³æ\96¹å\88¶ç©ºå\80¤</th><th>æ\95µå\88¶ç©ºå\80¤</th><th>å\88¶ç©ºç\8a¶æ\85\8b</th>", // æµ·æ\88¦
"<th>日付</th><th>結果</th><th>遠征</th><th>燃料</th><th>弾薬</th><th>鋼材</th><th>ボーキ</th><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>", // 開発
"<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>", // 建造
];
this.on("mount", function() {
- var records = this.root.querySelectorAll("tr");
- for (var i = 0; i < records.length; i++)
- records[i].innerHTML = this.tables[i];
this.init();
});
this.init = function() {
for (var t = 0; t < this.tables.length; t++) {
- var opts = {
- destroy: true,
- deferRender: true,
- stateSave: true,
- order: [[0, "desc"]],
- pageLength: 50,
- lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
- drawCallback: function() {
- $('#loading').hide();
- }
- };
- if (t === 0) {
- opts.columns = [{ data: 0 }, { data: 1 }, { data: 2 }, { data: 3 }, { data: 4 }, { data: 9 }, { data: 10 }];
- } else if (t === 1) {
- var entries = [];
- for (var i = 0; i < 39; i++) {
- if (i === 9 || i === 10)
- continue;
- entries.push({ data: i });
- }
- opts.columns = entries;
+ var table = $('#log' + t);
+ self.setHeaderAndFooter(table, self.tables[t]);
+ var dTable = table.DataTable(self.tableOptions(t));
+ self.searchSetup(dTable);
+ }
+};
+
+this.tableOptions = function(tableId) {
+ var opts = {
+ destroy: true,
+ deferRender: true,
+ stateSave: true,
+ order: [[0, "desc"]],
+ pageLength: 50,
+ lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
+ drawCallback: function() {
+ $('#loading').hide();
}
- $('#log' + t).dataTable(opts);
+ };
+ if (tableId === 0) {
+ opts.columns = self.dropColumns();
+ } else if (tableId === 1) {
+ opts.columns = self.sortieColumns();
+ }
+ return opts;
+};
+
+this.dropColumns = function() {
+ return [{data: 0}, {data: 1}, {data: 39}, {data: 2}, {data: 3}, {data: 4}, {data: 9}, {data: 10}];
+};
+
+this.sortieColumns = function() {
+ var entries = [];
+ for (var i = 0; i < 38; i++) {
+ if (i === 2)
+ entries.push({data: 39});
+ if (i === 9 || i === 10)
+ continue;
+ if (i === 23)
+ entries.push({data: 38});
+ entries.push({data: i});
}
+ return entries;
+};
+
+this.setHeaderAndFooter = function(table, header) {
+ table.find("thead tr").first().html(header);
+ var footer = table.find("tfoot tr");
+ table.find("th").each(function(index) {
+ footer.append(
+ '<th><input type="search" placeholder="Search ' + $(this).text() + '"/></th>');
+ });
+};
+
+this.searchSetup = function(dTable) {
+ self.setupCellSearch(dTable);
+};
+
+this.setupCellSearch = function(dTable) {
+ dTable.columns().every(function() {
+ var that = this;
+ that.search(""); // reset
+ $('input', this.footer()).on("input search", function() {
+ that.search(this.value, true, false).draw();
+ });
+ });
};
this.show = function() {
query += from.valueOf();
break;
case 1:
- from = now.clone().startOf('week').hours(5);
- if (now.hour() < 5 && now.days() === 1)
+ from = now.clone().day(1).startOf('day').hours(5);
+ if (now.day() === 0 || now.day() === 1 && now.hour() < 5)
from.subtract(1, 'weeks');
query += from.valueOf();
break;
case 2:
if (now.hours() >= 22 &&
- now.dates() === now.clone().endOf('month').date()) {
- from = now.clone().hours(22);
+ now.date() === now.clone().endOf('month').date()) {
+ from = now.clone().startOf('day').hours(22);
} else {
from = now.clone().startOf('month').subtract(1, 'days').hours(22);
}
query = "";
break;
case 4:
- from = $('#term_from').datepicker("getDate");
- var to = $('#term_to').datepicker("getDate");
+ from = $('#term_from').datetimepicker("getValue");
+ var to = $('#term_to').datetimepicker("getValue");
if (from === null)
return;
- from = moment(from);
- if (from.date() === 1)
- from.subtract(2, 'hours');
query += from.valueOf();
- if (to !== null) {
- to = moment(to);
- if (to.date() === to.clone().endOf('month').date()) {
- to.hour(22);
- } else {
- to.add(1, 'days').hours(5);
- }
+ if (to !== null)
query += "&to=" + to.valueOf();
- }
break;
}
$('#loading').show();
<li each={name, i in diffChartRanges} class={select: chartSpec.diffRange === i} onclick={parent.rangeTabChange}>{name}</li>
</ul>
<div style="padding: 0.2em 0;">
-<input type="text" id="chart_from" style="width: 7em">~<input type="text" id="chart_to" style="width: 7em">
+<input type="text" id="chart_from" style="width: 10em">~<input type="text" id="chart_to" style="width: 10em">
<label><input type="checkbox" id="tooltip" value="" style="margin-left: 2em;" onchange={tooltipChange} checked={opts.chartSpec.tooltip === 1}>ツールチップ</label>
</div>
</div>
opts.chartSpec.type === 1 && opts.chartSpec.diffRange === 4;
};
+var self = this;
+
this.init = function() {
- $('#chart_from').datepicker({
- onClose: function() {
- if (self.useDatePicker())
- opts.observable.trigger("chartSpecChanged");
- }
- });
- $('#chart_to').datepicker({
- onClose: function() {
- if (self.useDatePicker())
- opts.observable.trigger("chartSpecChanged");
- }
+ self.initPicker('#chart_from', '#chart_to', function() {
+ if (self.useDatePicker())
+ opts.observable.trigger("chartSpecChanged");
});
};
this.mainTab = 0;
-var self = this;
this.on("mount", self.init);
case 4:
break;
case 5:
- var fromDate = $('#chart_from').datepicker("getDate");
- var toDate = $('#chart_to').datepicker("getDate");
+ var fromDate = $('#chart_from').datetimepicker("getValue");
+ var toDate = $('#chart_to').datetimepicker("getValue");
if (fromDate === null || toDate === null)
return {first: 0, last:0};
- first = fromDate.valueOf() + 3600 * 5000;
- last = toDate.valueOf() + this.oneDay + 3600 * 5000;
+ first = fromDate.valueOf();
+ last = toDate.valueOf();
break;
}
return {first: first, last: last};
case 3:
break;
case 4:
- var fromDate = $('#chart_from').datepicker("getDate");
- var toDate = $('#chart_to').datepicker("getDate");
+ var fromDate = $('#chart_from').datetimepicker("getValue");
+ var toDate = $('#chart_to').datetimepicker("getValue");
if (fromDate === null || toDate === null)
return {first: 0, last: 0};
- var from = fromDate.valueOf() + 3600 * 5000;
- var to = toDate.valueOf() + this.oneDay + 3600 * 5000;
- first = Math.max(first, from);
- last = Math.min(last, to);
+ first = Math.max(first, fromDate.valueOf());
+ last = Math.min(last, toDate.valueOf());
break;
}
return {first: first, last: last};
</ul>
<div style="padding: 0.2em 0;">
-<input type="text" id="sortie_stat_from" style="width: 7em">~<input type="text" id="sortie_stat_to" style="width: 7em">
+<input type="text" id="sortie_stat_from" style="width: 10em">~<input type="text" id="sortie_stat_to" style="width: 10em">
</div>
<div style="clear: both;" show={type === "recent"}>
<h3>今日</h3>
<table id="sortie_stat_day">
-<thead>
-<tr></tr>
-</thead>
</table>
<h3>今週</h3>
<table id="sortie_stat_week">
-<thead>
-<tr></tr>
</table>
<h3>今月</h3>
<table id="sortie_stat_month">
-<thead>
-<tr></tr>
</table>
</div>
-<div id="sortie_stat_all_table" show={type === "range"}>
-<table id="sortie_stat_all">
-<thead>
-<tr><th>マップ</th><th>出撃</th><th>S</th><th>A</th><th>B</th><th>C</th><th>D以下</th><th>輸送船</th></tr>
-</thead>
+<div show={type === "range"}>
+<table id="sortie_stat_all" style="width: 100%;">
</table>
</div>
});
this.init = function() {
- this.initDatePicker();
-};
-
-this.initDatePicker = function() {
- $('#sortie_stat_from').datepicker({
- onClose: function() { if (self.type === "range") self.show(); }
- });
- $('#sortie_stat_to').datepicker({
- onClose: function() { if (self.type === "range") self.show(); }
+ self.initPicker('#sortie_stat_from', '#sortie_stat_to', function() {
+ if (self.type === "range")
+ self.show();
});
};
from = moment().subtract(1, 'months').subtract(1, 'day').valueOf();
to = new Date().valueOf();
} else {
- var fromDate = $('#sortie_stat_from').datepicker("getDate");
- var toDate = $('#sortie_stat_to').datepicker("getDate");
+ var fromDate = $('#sortie_stat_from').datetimepicker("getValue");
+ var toDate = $('#sortie_stat_to').datetimepicker("getValue");
if (fromDate === null || toDate === null) {
this.show([]);
return;
}
- from = moment(fromDate);
- if (from.date() === 1)
- from.subtract(2, 'hours');
- from = from.valueOf();
- to = moment(toDate);
- if (to.date() === to.clone().endOf('month').date()) {
- to.hour(22);
- } else {
- to.endOf('day');
- }
- to = to.valueOf();
+ from = fromDate.valueOf();
+ to = toDate.valueOf();
}
$.ajax({
url: "./海戦・ドロップ報告書.json?from=" + from + "&to=" + to,
var isBoss = row[3].indexOf("ボス") !== -1;
var isStart = row[3].indexOf("出撃") !== -1;
var resR = 0;
- for (var j = 23; j < row.length; j++) {
+ for (var j = 22; j < row.length; j++) {
if (/^輸送/.test(row[j]) && /^0\x2f/.test(row[j + 1]))
resR++;
}
- var item = /\+(.*)/.exec(row[10]);
- if (item)
- item = item[1];
+ var item = /アイテム/.test(row[9]) ? /[^+]+$/.exec(row[10])[0] : null;
var res = row[4];
if (res === "E")
res = "D";
});
};
-this.setupTable = function(r) {
+this.setupColumns = function(r) {
for (var term in r) {
- var header = ["マップ",
- "出撃",
- "S",
- "A",
- "B",
- "C",
- "D以下",
- "輸送船"];
- var columns = [{ data: "map" },
- { data: "start" },
- { data: "S" },
- { data: "A" },
- { data: "B" },
- { data: "C" },
- { data: "D" },
- { data: "R" }];
- if (term === "monthly") {
- header.pop();
+ var columns = [{ data: "map", title: "マップ" },
+ { data: "start", title: "出撃" },
+ { data: "S", title: "S" },
+ { data: "A", title: "A" },
+ { data: "B", title: "B" },
+ { data: "C", title: "C" },
+ { data: "D", title: "D" },
+ { data: "R", title: "輸送船" }];
+ if (term === "month")
columns.pop();
+ var items = [];
+ for (var col in r[term].stat["合計"]) {
+ if (this.isItemColumn(col))
+ items.push(col);
}
- var items = Object.keys(r[term].stat["合計"]).filter(this.isItemColumn);
this.sortItemOrder(items);
items.forEach(function(item) {
- header.push(item);
- columns.push({data: item});
+ columns.push({data: item, title: item});
});
- $("#sortie_stat_" + term + " tr").html(
- header.reduce(function(acc, cur) {
- return acc + "<td>" + cur + "</td>";
- }, ""));
r[term].columns = columns;
}
};
return;
}
var r = this.gatherData(data);
- this.setupTable(r);
+ this.setupColumns(r);
this.fillupItemRecords(r);
this.reorderRows(r);
for (var term in r) {
- if (!r.hasOwnProperty(term))
- continue;
var table = $("#sortie_stat_" + term);
- table.DataTable().destroy();
+ if ($.fn.dataTable.isDataTable(table))
+ table.DataTable().destroy();
+ table.html("<thead><tr>" +
+ r[term].columns.reduce(function(acc, cur) {
+ return acc + "<th>" + cur.title + "</th>";
+ }, "") + "</tr></thead>");
table.DataTable({
paging: false,
searching: false,
ordering: false,
- columns: r[term].columns
- }).rows.add(r[term].table).draw();
+ columns: r[term].columns,
+ data: r[term].table
+ });
}
$('#loading').hide();
};