Merge pull request #12 from DoodleyJC/dev

changed some design choices and made the website uglier
DoodleyJC · Jun 3, 2024 · 2bedecd · 2bedecd
2 parents 75fe480 + 101f395
commit 2bedecd
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 55 deletions.
diff --git a/bluenps/src/app/app.module.ts b/bluenps/src/app/app.module.ts
@@ -7,13 +7,15 @@ import { AppComponent } from './app.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { SignupsComponent } from './signups/signups.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
-    DeleteComponent,
-    HomePageComponent,
+    //DeleteComponent,
+    //HomePageComponent,
+    //SignupsComponent,
   ],
   imports: [
     HttpClientModule,

diff --git a/bluenps/src/app/backend.service.ts b/bluenps/src/app/backend.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders} from '@angular/common/http';
 import { environment } from 'src/environments/environment';
+import { Observable } from 'rxjs';
 
 export type signup = {
   index: number;
@@ -27,10 +28,10 @@ export class BackendService {
   getAllData( ){
     console.log("test");
     return this.http.get<signup[]>(this.url);
-
-
   }
 
+
+
   postSignup(newPlayer:signupPost){
     console.log(newPlayer);
     var headers = new HttpHeaders().set("Content-Type", "application/json; charset=utf-8");
@@ -44,6 +45,6 @@ export class BackendService {
     headers = headers.set("nameQuery", regexString);
     console.log(headers);
     return this.http.delete(this.url + "delete", {headers: headers});
-
   }
+
 }
diff --git a/bluenps/src/app/delete/delete.component.ts b/bluenps/src/app/delete/delete.component.ts
@@ -4,7 +4,8 @@ import { BackendService } from '../backend.service';
 @Component({
   selector: 'app-delete',
   templateUrl: './delete.component.html',
-  styleUrls: ['./delete.component.css']
+  styleUrls: ['./delete.component.css'],
+  standalone:true,
 })
 export class DeleteComponent {
   constructor(private backendService: BackendService){}

diff --git a/bluenps/src/app/home-page/home-page.component.html b/bluenps/src/app/home-page/home-page.component.html
@@ -1,50 +1,3 @@
 <html>
-
-  <div class="row">
-    <div class="col border border-danger">
-      Blue
-    </div>
-    <div class="col border border-danger">
-      NPS
-    </div>
-  </div>
-  <div class="container">
-    <div class="mt-3 mb-3">
-      <select class="form-select" aria-label="courtSelection" id="courtSelection">
-        <option value="nps" selected="selected">NPS</option>
-        <option value="blue">BLUE</option>
-      </select>
-      <label for="nameInput" class="form-label">Name:</label>
-      <input class="form-control" id="nameInput" placeholder="CuteDaisey">
-      <button type="button" class="btn btn-success" (click)="submitCourtName()">submit</button>
-    </div>
-  </div>
-
-
-
-  <div class="container">
-    <div class="row">
-      <div class="col">
-        <div class="border border-success" *ngFor="let player of npsdata">
-          <div class="row">
-            <div class="col">{{player.name}}</div>
-            <div class="col">{{player.time}}</div>
-            <div class="col">{{player.court}}</div>
-            <div class="col"> <button type="button" class="btn btn-danger" (click) = "deletePlayer(player)">remove</button></div>
-          </div> 
-        </div>
-      </div>  
-      <div class="col">
-        <div class="border border-primary" *ngFor="let player of bluedata">
-          <div class="row">
-            <div class="col">{{player.name}}</div>
-            <div class="col">{{player.time}}</div>
-            <div class="col">{{player.court}}</div>
-            <div class="col"> <button type="button" class="btn btn-danger" (click) = "deletePlayer(player)">remove</button> </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
+  <app-signups></app-signups>  
 </html>
diff --git a/bluenps/src/app/home-page/home-page.component.ts b/bluenps/src/app/home-page/home-page.component.ts
@@ -3,10 +3,15 @@ import {formatDate} from '@angular/common';
 import { HttpClient, HttpResponse } from  '@angular/common/http';
 import {signup, BackendService, signupPost } from '../backend.service';
 import { RouterModule } from '@angular/router';
+import { SignupsComponent } from '../signups/signups.component';
+
+
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.css']
+  styleUrls: ['./home-page.component.css'],
+  standalone: true,
+  imports: [SignupsComponent]
 })
 export class HomePageComponent implements OnInit {
   title = 'bluenps';

diff --git a/bluenps/src/app/signups/signups.component.css b/bluenps/src/app/signups/signups.component.css
@@ -0,0 +1,15 @@
+.bluecourt{
+    background-color: rgb(0, 247, 255);
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.npscourt{
+    background-color: rgb(0,255,0);
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.tablestyle{
+    background-color: rgb(255, 165, 0);
+}
diff --git a/bluenps/src/app/signups/signups.component.html b/bluenps/src/app/signups/signups.component.html
@@ -0,0 +1,50 @@
+<div class="tablestyle">
+
+
+    <div class="row">
+        <div class="col border border-danger">
+        Blue
+        </div>
+        <div class="col border border-danger">
+        NPS
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="mt-3 mb-3">
+        <select class="form-select" aria-label="courtSelection" id="courtSelection">
+            <option value="nps" selected="selected">NPS</option>
+            <option value="blue">BLUE</option>
+        </select>
+        <label for="nameInput" class="form-label">Name:</label>
+        <input class="form-control" id="nameInput" placeholder="CuteDaisey">
+        <button type="button" class="btn btn-success" (click)="submitCourtName()">submit</button>
+        </div>
+    </div>
+
+
+    <div class="container pt-3 pb-3">
+        <div class="row">
+        <div class="col">
+            <div class="container npscourt border border-dark" *ngFor="let player of npsdata">
+                <div class="row ml-0">
+                    <div class="col">{{player.name}}</div>
+                    <div class="col">{{player.time}}</div>
+                    <div class="col">{{player.court}}</div>
+                    <div class="col"> <button type="button" class="btn btn-danger" (click) = "deletePlayer(player)">remove</button></div>
+                </div> 
+            </div>
+        </div>  
+        <div class="col">
+            <div class="container bluecourt border border-dark" *ngFor="let player of bluedata">
+                <div class="row  mr-0">
+                    <div class="col">{{player.name}}</div>
+                    <div class="col">{{player.time}}</div>
+                    <div class="col">{{player.court}}</div>
+                    <div class="col"> <button type="button" class="btn btn-danger" (click) = "deletePlayer(player)">remove</button> </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/bluenps/src/app/signups/signups.component.spec.ts b/bluenps/src/app/signups/signups.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupsComponent } from './signups.component';
+
+describe('SignupsComponent', () => {
+  let component: SignupsComponent;
+  let fixture: ComponentFixture<SignupsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SignupsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SignupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/bluenps/src/app/signups/signups.component.ts b/bluenps/src/app/signups/signups.component.ts
@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+import {formatDate, NgFor} from '@angular/common';
+import { HttpClient, HttpResponse } from  '@angular/common/http';
+import {signup, BackendService, signupPost } from '../backend.service';
+
+@Component({
+  selector: 'app-signups',
+  templateUrl: './signups.component.html',
+  styleUrl: './signups.component.css',
+  standalone: true,
+  imports:[NgFor]
+})
+
+export class SignupsComponent {
+  data: signup[]= [{index: 0, name: "uninitialized", court: "uninitialized", time: "please wait"}];
+  npsdata: signup[]= [{index: 0,name: "nps", court: "uninitialized", time: "please wait"}];
+  bluedata: signup[] = [{index: 0,name: "blue", court: "uninitialized", time: "please wait"}];
+
+  constructor(private http: HttpClient, private backendService: BackendService){}
+
+  ngOnInit(){
+    this.refreshData();
+  }
+
+  refreshData(){
+    console.log("refreshing data");
+    this.backendService.getAllData()
+    .subscribe( data => this.setData(data));
+  }
+
+
+  setData(data:signup[]){
+    this.data = data;
+    this.npsdata = data.filter((activity) => activity.court === "nps");
+    this.bluedata = data.filter((activity) => activity.court === "blue");
+  }
+  submitCourtName(): void{
+    var e = (document.getElementById("courtSelection") as HTMLInputElement);
+    var court = e.value;
+    var name = (document.getElementById("nameInput") as HTMLInputElement).value;
+    var date = new Date();
+    if(name==undefined || date==undefined || court == undefined){
+      alert("error");
+      return;
+    }
+    var dateString = formatDate(date, "yyyy-MM-dd", 'en')
+
+    var newSignup:signupPost = {
+                "name" : name,
+                "time" : dateString,
+                "court" : court
+    }
+    this.backendService.postSignup(newSignup).subscribe({
+      next: (value) =>this.refreshData(),
+      error:(e)=>{console.log("error",e); this.refreshData()}}
+    )
+    this.refreshData();
+  }
+  deletePlayer(player: signup): void{
+    this.backendService.deleteData(player.name).subscribe(
+      {
+        next: (value) => {this.refreshData();},
+        error: (e) => {console.log("errordeleting:", e);this.refreshData();}
+      }
+    )
+  }
+}
diff --git a/bluenpsbackend/db.sqlite3 b/bluenpsbackend/db.sqlite3