-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (150 loc) · 5.98 KB
/
index.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>PitCommander2 Kiosk</title>
<!--CSS imports, custom stuff last -->
<link rel="stylesheet" href="css/fa_all.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/datatables.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark orange darken-4">
<a class="navbar-brand" href="#">PC2-Kiosk</a>
<ul class="nav nav-pills nav-fill w-100" role="tablist">
<li class="nav-item">
<a class="nav-link active white-text" data-toggle="pill" href="#page-tv" role="tab">TV Controls</a>
</li>
<li class="nav-item">
<a class="nav-link white-text" data-toggle="pill" href="#page-schedule" role="tab">Schedule</a>
</li>
<li class="nav-item">
<a class="nav-link white-text" data-toggle="pill" href="#page-checklist" role="tab">Checklists</a>
</li>
<li class="nav-item">
<a class="nav-link white-text" data-toggle="pill" href="#page-timer" role="tab">Match Timer</a>
</li>
</ul>
</nav>
</header>
<main class="mt-2">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="tab-content pt-2 pl-1" id="pills-tabContent">
<!-- TV Controls View -->
<div class="tab-pane fade show active" id="page-tv" role="tabpanel">
<div id="tvHolder"></div>
</div>
<!-- Schedule View-->
<div class="tab-pane fade" id="page-schedule" role="tabpanel">
<table id="scheduleTable" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>
</div>
<!-- Checklist View -->
<div class="tab-pane fade" id="page-checklist" role="tabpanel">
<div class="card mb-4">
<div class="card-body">
<h3 class="card-title"><a>Pre-Match Checklist</a></h3>
<div id="matchHolder"></div>
<a href="#" class="btn orange-btn float-right">Submit Checklist</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h3 class="card-title"><a>Safety Checklist</a></h3>
<div id="safetyHolder"></div>
<a href="#" class="btn orange-btn float-right">Submit Checklist</a>
</div>
</div>
</div>
<!-- Next Match View -->
<div class="tab-pane fade" id="page-timer" role="tabpanel">
Match timer screen will live here
</div>
</div>
</div>
</div>
</div>
</main>
<script>
//Deps for main app UI
window.$ = window.jQuery = require('jquery');
window.Waves = require('node-waves');
const dt = require('datatables.net')();
require('popper.js');
var moment = require('moment');
require('bootstrap');
const bsCustomFileInput = require('bs-custom-file-input');
require('mdbootstrap/js/mdb');
</script>
<!-- Template for TV elements, called in logic.js -->
<script id="tv-template" type="text/x-handlebars-template">
{{#each tv}}
<div class="card mb-4">
<div class="card-body">
<h3 class="card-title"><a>{{this}} TV</a></h3>
<div data-toggle="buttons">
<div class="btn-group btn-group-toggle container-fluid" id="{{this}}">
<label class="btn orange-btn first-button" id="rankings">
<input type="radio"> Event Rankings
</label>
<label class="btn orange-btn">
<input type="radio" name="schedule" id="schedule"> Team Schedule
</label>
<label class="btn orange-btn" id="logo">
<input type="radio"> Team Logo
</label>
<label class="btn orange-btn" id="stream">
<input type="radio"> Match Stream
</label>
<label class="btn orange-btn" id="specs">
<input type="radio" name="logs"> Log Report
</label>
<label class="btn orange-btn last-button" id="timer">
<input type="radio"> Match Timer
</label>
</div>
<div class="btn-group btn-group-toggle container-fluid pt-4" id="{{this}}">
<label class="btn orange-btn first-button" id="overall">
<input type="radio"> Overall Specs
</label>
<label class="btn orange-btn">
<input type="radio" id="chassis"> Chassis
</label>
<label class="btn orange-btn" id="programming">
<input type="radio"> Programming
</label>
<label class="btn orange-btn" id="manip1">
<input type="radio"> Manipulator 1
</label>
<label class="btn orange-btn" id="manip2">
<input type="radio" name="logs"> Manipulator 2
</label>
<label class="btn orange-btn last-button" id="outreach">
<input type="radio"> Outreach
</label>
</div>
</div>
</div>
</div>
{{/each}}
</script>
<script id="checklist-template" type="text/x-handlebars-template">
{{#each listItem}}
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="check-{{this.type}}-{{@index}}">
<label class="custom-control-label" for="check-{{this.type}}-{{@index}}">
<h4>{{this.text}}</h4></label>
</div>
{{/each}}
</script>
<!-- Custom JS stuff, tables handles setup for the datatable, logic is everything else -->
<script src="js/tables.js"></script>
<script src="js/logic.js"></script>
</body>
</html>