mirror of
https://github.com/Team254/cheesy-arena-lite.git
synced 2026-03-09 21:56:50 -04:00
Refactor displays to allow for centralized remote configuration.
This commit is contained in:
Patrick Fairbank
@@ -14,7 +14,6 @@
|
||||
<link rel="stylesheet" href="/static/css/alliance_station_display.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="displayId" class="mode"></div>
|
||||
<div id="match" class="mode">
|
||||
<div id="preMatch">
|
||||
<div id="teamNumber"></div>
|
||||
@@ -33,10 +32,6 @@
|
||||
<img id="logoImg" src="/static/img/alliance-station-logo.png" alt="logo" />
|
||||
</div>
|
||||
<div id="fieldReset" class="mode"><div>FIELD<br />RESET</div></div>
|
||||
<script>
|
||||
// A unique id to differentiate this station's display from its peers.
|
||||
var displayId = "{{.DisplayId}}";
|
||||
</script>
|
||||
<script src="/static/js/lib/jquery.min.js"></script>
|
||||
<script src="/static/js/lib/jquery.json-2.4.min.js"></script>
|
||||
<script src="/static/js/lib/jquery.websocket-0.0.1.js"></script>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<link rel="stylesheet" href="/static/css/cheesy-arena.css" />
|
||||
<link rel="stylesheet" href="/static/css/audience_display.css" />
|
||||
</head>
|
||||
<body style="background-color: {{.EventSettings.DisplayBackgroundColor}};">
|
||||
<body>
|
||||
<div id="centering">
|
||||
<div id="matchOverlay">
|
||||
<div class="teams" id="redTeams">
|
||||
|
||||
@@ -50,8 +50,10 @@
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Panel</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="/panels/referee">Referee</a></li>
|
||||
<li><a href="/panels/scoring/red">Scoring – Red</a></li>
|
||||
<li><a href="/panels/scoring/blue">Scoring – Blue</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Scoring</li>
|
||||
<li><a href="/panels/scoring/red">Red</a></li>
|
||||
<li><a href="/panels/scoring/blue">Blue</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
@@ -78,11 +80,19 @@
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Display</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="/displays/alliance_station">Alliance Station</a></li>
|
||||
<li><a href="/display">Placeholder</a></li>
|
||||
<li><a href="/displays/announcer">Announcer</a></li>
|
||||
<li><a href="/displays/audience">Audience</a></li>
|
||||
<li><a href="/displays/fta">Field Monitor</a></li>
|
||||
<li><a href="/displays/pit">Pit</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Alliance Station</li>
|
||||
<li><a href="/displays/alliance_station?station=R1">Red 1</a></li>
|
||||
<li><a href="/displays/alliance_station?station=R2">Red 2</a></li>
|
||||
<li><a href="/displays/alliance_station?station=R3">Red 3</a></li>
|
||||
<li><a href="/displays/alliance_station?station=B1">Blue 1</a></li>
|
||||
<li><a href="/displays/alliance_station?station=B2">Blue 2</a></li>
|
||||
<li><a href="/displays/alliance_station?station=B3">Blue 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -142,7 +152,6 @@
|
||||
<link rel="shortcut icon" href="/static/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="/static/img/apple-icon.png">
|
||||
<link href="/static/css/lib/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/static/css/lib/bootstrap-colorpicker.min.css" rel="stylesheet">
|
||||
<link href="/static/css/lib/bootstrap-datetimepicker.min.css" rel="stylesheet">
|
||||
<link href="/static/css/cheesy-arena.css" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -153,7 +162,6 @@
|
||||
<script src="/static/js/lib/jquery.json-2.4.min.js"></script>
|
||||
<script src="/static/js/lib/jquery.websocket-0.0.1.js"></script>
|
||||
<script src="/static/js/lib/bootstrap.min.js"></script>
|
||||
<script src="/static/js/lib/bootstrap-colorpicker.min.js"></script>
|
||||
<script src="/static/js/lib/moment.min.js"></script>
|
||||
<script src="/static/js/lib/bootstrap-datetimepicker.min.js"></script>
|
||||
<script src="/static/js/lib/handlebars-1.3.0.js"></script>
|
||||
|
||||
24
templates/placeholder_display.html
Normal file
24
templates/placeholder_display.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{{/*
|
||||
Copyright 2018 Team 254. All Rights Reserved.
|
||||
Author: pat@patfairbank.com (Patrick Fairbank)
|
||||
|
||||
Placeholder display shown until configured by the server.
|
||||
*/}}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Placeholder Display - {{.EventSettings.Name}} - Cheesy Arena </title>
|
||||
<link rel="shortcut icon" href="/static/img/favicon.ico">
|
||||
<link rel="stylesheet" href="/static/css/cheesy-arena.css" />
|
||||
<link rel="stylesheet" href="/static/css/placeholder_display.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="displayId"></div>
|
||||
<div id="displayNickname"></div>
|
||||
<script src="/static/js/lib/jquery.min.js"></script>
|
||||
<script src="/static/js/lib/jquery.json-2.4.min.js"></script>
|
||||
<script src="/static/js/lib/jquery.websocket-0.0.1.js"></script>
|
||||
<script src="/static/js/cheesy-websocket.js"></script>
|
||||
<script src="/static/js/placeholder_display.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -14,7 +14,6 @@
|
||||
<link rel="shortcut icon" href="/static/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="/static/img/apple-icon.png">
|
||||
<link href="/static/css/lib/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/static/css/lib/bootstrap-colorpicker.min.css" rel="stylesheet">
|
||||
<link href="/static/css/lib/bootstrap-datetimepicker.min.css" rel="stylesheet">
|
||||
<link href="/static/css/cheesy-arena.css" rel="stylesheet">
|
||||
<link href="/static/css/referee_panel.css" rel="stylesheet">
|
||||
|
||||
@@ -7,35 +7,58 @@
|
||||
{{define "title"}}Display Configuration{{end}}
|
||||
{{define "body"}}
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<div class="well">
|
||||
<legend>Alliance Station Displays</legend>
|
||||
{{range $displayId, $station := .AllianceStationDisplays}}
|
||||
<form class="form-horizontal" action="" method="POST">
|
||||
<div class="form-group">
|
||||
<label class="col-lg-5 control-label">Display {{$displayId}}</label>
|
||||
<div class="col-lg-7">
|
||||
<input type="hidden" name="displayId" value="{{$displayId}}" />
|
||||
<select class="form-control" name="allianceStation" onchange="this.form.submit();">
|
||||
<option value=""></option>
|
||||
<option value="R1"{{if eq $station "R1"}} selected{{end}}>Red 1</option>
|
||||
<option value="R2"{{if eq $station "R2"}} selected{{end}}>Red 2</option>
|
||||
<option value="R3"{{if eq $station "R3"}} selected{{end}}>Red 3</option>
|
||||
<option value="B1"{{if eq $station "B1"}} selected{{end}}>Blue 1</option>
|
||||
<option value="B2"{{if eq $station "B2"}} selected{{end}}>Blue 2</option>
|
||||
<option value="B3"{{if eq $station "B3"}} selected{{end}}>Blue 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{end}}
|
||||
<legend>Reload All Displays</legend>
|
||||
<div class="form-group">
|
||||
<a href="/setup/displays/reload" class="btn btn-primary">Force Reload of All Displays</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<legend>Connected Displays</legend>
|
||||
<table class="table table-striped table-hover ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th># Connected</th>
|
||||
<th>Nickname</th>
|
||||
<th>Type</th>
|
||||
<th>Configuration</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="displayContainer"></tbody>
|
||||
</table>
|
||||
<button type="button" class="btn btn-primary pull-right" onclick="reloadAllDisplays();">
|
||||
Force Reload of All Displays
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="displayTemplate" type="text/x-handlebars-template">
|
||||
<tr>
|
||||
<td>{{"{{Id}}"}}</td>
|
||||
<td>{{"{{ConnectionCount}}"}}</td>
|
||||
<td><input type="text" id="displayNickname{{"{{Id}}"}}" size="30" /></td>
|
||||
<td>
|
||||
<select id="displayType{{"{{Id}}"}}">
|
||||
{{range $type, $typeName := .DisplayTypeNames}}
|
||||
<option value="{{$type}}">{{$typeName}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="displayConfiguration{{"{{Id}}"}}" size="50" />
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-info btn-xs" title="Save Changes"
|
||||
onclick="configureDisplay('{{"{{Id}}"}}');">
|
||||
<i class="glyphicon glyphicon-ok"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-xs" title="Undo Changes" onclick="undoChanges();">
|
||||
<i class="glyphicon glyphicon-arrow-left"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-xs" title="Reload Display"
|
||||
onclick="reloadDisplay('{{"{{Id}}"}}');">
|
||||
<i class="glyphicon glyphicon-refresh"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
{{end}}
|
||||
{{define "script"}}
|
||||
<script src="/static/js/setup_displays.js"></script>
|
||||
{{end}}
|
||||
|
||||
@@ -24,16 +24,6 @@
|
||||
<input type="text" class="form-control" name="name" value="{{.Name}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-lg-5 control-label">Display Background Color</label>
|
||||
<div class="col-lg-7">
|
||||
<div class="input-group" id="displayBackgroundColor">
|
||||
<input type="text" class="form-control" name="displayBackgroundColor"
|
||||
value="{{.DisplayBackgroundColor}}">
|
||||
<span class="input-group-addon"><i></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-lg-5 control-label">Number of Alliances</label>
|
||||
<div class="col-lg-7">
|
||||
@@ -334,9 +324,4 @@
|
||||
</div>
|
||||
{{end}}
|
||||
{{define "script"}}
|
||||
<script>
|
||||
$(function() {
|
||||
$("#displayBackgroundColor").colorpicker();
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user