Clean up some styling in scouting app.
Correctly set columns for scores.
Switch margin to padding to not mess up bootstrap styles.
Add back button on screens that can go back.
Change-Id: I25de3c6de2d93564bfbe74cd7aa3bb1de933a4e3
Signed-off-by: Alex Perry <alex.perry96@gmail.com>
diff --git a/scouting/www/entry/entry.component.css b/scouting/www/entry/entry.component.css
index 520b6d2..cec2a47 100644
--- a/scouting/www/entry/entry.component.css
+++ b/scouting/www/entry/entry.component.css
@@ -1,8 +1,20 @@
* {
- margin: 10px;
+ padding: 10px;
+}
+
+.center-column {
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+ text-align: center;
+}
+
+.buttons {
+ display: flex;
+ justify-content: space-between;
}
textarea {
width: 300px;
height: 150px;
-}
\ No newline at end of file
+}
diff --git a/scouting/www/entry/entry.component.ts b/scouting/www/entry/entry.component.ts
index 21bdac4..a1cffc3 100644
--- a/scouting/www/entry/entry.component.ts
+++ b/scouting/www/entry/entry.component.ts
@@ -16,8 +16,8 @@
teleUpperShotsMade: number = 0;
teleLowerShotsMade: number = 0;
teleShotsMissed: number = 0;
- defensePlayedOnScore: number = 50;
- defensePlayedScore: number = 50;
+ defensePlayedOnScore: number = 3;
+ defensePlayedScore: number = 3;
level: Level;
proper: boolean = false;
climbed: boolean = false;
@@ -72,6 +72,18 @@
}
}
+ prevSection() {
+ if (this.section === 'TeleOp') {
+ this.section = 'Auto';
+ } else if (this.section === 'Climb') {
+ this.section = 'TeleOp';
+ } else if (this.section === 'Defense') {
+ this.section = 'Climb';
+ } else if (this.section === 'Review and Submit') {
+ this.section = 'Defense';
+ }
+ }
+
adjustAutoUpper(by: number) {
this.autoUpperShotsMade = Math.max(0, this.autoUpperShotsMade + by);
}
diff --git a/scouting/www/entry/entry.ng.html b/scouting/www/entry/entry.ng.html
index c20edf9..da77ce6 100644
--- a/scouting/www/entry/entry.ng.html
+++ b/scouting/www/entry/entry.ng.html
@@ -30,57 +30,60 @@
</form>
</div>
<div class="row justify-content-center">
- <div class="col-sm">
- <h4>Upper Shots Made</h4>
- <button (click)="adjustAutoUpper(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Upper</h4>
+ <button (click)="adjustAutoUpper(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{autoUpperShotsMade}}</h3>
- <button (click)="adjustAutoUpper(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustAutoUpper(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Lower Shots Made</h4>
- <button (click)="adjustAutoLower(1)" class="col-xs btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Lower</h4>
+ <button (click)="adjustAutoLower(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{autoLowerShotsMade}}</h3>
- <button (click)="adjustAutoLower(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustAutoLower(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Missed Shots</h4>
- <button (click)="adjustAutoMissed(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Missed</h4>
+ <button (click)="adjustAutoMissed(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{autoShotsMissed}}</h3>
- <button (click)="adjustAutoMissed(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustAutoMissed(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
</div>
- <div class="text-right">
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <!-- hack to right align the next button -->
+ <div></div>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
</div>
</div>
<div *ngSwitchCase="'TeleOp'" id="teleop" class="container-fluid">
<div class="row justify-content-center">
- <div class="col-sm">
- <h4>Upper Shots Made</h4>
- <button (click)="adjustTeleUpper(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Upper</h4>
+ <button (click)="adjustTeleUpper(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{teleUpperShotsMade}}</h3>
- <button (click)="adjustTeleUpper(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustTeleUpper(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Lower Shots Made</h4>
- <button (click)="adjustTeleLower(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Lower</h4>
+ <button (click)="adjustTeleLower(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{teleLowerShotsMade}}</h3>
- <button (click)="adjustTeleLower(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustTeleLower(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Missed Shots</h4>
- <button (click)="adjustTeleMissed(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Missed</h4>
+ <button (click)="adjustTeleMissed(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{teleShotsMissed}}</h3>
- <button (click)="adjustTeleMissed(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustTeleMissed(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
</div>
- <div class="text-right">
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
</div>
</div>
@@ -105,7 +108,10 @@
<h4>Comments</h4>
<textarea></textarea>
</div>
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ </div>
</div>
<div *ngSwitchCase="'Defense'" id="defense" class="container-fluid">
@@ -117,7 +123,7 @@
</div>
<div class="col">
- <input type="range" min="1" max="100" value="50" (input)="defensePlayedOnSlider($event)">
+ <input type="range" min="1" max="5" value="3" (input)="defensePlayedOnSlider($event)">
</div>
<div class="col">
@@ -136,7 +142,7 @@
</div>
<div class="col">
- <input type="range" min="1" max="100" value="50" (input)="defensePlayedSlider($event)">
+ <input type="range" min="1" max="5" value="3" (input)="defensePlayedSlider($event)">
</div>
<div class="col">
@@ -145,7 +151,10 @@
</div>
<h6 class="text-center">{{defensePlayedScore}}</h6>
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ </div>
</div>
<div *ngSwitchCase="'Review and Submit'" id="review" class="container-fluid">
@@ -180,6 +189,9 @@
<li>Defense Played Raing: {{defensePlayedScore}}</li>
</ul>
- <button class="btn btn-primary" (click)="nextSection()">Submit</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Submit</button>
+ </div>
</div>
</ng-container>