Untitled

<% if (!user) { %>
	<p>Welcome! Please <a href="/login">log in</a>.</p>
<% } else { %>
<!DOCTYPE html>
<html>
<head>

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="/views/bachelor.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="javascripts/modal.js"></script>

	<title>RadioWheel</title>
    <link rel="shortcut icon" type="image/png" href="assets/logo1.png">

<script>
    function toTheTop() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

</head>

<body>

<div class="jumbotron" >
	<h1 id="header">RadioWheel</h1>
	<p id="header-p"> - Ha oversikt over hva som spilles av -</p>
</div>

<nav class="navbar navbar-default tabs">
	<div class="container-fluid">
		<div class="navbar-header" id="navbar-header">
			<img class="navbar-brand" src="../assets/logo1.svg">
			<a class="navbar-brand" href="#" >Administrasjon</a>
		</div>

		<ul class="nav navbar-nav tabcontent">
			<li class ="active" data-toggle="tab" href="#tabBus" role="tab"><a href="#tabBus">Busser</a></li>
		</ul>

        <ul class="nav navbar-nav tabcontent">
            <li class ="" data-toggle="tab" href="#tabUsers" ><a href="#tabUsers">Aktive brukere</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li data-toggle="tab" href="#tabProfile"><a href="#tabProfile"><span class="glyphicon glyphicon-user"></span> Profil</a></li>
            <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> Logg ut</a></li>
        </ul>
	</div>
</nav>

<!--TAB 1: busses -->
<div class="tab-content">
<div class="tab" id="tabBus">
	<h2 >Oversikt over busser</h2>

	<!--Search input -->
	<form>
		<div id="inputSearch"class="input-group">
			<input  type="text" class="form-control" placeholder="Søk på buss">
			<div class="input-group-btn">
				<button class="btn btn-default" type="submit">
					<i class="glyphicon glyphicon-search"></i>
				</button>
			</div>
		</div>
	</form>

    <table class="table" id="overviewTableNew">
        <thead>
            <tr>
                <th>Hvilken buss</th>
                <th>Hva spilles</th>
                <th>Status</th>
                <th>Endre</th>
            </tr>
        </thead>
        <tbody>
        <% for(i = 0; i < data.length; i++) { %>
            <tr class="modalOpenButton" id="rowbus<%=data[i].idBus%>">
                <!-- Bus ID-->
                <td class="busField"><%= data[i].idBus%></td>

                <!-- shows playing channel -->
                <% if (data[i].channel != null) {%>
                    <td class="channelField"><%=data[i].channel %></td>
                <%  } else {%>
                    <td class="channelField">NULL</td>
                <% } %>

                <!-- if active != 0 show active-->
                <% if (data[i].active == 0 ){%>
                <td class ="activeField">Inaktiv</td>
                <%  } else {%>
                <td class="activeField">Aktiv</td>
                <% } %>

                <!--Button in table opens modal. Has ID "bus" + number from data  -->
                <td><button id = "bus<%=data[i].idBus%>" type="button" class="btn btn-default btn-sm" style="background-color:#DCF1EE">
                        <span class="glyphicon glyphicon-pencil"></span></button>
                </td>
            </tr>
        <%}%>
        </tbody>
    </table>
    <nav>
        <button id="topBtn" type="button" onclick="toTheTop()" title="Go to top">Gå til toppen
            <span class="glyphicon glyphicon-chevron-up"></span></button>
    </nav>
</div>

    <!--TAB 2: users -->
    <div class="tab" id="tabUsers">
        <h2 >Oversikt over brukere</h2>
        <table class="table" id="overviewTableNew">
            <thead>
            <tr>
                <th>Bruker</th>
                <th>Buss</th>
            </tr>
            </thead>
            <tbody>
            <% for(i = 0; i < userData.length; i++) { %>
            <tr class="modalOpenButton" id="hei">
                <!-- User -->
                <td><%= userData[i].name%></td>

                <!-- shows playing channel -->
                <td><%=userData[i].username %></td>
            </tr>
            <%}%>
            </tbody>
        </table>
        <nav>
            <button id="topBtn" type="button" onclick="toTheTop()" title="Go to top">Gå til toppen
                <span class="glyphicon glyphicon-chevron-up"></span></button>
        </nav>
    </div>

    <!--TAB 3: Profile -->
    <div class="tab" id="tabProfile">
        <div class="profile">
            <h4 id="profileHeader">Min profil</h4>
        <form id="profileForm">
            Brukernavn:
            <input type="text" name="firstname">
            <br>
            Passord:
            <input type="text" name="password">
            <br>
            Nytt passord:
            <input type="text" name="newPassword">
            <input type="submit" name="save">
        </form>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
	<div class="modal-dialog">

		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Reguler avspilling</h4>
			</div>
			<div class="modal-body">
                <h5>Buss: </h5>
                <input type="text" id="modalBusField">

                <h5> Aktivitet: </h5>
                <input type="text" id="modalActiveField">

                <h5>Spiller av: </h5>
                <input type="text" id="modalChannelField">

                <button type="button">Endre avspilling <span class="glyphicon glyphicon-pencil"></span></button>
                <button type="button">Hei</button>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
			</div>
		</div>

	</div>
</div>

<!-- footer at bottom of page -->
<footer id="footer">
    <p id="copyright">FourC AS © 2013 - 2018 - All Rights Reserved</p>
</footer>

</body>
</html>

<% } %>