scouting: setting up html and css for adding shift schedule tab
Decided to use scouting schedule using ending in number method, so could
scale infinitely into larger numbers rather than set amount of matches.
Ignore component.ts portion of commit, used for later when sending data
to flatbuffer.
Signed-off-by: Milo Lin <100027790@mvla.net>
Change-Id: I3b132e135a9e3a5d5ae34e0c31468709ebde0053
diff --git a/scouting/www/shift_schedule/BUILD b/scouting/www/shift_schedule/BUILD
new file mode 100644
index 0000000..8fe99e4
--- /dev/null
+++ b/scouting/www/shift_schedule/BUILD
@@ -0,0 +1,27 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
+ts_library(
+ name = "shift_schedule",
+ srcs = [
+ "shift_schedule.component.ts",
+ "shift_schedule.module.ts",
+ ],
+ angular_assets = [
+ "shift_schedule.component.css",
+ "shift_schedule.ng.html",
+ "//scouting/www:common_css",
+ ],
+ compiler = "//tools:tsc_wrapped_with_angular",
+ target_compatible_with = ["@platforms//cpu:x86_64"],
+ use_angular_plugin = True,
+ visibility = ["//visibility:public"],
+ deps = [
+ "//scouting/webserver/requests/messages:error_response_ts_fbs",
+ "//scouting/webserver/requests/messages:request_all_matches_response_ts_fbs",
+ "//scouting/webserver/requests/messages:request_all_matches_ts_fbs",
+ "@com_github_google_flatbuffers//ts:flatbuffers_ts",
+ "@npm//@angular/common",
+ "@npm//@angular/core",
+ "@npm//@angular/forms",
+ ],
+)
diff --git a/scouting/www/shift_schedule/shift_schedule.component.css b/scouting/www/shift_schedule/shift_schedule.component.css
new file mode 100644
index 0000000..bafeb4c
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.component.css
@@ -0,0 +1,17 @@
+* {
+ padding: 5px;
+}
+
+.badge {
+ height: 20px;
+}
+
+.red {
+ background-color: #dc3545;
+ border-radius: 5px;
+}
+
+.blue {
+ background-color: #0d6efd;
+ border-radius: 5px;
+}
diff --git a/scouting/www/shift_schedule/shift_schedule.component.ts b/scouting/www/shift_schedule/shift_schedule.component.ts
new file mode 100644
index 0000000..2f22653
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.component.ts
@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+import {Builder, ByteBuffer} from 'flatbuffers';
+import {ErrorResponse} from 'org_frc971/scouting/webserver/requests/messages/error_response_generated';
+
+@Component({
+ selector: 'shift-schedule',
+ templateUrl: './shift_schedule.ng.html',
+ styleUrls: ['../common.css', './shift_schedule.component.css'],
+})
+export class ShiftsComponent {
+ progressMessage: string = '';
+ errorMessage: string = '';
+ // used to calculate shift blocks from starting match to ending match
+ numMatches: number[] = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200];
+}
diff --git a/scouting/www/shift_schedule/shift_schedule.module.ts b/scouting/www/shift_schedule/shift_schedule.module.ts
new file mode 100644
index 0000000..0e5aa48
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.module.ts
@@ -0,0 +1,12 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+
+import {ShiftsComponent} from './shift_schedule.component';
+
+@NgModule({
+ declarations: [ShiftsComponent],
+ exports: [ShiftsComponent],
+ imports: [CommonModule, FormsModule],
+})
+export class ShiftScheduleModule {}
diff --git a/scouting/www/shift_schedule/shift_schedule.ng.html b/scouting/www/shift_schedule/shift_schedule.ng.html
new file mode 100644
index 0000000..3a9cdf0
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.ng.html
@@ -0,0 +1,33 @@
+<div class="header">
+ <h2>Shift Schedule</h2>
+</div>
+
+<div class="container-fluid">
+ <div class="row">
+ <div *ngFor="let num of numMatches">
+ <span class="badge bg-secondary rounded-left">
+ Scouting matches from {{num-19}} to {{num}}
+ </span>
+ <div class="list-group list-group-horizontal-sm">
+ <div class="redColumn">
+ <div *ngFor="let allianceNum of [1, 2, 3]">
+ <input
+ class="red text-center text-white fw-bold list-group-item list-group-item-action"
+ type="text"
+ />
+ </div>
+ </div>
+ <div class="blueColumn">
+ <div *ngFor="let allianceNum of [1, 2, 3]">
+ <input
+ class="blue text-center text-white fw-bold list-group-item list-group-item-action"
+ type="text"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <button class="btn btn-primary">Save</button>
+ <span class="error_message" role="alert">{{ errorMessage }}</span>
+</div>