BusManagementSystem/availableBuses.jsp at master · NishantTheProgrammer/BusManagementSystem · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/authentication.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/leave.css">
    <link rel="icon" href="images/icon.png">
    <title>Available Buses</title>
    <style>
    .searchOutput
    {
        background-color:green;
        height: 0;
        width: 80%;
        margin: 0 auto;
        display: none;

    }
    .searchOutput .list
    {
        background-color: rgb(83, 83, 95);
        width: 100%;
        max-height: 12.6vw;
        overflow-y: scroll;
        position: relative;
    }
    .searchOutput .list::-webkit-scrollbar
    {
        display: none;
    }
    .searchOutput .list p
    {
        color: white;
        padding: 1vw;
        font-size: 1vw;
        margin: 0 auto;
        transition: ease all .7s;
    }
    .searchOutput .list p:hover
    {
        background-color: white;
        cursor: pointer;
        color: rgb(83, 83, 95);
    }
    input[type="search"]:focus + .searchOutput
    {
        display: block;
    }
    </style>
</head>
<body>
<%
if(session.getAttribute("email") == null || !session.getAttribute("role").equals("passanger"))
{
    response.sendRedirect("authentication.jsp");
}
%>

    <jsp:include page="navigationPannel.jsp"></jsp:include>
    <jsp:include page="svg.jsp"></jsp:include>
    <div class="container">
        <div class="workspace">
            <form action="busesResult.jsp">
                <h1>Available Buses</h1>
                <input type="search" id="from" placeholder="From" onkeyup="getFrom(this.value);" name="source" autocomplete="on">
                <div class="searchOutput">
                    <div class="list""></div>
                </div>
                <input type="search" id="to" placeholder="To" onkeyup="getTo(this.value);" name="destination" autocomplete="on">
                <div class="searchOutput">
                    <div class="list""></div>
                </div>
                <input type="submit" value="Check Buses">
            </form>
        </div>
    </div>
    <jsp:include page="footer.jsp"></jsp:include>
</body>
<script src="scripts/navPannel.js"></script>
<script>
function setFrom(value)
{
    console.log(value);
    document.getElementById('from').value = value;
}
function setTo(value)
{
    console.log(value);
    document.getElementById('to').value = value;
}
function getFrom(keyword)
{

    var param = "?keyword=" +  keyword;
    param = param.replace("+", "%2b")

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "availableBusesAJAX.jsp" + param, false);

    xmlhttp.onreadystatechange = function(){
        document.getElementsByClassName('list')[0].innerHTML = xmlhttp.responseText;
    }
    xmlhttp.send();
}
function getTo(keyword)
{

    var param = "?keyword=" +  keyword;
    param = param.replace("+", "%2b")

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "availableBusesAJAX2.jsp" + param, false);

    xmlhttp.onreadystatechange = function(){
        document.getElementsByClassName('list')[1].innerHTML = xmlhttp.responseText;
    }
    xmlhttp.send();
}
</script>
</html>