Newer
Older
attend / index.html
<!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>IST/HSI 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">

<body>
<header>IST/HSI LOGON checker &emsp;<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"
                    placeholder="---- -- --"
                    autofocuss
                    onchange="timechanged()">
            </fieldset>
        </form>

        <form>
            <fieldset>
                <label for="input_from">From:</label>
                <input
                    id="input_from" 
                    type="time"
                    name="from" placeholder="--:--"
                    onchange="timechanged()">
                    
                    <!-- valuee="2:30 AM"
                    data-value="0:00" -->
                <label for="input_to">To:</label>
                <input
                    id="input_to"
                    type="time"
                    name="to" placeholder="--:--"
                    onchange="timechanged()"/>
                 | <label> 時間割単位:</label>
                <select onchange="changed()" id="sel">
                        <option value="0">--------</option>
                        <option value="12">1・2限目(09:00-12:40)</option>
                        <option value="1">1限目(9:00-10:30)</option>
                        <option value="2">2限目(11:10-12:40)</option>
                        <option value="3">3限目(13:30-15:00)</option>
                        <option value="4">4限目(14:10-16:40)</option>
                        <option value="5">5限目(16:50-18:20)</option>
                        <option value="99">深夜(18:00-23:59)</option>
                        <option value="-1">早朝(0:00-8:30)</option>
                </select>
            </fieldset>
        </form>
        <form>
            <fieldset>
                    <input checked 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>
                    <input type="checkbox" id="HSJ" onchange="filter()"/>
                    <label for="HSJ" class="checkbox">HSI</label>
            </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='dep' name='sort' value='所属'>
                                        <label class='radio' for='dep'> 所属 </label>
                                </th>
                        </tr>
                        </tbody>
                </table>
        </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 Science and Technology,
            Kwansei Gakuin University</h3>
        <h3>Experiment-Prep Room</h3>
        <h4>©️2018</h4>
    </footer>

    <script src="./lib/jquery.1.9.1.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">
        var direction = 1;
        var db = null;
        var $input = $( '.datepicker' ).pickadate({
            format: "yyyy/mm/dd (ddd)",
            formatSubmit: 'yyyy/mm/dd',
            // min: [2015, 7, 14],
            container: '#container',
            // editable: true,
            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:30"; timechanged();
                } else if (sel == 2) { from.value= "11:10";  to.value= "12:40"; timechanged();
                } else if (sel == 12) { from.value= "09:00";  to.value= "12:40"; timechanged();
                } else if (sel == 3) { from.value= "13:30";  to.value= "15:00"; timechanged();
                } else if (sel == 4) { from.value = "15:10";  to.value = "16:40"; timechanged();
                } else if (sel == 5) { from.value = "16:50";  to.value = "18:20"; timechanged();
                } else if (sel ==99) { from.value = "18:30";  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();
                var to = $("#input_to").val();
                if (date && from && to) {
                        $(".waitboard").css("display", "block");
                        $.post("../cgi-bin/attend/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(8));
                } else return;
                
                filter();
        }
        function filter() {
                var checkbox = {};
                ["GRL", "ML1", "ML2", "HSJ", "uniq"].forEach(
                        function (s) {checkbox[s]=$("#"+s)[0].checked; });
                var table = $("#output table");
                $("#output table tbody tr:nth-child(n+2)").remove();
                var prev = null;
                db.forEach(function (s) {
                        var host = s[0];
                        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("HSJ") && checkbox["HSJ"]) {
                                accept = true;
                        }
                        if (accept) {
                                        if(!checkbox["uniq"] || prev != s[4]) {
                                                var tr = $("<tr></tr>").appendTo(table);
                                                [1,5,6,7,8].forEach(function(i) {$("<td>"+s[i]+"</td>").appendTo(tr); });
                                        }
                                        prev = s[4];
                        }
                        table.appendTo("#output");
                });

        }
    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", "HSJ", "uniq"].forEach(
            function (s) {if($("#"+s).prop("checked")) {query.unshift(s+"=true");}});
        query = query.join('&');
        window.location.href = "/~tkuro/cgi-bin/attend/call.cgi?"+query+"&excel=true";
    }
    </script>
</body>