cheesy-arena-lite/templates/scoring_display.html

{{/*
  Copyright 2014 Team 254. All Rights Reserved.
  Author: pat@patfairbank.com (Patrick Fairbank)

  UI for entering realtime scores.
*/}}
{{define "title"}}Scoring{{end}}
{{define "body"}}
<div class="row">
  <div class="col-lg-12 well well-{{.Alliance}}">
    <div class="text-center" id="waitingMessage" style="display: none;">
      <h3>Waiting for the next match...</h3>
    </div>
    <div class="col-lg-6">
      <div id="autoCommands" style="display: none;">
        <h2>Autonomous Period</h2>
        <p>Use the following keyboard shortcuts:</p>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">r</div>
          <div class="col-lg-8 scoring-comment">Toggle robot set</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">c</div>
          <div class="col-lg-8 scoring-comment">Toggle container set</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">t</div>
          <div class="col-lg-8 scoring-comment">Toggle tote set</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">s</div>
          <div class="col-lg-8 scoring-comment">Toggle stacked tote set</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">Enter</div>
          <div class="col-lg-8 scoring-comment">Commit autonomous score</div>
        </div>
      </div>
      <div id="teleopCommands" style="display: none;">
        <h2>Teleoperated Period</h2>
        <p>Use the following keyboard shortcuts:</p>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">t</div>
          <div class="col-lg-8 scoring-comment">Toggle co-op tote set</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">s</div>
          <div class="col-lg-8 scoring-comment">Toggle co-op stacked tote set</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">j/l</div>
          <div class="col-lg-8 scoring-comment">Change selected stack</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">i/k</div>
          <div class="col-lg-8 scoring-comment">Add/remove totes for selected stack</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">c</div>
          <div class="col-lg-8 scoring-comment">Toggle container for selected stack</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">n</div>
          <div class="col-lg-8 scoring-comment">Toggle noodle for selected stack</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">Enter</div>
          <div class="col-lg-8 scoring-comment">Commit tote stack change</div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-lg-offset-1 scoring">a</div>
          <div class="col-lg-8 scoring-comment">Back to autonomous</div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div id="autoScore" style="display: none;">
        <h2>Autonomous Score</h2>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-1 scoring-comment">Robot Set</div>
          <div class="col-lg-2 scoring-comment" id="autoRobotSet" data-value="false">No</div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-1 scoring-comment">Container Set</div>
          <div class="col-lg-2 scoring-comment" id="autoContainerSet" data-value="false">No</div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-1 scoring-comment">Tote Set</div>
          <div class="col-lg-2 scoring-comment" id="autoToteSet" data-value="false">No</div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-1 scoring-comment">Stacked Tote Set</div>
          <div class="col-lg-2 scoring-comment" id="autoStackedToteSet" data-value="false">No</div>
        </div>
        <h3 class="text-center scoring-message">Press Enter to commit autonomous score</h3>
      </div>
      <div id="teleopScore" style="display: none;">
        <h2>Teleoperated Score</h2>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-1 scoring-comment">Co-op set</div>
          <div class="col-lg-2 scoring-comment" id="coopertitionSet">No</div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-1 scoring-comment">Co-op stack</div>
          <div class="col-lg-2 scoring-comment" id="coopertitionStack">No</div>
        </div>
        <div class="row">
          <table class="stack-grid" data-changed="false">
            <tr>
              {{template "stack" "0"}}
              {{template "stack" "1"}}
              {{template "stack" "2"}}
              {{template "stack" "3"}}
              {{template "stack" "4"}}
            </tr>
            <tr>
              {{template "stack" "5"}}
              {{template "stack" "6"}}
              {{template "stack" "7"}}
              {{template "stack" "8"}}
              {{template "stack" "9"}}
            </tr>
          </table>
        </div>
        <h3 class="text-center scoring-message" id="teleopMessage" style="opacity: 0">
          Press Enter to confirm stack changes
        </h3>
      </div>
    </div>
  </div>
  <div class="text-center col-lg-12">
    <button type="button" class="btn btn-info" id="commitMatchScore" onclick="commitMatchScore();"
        style="display: none;">Commit Final Match Score</button>
  </div>
</div>
{{end}}
{{define "script"}}
<script>
  var alliance = "{{.Alliance}}";
</script>
<script src="/static/js/match_timing.js"></script>
<script src="/static/js/scoring_display.js"></script>
{{end}}
{{define "stack"}}
<td id="stack{{.}}" data-selected="false">
  <div class="stack-tote-count">0</div>
  <div class="stack-container" style="display: none;"></div>
  <div class="stack-litter" style="display: none;"></div>
</td>
{{end}}