Permalink
Browse files

New administrator interface layout (#107)

* reformatting of admin ui
* Basic Stop Editing functionality implemeneted
* improve admin interface, same functionality as old one, less bugs
* Self Host Vuejs
* deleted unnecessary comments
* Capitalization fixes, Titlebar Shadow fix, Hide Users/Messages Tabs
* Stop card drop down boxes now show what route they are currently on by default
  • Loading branch information...
jlyon1 authored and kochman committed Nov 20, 2017
1 parent a08214a commit 3affdf38330c16ab27c735ad623cdafc4a6b56cd
Showing with 620 additions and 663 deletions.
  1. +8 −38 admin.html
  2. +1 −1 index.html
  3. +50 −162 static/css/admin.css
  4. +6 −0 static/dist/vue/vue.min.js
  5. +88 −439 static/js/admin.js
  6. +243 −0 static/js/routes.js
  7. +218 −0 static/js/stops.js
  8. +6 −23 static/js/vehicles.js
View
@@ -11,49 +11,19 @@
<script src="/static/dist/leaflet-routing/leaflet-routing-machine.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="/static/dist/vue/vue.min.js"></script>
<script src="/static/js/admin.js"></script>
</head>
<body>
<div class="navbar">
<p class="title">RPI Shuttle Tracker</p>
<a class="logout button" href="/admin/logout/">Logout</a>
<div class="button logout" onclick="Admin.toggleDisplay();">Toggle Route Display</div>
<div class="button logout rtb" onclick="Admin.showMapPanel();">Create Route</div>
</div>
<div class="docBody" id="document-vue">
<vehicle-panel></vehicle-panel>
<div class = "routePanel">
</div>
<div class= "mapPanel">
<div class="button undoButton" onclick="Admin.removeLastPoint()">Undo</div>
<div id="mapid" style="height: 70%;float: left; width: 100%; background-color:black;z-index:0;"></div>
<div class="mapform">
<form id="routeform" action="/routes/create" method="post" content-type="application/json">
<span class="emphasis formtext">Name: </span><input class="textbox" id="name" type="text"></input><br>
<span class="emphasis formtext">Description: </span><input class="textbox" id="desc" type="text"></input><br>
<span class="emphasis formtext">Enabled: </span><input class="textbox" id="en" type="text"></input><br>
<span class="emphasis formtext">Color: </span><input class="textbox" id="color" type="text"></input><br>
<span class="emphasis formtext">StartTime: </span><input class="textbox" id="startTimeTime" type="text" value=""></span><input class="textbox" id="startTimeDay" type="text" value="day"></input><br>
<span class="emphasis formtext">EndTime: </span><input class="textbox" id="endTimeTime" type="text" value="time"></span><input class="textbox" id="endTimeDay" type="text" value="day"></input><br>
<span class="emphasis formtext">Width: </span><input class ="textbox" id="width" type="text"></input><br>
<input type="hidden" id="routeCoords" name="coords"></input>
<div class="button formtext" onclick="Routes.submitForm(JSON.stringify(Routes.pullForm()))"> Submit</div>
<div class="button formtext" onclick="Routes.getJson(JSON.stringify(Routes.pullForm()))"> GetJson</div>
</form>
</div>
</div>
<div class="stopPanel">
</div>
<div class="docBody" id="app-vue">
<sidebar></sidebar>
<titlebar></titlebar>
<main-pane></main-pane>
</div>
<script src="/static/js/stops.js"></script>
<script src="/static/js/routes.js"></script>
<script src="/static/js/vehicles.js"></script>
<script src="/static/js/admin.js"></script>
</body>
</html>
View
@@ -11,7 +11,7 @@
<script src="static/dist/leaflet/leaflet.rotatedMarker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="static/dist/vue/vue.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
View
@@ -8,111 +8,78 @@ html, body {
}
.undoButton{
float: none;
position: absolute;
z-index: 10;
top: 10;
left: 50%;
width: auto;
.route-description-box{
padding: 10px;
margin-top:20px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
width: 70%;
background-color: white;
height: auto;
}
.navbar{
background-color: #eee;
width: 100%;
height: 34px;
float: none;
position: absolute;
top: 0;
left: 0;
user-select:none;
}
.prompttext{
color: black;
text-align: center;
font-size: 25px;
.nav-list{
padding: 0;
}
.pbutton{
width: 100%;
height: 20%;
margin: auto;
text-align: center;
.sidebar{
width: 150px;
}
.rtb{
display:none;
.nav-item{
text-align: left;
padding-left: 10px;
overflow-x: hide;
padding-top: -5px;
padding-bottom: -5px;
}
.title{
padding: 0px;
margin-top: 6px;
margin-left: 5px;
font-size: 22px;
float:left;
.nav-item:hover{
cursor: pointer;
color: white;
background-color: #e74c3c
}
.formtext{
float:left;
margin: 10px;
padding: 5px;
.selected{
color: white;
background-color: #e74c3c;
}
.mapform{
height: 25%;
width: 100%;
float: right;
margin-top: 10px;
.red{
color: #e74c3c;
}
.textbox{
float: right;
border-style: none;;
border-width: 0px;
height: 15px;
background-color: rgba(255,255,255,.5);
box-shadow: inset 1px 1px 2px 0 #707070;
.slide-fade-enter-active {
transition: all .5s ease;
}
.center{
width: 300px;
height: auto;
margin: auto;
height: 300px;
left: 0;
right: 0;
float: none;
.slide-fade-leave-active {
transition: all 0.1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.prompt{
display: none;
z-index: 19;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(-100px);
opacity: 0;
}
.prompt-box{
float:none;
.title{
padding: 0px;
margin-top: 10px;
left: 0;
right: 0;
margin: 0 auto;
width: auto;
position: absolute;
z-index: 20;
margin: auto;
text-align: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 50%;
height: 50%;
background-color: #ecf0f1;
border-radius: 20px;
}
.cbutton{
font-size: 22px;
float:left;
bottom: 10px;
background-color: transparent;
text-align: center;
}
.button{
user-select: none;
margin: 2px;
background-color: white;
padding: 5px;
font-size: 12px;
text-decoration: none;
@@ -129,82 +96,3 @@ html, body {
cursor: pointer;
}
.logout{
margin-right: 10px;
margin: 3px;
float: right;
}
.routePanel{
display: none;
position: fixed;
height: auto;
float: none;
top: 34px;
}
.vehicle-panel{
position: fixed;
height: 100%;
width: 100%;
float: none;
background-color: transparent;
overflow: scroll;
top: 34px;
}
.logout:hover{
background-color: #e74c3c;
color: #eee;
}
.docBody{
position: absolute;
float:none;
top:34px;
bottom: 0;
height: auto;
width: 100%;
}
.routePanel{
width: 50%;
height: 100%;
overflow: scroll;
float: left;
}
.mapPanel{
width: 50%;
float: right;
height: 100%;
overflow:scroll;
display: none;
}
.stopPanel{
width: 50%;
float: right;
height: 100%;
overflow: scroll;
}
.stopInfo{
height: 50%;
}
.route-description-box{
padding: 20px;
margin-top:10px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
width: 90%;
background-color: white;
height: auto;
}
.emphasis{
padding: 0px;
margin: 0px;
font-weight: bold;
}
.content{
padding: 0px;
margin: 0px;
}

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 3affdf3

Please sign in to comment.