Create a new scounting component to manage a counter.
Much simplifies the entry component by moving common logic into a
subcomponent.
Change-Id: I260c895a149698a4404bdfa558ecd5d2f5f6f730
Signed-off-by: Alex Perry <alex.perry96@gmail.com>
diff --git a/scouting/www/counter_button/BUILD b/scouting/www/counter_button/BUILD
new file mode 100644
index 0000000..1dbcdfc
--- /dev/null
+++ b/scouting/www/counter_button/BUILD
@@ -0,0 +1,21 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
+ts_library(
+ name = "counter_button",
+ srcs = [
+ "counter_button.component.ts",
+ "counter_button.module.ts",
+ ],
+ angular_assets = [
+ "counter_button.component.css",
+ "counter_button.ng.html",
+ ],
+ compiler = "//tools:tsc_wrapped_with_angular",
+ target_compatible_with = ["@platforms//cpu:x86_64"],
+ use_angular_plugin = True,
+ visibility = ["//visibility:public"],
+ deps = [
+ "@npm//@angular/common",
+ "@npm//@angular/core",
+ ],
+)
diff --git a/scouting/www/counter_button/counter_button.component.css b/scouting/www/counter_button/counter_button.component.css
new file mode 100644
index 0000000..39faea8
--- /dev/null
+++ b/scouting/www/counter_button/counter_button.component.css
@@ -0,0 +1,11 @@
+:host {
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+ text-align: center;
+}
+
+* {
+ padding: 10px;
+}
+
diff --git a/scouting/www/counter_button/counter_button.component.ts b/scouting/www/counter_button/counter_button.component.ts
new file mode 100644
index 0000000..fa84dc6
--- /dev/null
+++ b/scouting/www/counter_button/counter_button.component.ts
@@ -0,0 +1,17 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+
+@Component({
+ selector: 'frc971-counter-button',
+ templateUrl: './counter_button.ng.html',
+ styleUrls: ['./counter_button.component.css'],
+})
+export class CounterButton {
+ @Input() value: number = 0;
+ @Output() valueChange = new EventEmitter<number>();
+
+ update(delta: number) {
+ this.value = Math.max(this.value + delta, 0);
+
+ this.valueChange.emit(this.value);
+ }
+}
diff --git a/scouting/www/counter_button/counter_button.module.ts b/scouting/www/counter_button/counter_button.module.ts
new file mode 100644
index 0000000..25bafcb
--- /dev/null
+++ b/scouting/www/counter_button/counter_button.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {CounterButton} from './counter_button.component';
+
+@NgModule({
+ declarations: [CounterButton],
+ exports: [CounterButton],
+})
+export class CounterButtonModule {
+}
diff --git a/scouting/www/counter_button/counter_button.ng.html b/scouting/www/counter_button/counter_button.ng.html
new file mode 100644
index 0000000..4abf415
--- /dev/null
+++ b/scouting/www/counter_button/counter_button.ng.html
@@ -0,0 +1,4 @@
+<h4><ng-content></ng-content></h4>
+<button (click)="update(1)" class="btn btn-secondary btn-block">+</button>
+<h3>{{value}}</h3>
+<button (click)="update(-1)" class="btn btn-secondary btn-block">-</button>