<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<title>CS/AM logon record checker β</title>
<link rel="stylesheet" href="./lib/themes/sitelocal.css">
<link rel="stylesheet" href="./lib/themes/default.css">
<link rel="stylesheet" href="./lib/themes/default.date.css">
<link rel="stylesheet" href="./lib/themes/hexdots.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton">
<body>
<header>CS/AM LOGON checker  <span class="releaf">(β)</span></header>
<section class="section">
<form>
<fieldset>
<label for="input_01">DATE:</label>
<input
id="input_01"
class="datepicker"
name="date"
type="text"
required
pattern="[0-9]{4}/[0-9]{2}/[0-9]{2}.*"
onchange="timechanged()">  
<span class="btn" onclick="timechanged();">reload</span>
</fieldset>
</form>
<form>
<fieldset>
<label for="input_from">From:</label>
<input
id="input_from"
type="time"
name="from" placeholder="--:--"
required
pattern="[0-9]{4}:[0-9]{2}.*"
onchange="timechanged()">
<label for="input_to">To:</label>
<input
id="input_to"
type="time"
class="invalid"
name="to" placeholder="--:--"
required
pattern="[0-9]{4}:[0-9]{2}.*"
onchange="timechanged()"/>
| <label> 時間割単位:</label>
<select onchange="changed()" id="sel" class="sel_indicate">
<option value="0">--------</option>
<option value="12">1・2限目(09:00-12:50)</option>
<option value="1">1限目(9:00-10:40)</option>
<option value="2">2限目(11:10-12:50)</option>
<option value="3">3限目(13:30-15:10)</option>
<option value="4">4限目(15:20-17:00)</option>
<option value="5">5限目(17:05-18:45)</option>
<option value="99">深夜(18:45-23:59)</option>
<option value="-1">早朝(0:00-8:30)</option>
</select>
</fieldset>
</form>
<form>
<fieldset id="roomcheck">
<input type="checkbox" id="GRL" onchange="filter()"/>
<label for="GRL" class="checkbox">GRL</label>
<input type="checkbox" id="ML1" onchange="filter()"/>
<label for="ML1" class="checkbox">ML1</label>
<input type="checkbox" id="ML2" onchange="filter()"/>
<label for="ML2" class="checkbox">ML2</label>
<span class="box">
<input type="checkbox" id="IML" onchange="HSJ_sub(); filter()"/>
<label for="IML" class="checkbox">IML</label>
<span class="bbox">
<input type="checkbox" id="IML-A" onchange="HSJ_mini_sub(); filter()"/>
<label for="IML-A" class="checkbox mini">IML-A</label>
<input type="checkbox" id="IML-B" onchange="HSJ_mini_sub(); filter()"/>
<label for="IML-B" class="checkbox mini">IML-B</label>
</span>
</span>
</fieldset>
</form>
<form>
<fieldset>
<input checked type="checkbox" id="uniq" onchange="filter()"/>
<label for="uniq" class="checkbox">重複カット</label>
<input type="button" id="excel" value="Excelファイルで出力" disabled onclick="getexcel()"/>
</fieldset>
</form>
<div id="output">
<table>
<tbody>
<tr>
<th>
<input type='radio' class='radio'
onclick='clicked()' id='date' name='sort' value='日時'>
<label class='radio' for='date'> 日時 </label>
</th>
<th>
<input type='radio' class='radio'
onclick='clicked()' id='no' name='sort' value='学生番号' checked>
<label class='radio' for='no'> 学生番号</label>
</th>
<th>
<input type='radio' class='radio'
onclick='clicked()' id='namename' name='sort' value='名前'>
<label class='radio' for='namename'> 名前 </label>
</th>
<th>
<input type='radio' class='radio'
onclick='clicked()' id='reading' name='sort' value='ヨミガナ'>
<label class='radio' for='reading'> ヨミガナ </label>
</th>
<th>
<input type='radio' class='radio'
onclick='clicked()' id='host' name='sort' value='ホスト名'>
<label class='radio' for='host'>ホスト名</label>
</th>
<th>
<input type='radio' class='radio'
onclick='clicked()' id='dep' name='sort' value='所属'>
<label class='radio' for='dep'> 所属 </label>
</th>
</tr>
</tbody>
</table>
</div>
<div id="num_display">
学生: <div class="num_element"></div> 名<br>
スタッフ: <div class="num_element"></div> 名
</div>
<div id="container"></div>
</section>
<div class="waitboard">
<div class="waititem">
<center>
Loading...<br><br>
<span class="hexdots-loader">
Loading...
</span>
</center>
</div>
</div>
<footer>
<h3>
School of Technology,
Kwansei Gakuin University</h3>
<h3>Experiment-Prep Room</h3>
<h3>comp-staff(at)ml.kwansei.ac.jp</h3>
<h4>©️2021</h4>
</footer>
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/picker.js"></script>
<script src="./lib/picker.date.js"></script>
<script src="./lib/legacy.js"></script>
<script src="./lib/translations/ja_JP.js"></script>
<script type="text/javascript">
window.onload = function () {
var agent = window.navigator.userAgent.toLowerCase();
if (agent.indexOf('msie')>0 || agent.indexOf('trident')>0) {
alert("Internet Explorer には対応していません");
}
var datepick = document.querySelector("#input_01");
if (datepick.value == "") {
today = new Date(Date.now());
today_str = today.getFullYear() + "/" + ("0"+(today.getMonth() + 1)).slice(-2,3) + "/" + ("0"+today.getDate()).slice(-2,3);
datepick.value = today_str;
}
timechanged();
filter();
};
var direction = 1;
var db = null;
var $input = $( '.datepicker' ).pickadate({
format: "yyyy/mm/dd",
formatSubmit: 'yyyy/mm/dd(ddd)',
// min: [2015, 7, 14],
container: '#container',
//editable: true,
//constrainInput: false,
closeOnSelect: true,
closeOnClear: true,
});
//var datepicker = $input.pickadate('picker');
function changed() {
var sel = $("#sel").val();
var from = $("#input_from")[0];
var to = $("#input_to")[0];
if (sel == 1) { from.value= "09:00"; to.value= "10:40"; timechanged();
} else if (sel == 2) { from.value= "11:10"; to.value= "12:50"; timechanged();
} else if (sel == 12) { from.value= "09:00"; to.value= "12:50"; timechanged();
} else if (sel == 3) { from.value= "13:30"; to.value= "15:10"; timechanged();
} else if (sel == 4) { from.value = "15:20"; to.value = "17:00"; timechanged();
} else if (sel == 5) { from.value = "17:05"; to.value = "18:45"; timechanged();
} else if (sel ==99) { from.value = "18:45"; to.value = "23:59"; timechanged();
} else { from.value = "00:00"; to.value = "09:00"; timechanged(); }
}
var sortkey_prev = null;
function timechanged() {
sortkey_prev = null;
var date = $("#input_01").val();
var from = $("#input_from").val().substr(0,5);
var to = $("#input_to").val().substr(0,5);
var date_valid, from_valid, to_valid;
if (date.match(/[0-9]{4}\/[0-9]{2}\/[0-9]{2}/)) {
$("#input_01").removeClass("invalid");
date_valid = true;
} else {
$("#input_01").addClass("invalid");
date_valid = false;
}
if (from.match(/[0-9]{2}:[0-9]{2}.*/)) {
$("#input_from").removeClass("invalid");
from_valid = true;
} else {
$("#input_from").addClass("invalid");
from_valid = false;
}
if ( to.match(/[0-9]{2}:[0-9]{2}.*/)) {
$("#input_to").removeClass("invalid");
to_valid = true;
} else {
$("#input_to").addClass("invalid");
to_valid = false;
}
if (!from_valid || !to_valid) {
var sel = $("#sel");
sel.addClass("sel_indicate");
sel.val(0);
} else {
$("#sel").removeClass("sel_indicate");
}
if (date_valid && from_valid && to_valid) {
$(".waitboard").css("display", "block");
$.post("./call.cgi", {date: date.substr(0,10), from: from,
to: to}, function(data) {
db = data;
clicked();
filter();
$(".waitboard").css("display", "none");
$("#excel").prop("disabled", false);
});
}
}
function check(i) { return function (a,b) {
if (a[i] > b[i]) return 1*direction;
if (a[i] < b[i]) return -1*direction;
return 0;
};
}
function clicked() {
s = $("input[name=sort]:checked").val();
if (sortkey_prev == s) {
direction = - direction;
}
sortkey_prev = s;
if (s == "日時") {
db = db.sort(check(1));
} else if(s == "学生番号") {
db = db.sort(check(5));
}else if (s == "名前") {
db = db.sort(check(6));
}else if (s == "ヨミガナ") {
db = db.sort(check(7));
}else if (s == "ホスト名") {
db = db.sort(check(0));
}else if (s == "所属") {
db = db.sort(check(8));
} else return;
filter();
}
function filter() {
var checkbox = {};
["GRL", "ML1", "ML2", "IML-A", "IML-B", "uniq"].forEach(
function (s) {checkbox[s]=$("#"+s)[0].checked; });
var flag = false;
["GRL", "ML1", "ML2", "IML-A", "IML-B"].forEach(
function (s) {flag |= checkbox[s]; });
if (flag) {
$("#roomcheck").removeClass("invalid");
} else {
$("#roomcheck").addClass("invalid");
}
var table = $("#output table");
$("#output table tbody tr:nth-child(n+2)").remove();
var prev = null;
var n_student = 0, n_staff = 0;
db.forEach(function (s) {
var host = s[0];
if (host == null) {return;}
var accept = false;
if (host.startsWith("GRL") && checkbox["GRL"]) {
accept = true;
} else if (host.startsWith("ML1") && checkbox["ML1"]) {
accept = true;
} else if (host.startsWith("ML2") && checkbox["ML2"]) {
accept = true;
} else if (host.startsWith("IML")) {
var no = host.substr(4);
var candidate = ["01","02","03","04","05","06",
"11","12","13","14","15","16",
"21","22","23","24","25","26",
"31","32","33","34","35","36",
"41","42","43","44",
"51","52","53","54",
"K01","K03","61"];
var in_a = (candidate.indexOf(no)>= 0);
if (checkbox["IML-A"] && in_a) {
accept = true;
}
if (checkbox["IML-B"] && !in_a) {
accept = true;
}
}
if (accept) {
if(!checkbox["uniq"] || prev != s[4]) {
var tr = $("<tr></tr>").appendTo(table);
[1,5,6,7,0,8].forEach(function(i) {$("<td>"+s[i]+"</td>").appendTo(tr); });
if (s[9] === "01") {
n_student += 1;
} else {
n_staff += 1;
}
}
prev = s[4];
}
});
var l = table[0].rows.length-1;
table.appendTo("#output");
if (l > 0) {
$(".num_element")[0].innerText = n_student;
$(".num_element")[1].innerText = n_staff;
$("#num_display")[0].style.display = "block";
} else {
$("#num_display")[0].style.display = "none";
}
}
function HSJ_sub() {
var checked = $("#IML")[0].checked;
$("#IML-A")[0].checked = checked;
$("#IML-B")[0].checked = checked;
}
function HSJ_mini_sub() {
var checked_a = $("#IML-A")[0].checked;
var checked_b = $("#IML-B")[0].checked;
if (checked_a || checked_b){
$("#IML")[0].checked = true;
} else {
$("#IML")[0].checked = false;
}
}
function getexcel() {
var date = "date="+$("#input_01").val().substr(0,10);
var from = "from="+$("#input_from").val();
var to = "to="+$("#input_to").val();
var query = [date, from, to];
["GRL", "ML1", "ML2", "IML", "IML-A", "IML-B", "uniq"].forEach(
function (s) {if($("#"+s).prop("checked")) {query.unshift(s+"=true");}});
query = query.join('&');
window.location.href = "https://cs.kwansei.ac.jp/junbi/attend/call.cgi?"+query+"&excel=true";
}
</script>
</body>
