HostelAlloc/index.html at master · InstituteWebOps/HostelAlloc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<html>

<head>
    <title>Hostel Allocation</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .theadings {
            border-radius: 5px 5px 0 0;
        }

        .theadings div {
            padding: 10px;
            text-align: center;
        }

        .tbody {
            border-radius: 0 0 5px 5px;
            transition: 0.8s all linear;
            transition-delay: 1.3s;
        }

        .tbody div {
            padding: 10px;
            text-align: center;
        }

        .tbody:hover {
            transition: 0.3s all linear;
            background-color: rgba(128, 128, 128, 0.1);
        }

        #datatable,
        #errmsg {
            display: none;
        }

        .china {
            width: 30%;
            min-width: 400px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="bg-info">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header center-block text-center">
                <a class="navbar-brand center-block text-center" href="index.php">Hostel Room Allocation</a>
            </div>
            <ul class="nav navbar-nav navbar-right text-center">
                <li class="active"><a href="http://students.iitm.ac.in">Back To Students Portal</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <div class="col-sm-2 col-md-3 col-lg-4"></div>
        <form class="form-horizontal col-sm-8 col-md-6 col-lg-4" onsubmit="return false">
            <div class="form-group">
                <label for="rollno" class="control-label col-sm-4">Roll Number: </label>
                <div class="col-sm-1"></div>
                <div class="col-sm-7 input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input type="text" name="rollno" id="rollno" class="form-control" placeholder="eg: AE15B015" />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-1 col-md-2 col-lg-3"></div>
                <div class="col-sm-10 col-md-8 col-lg-6">
                    <button id="submitbtn" type="submit" class="btn btn-primary center-block btn-block btn-lg">Show Address</button>
                </div>
                <div class="col-sm-1 col-md-2 col-lg-3"></div>
            </div>
        </form>
        <div class="col-sm-2 col-md-3 col-lg-4"></div>
    </div>
    <br>
    <div class="text-danger text-center" id="errmsg">
        <h3>The roll number is</h3>
        <img src="wrong.jpg" class="img-rounded china" />
    </div><br>
    <div id="datatable">
        <div class="col-xs-1 col-sm-2 col-md-3"></div>
        <div class="col-xs-10 col-sm-8 col-md-6">
            <div class="row bg-primary theadings col-sm-12 col-xs-4">
                <div class="col-sm-3">Roll No.</div>
                <div class="col-sm-4">Name</div>
                <div class="col-sm-3">Hostel</div>
                <div class="col-sm-2">Room</div>
            </div>
            <div class="row col-sm-12 tbody col-xs-8">
                <div class="col-sm-3 center-block text-center text-muted" id="val_rollno"></div>
                <div class="col-sm-4 center-block text-center text-muted" id="val_name"></div>
                <div class="col-sm-3 center-block text-center" id="val_hostel"></div>
                <div class="col-sm-2 center-block text-success text-center" id="val_roomno"></div>
            </div>
        </div>
        <div class="col-xs-1 col-sm-2 col-md-3"></div>
    </div>

</body>
<script>
    $("#submitbtn").click(function() {
        if (validate_roll()) {;
            $("#errmsg").hide();
            $.get("https://students.iitm.ac.in/studentsapp/studentlist/room_alloc.php?roll_no=" + $("#rollno").val(),
                function(data, status) {
                    if (status == "success") {
                        if (data == "No results") {
                            alert("Data Missing");
                            $("#datatable").hide();
                        } else {
                            data = JSON.parse(data)[0];
                            console.log(data);
                            $("#val_rollno").text(data.rollno);
                            $("#val_name").text(data.name);
                            $("#val_hostel").text(data.hostel);
                            $("#val_roomno").text(data.roomno);
                            $("#datatable").show();
                        }
                    }
                });
        } else {
            $("#errmsg").show();
            $("#datatable").hide();
        }
    });

    function validate_roll() {
        //Checks against the valid rol number format of \w{2}\d{2}\w{1}\d{3}
        var rno_format = new RegExp(/(^([A-Z]{2})([0-9]{2})([A-Z]{1})([0-9]{3})$)/i);
        return rno_format.test($("#rollno").val());
    }
</script>

</html>