rearrange user-input card and add auto-refresh component

projects/project-3/frontend/src/app/app.module.ts

@@ -24,13 +24,15 @@ import {MatNativeDateModule} from '@angular/material/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatTableModule} from '@angular/material/table';
+import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MapComponent,
     DashboardComponent,
-    PopUpComponent
+    PopUpComponent,
+    AutoRefreshComponent
   ],
   imports: [
     BrowserModule,

projects/project-3/frontend/src/app/dashboard/dashboard.component.html

@@ -19,15 +19,33 @@
     <div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
 
       <div class="input-container" fxFlex="35%" fxLayout="column">
-        <div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between">
+        <mat-card fxFlex fxLayout="column">
-          <div class="container-info" fxFlex="55%">
+          <mat-card-header fxFlex="15%">
-            <mat-card fxFlex="100%">
-              <mat-card-header>
             <div class="example-header-image" mat-card-avatar></div>
             <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
           </mat-card-header>
-              <mat-card-content>
+          <mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-evenly">
-                <div class="chart-bikepoint-availability">
+            <div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
+              <form [formGroup]="form">
+                <mat-form-field appearance="fill" class="datepicker">
+                  <mat-label>Enter a range</mat-label>
+                  <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
+                                        formGroupName="daterange">
+                    <input formControlName="start" matStartDate placeholder="Start date">
+                    <input formControlName="end" matEndDate placeholder="End date">
+                  </mat-date-range-input>
+                  <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                  <mat-date-range-picker #picker></mat-date-range-picker>
+                </mat-form-field>
+              </form>
+              <div class="submit-date">
+                <button (click)="onSubmit()" color="primary" mat-raised-button>
+                  <mat-icon>dashboard</mat-icon>
+                  <span id="submit-date-span"> reload</span>
+                </button>
+              </div>
+            </div>
+            <div class="chart-bikepoint-availability" fxFlex fxLayout="column">
               <div id="chart">
                 <apx-chart
                   [chart]="bikePointChartOptions.chart"
@@ -48,34 +66,7 @@
           </mat-card-content>
         </mat-card>
       </div>
-          <div class="mat-card-info" fxFlex="40%" fxLayout="column" fxLayoutAlign="center center">
+      <mat-card class="mat-card-map" fxFlex>
-            <mat-card>
-              <mat-card-content>
-                <form [formGroup]="form">
-                  <mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
-                    <mat-label>Enter a range</mat-label>
-                    <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
-                                          formGroupName="daterange">
-                      <input formControlName="start" matStartDate placeholder="Start date">
-                      <input formControlName="end" matEndDate placeholder="End date">
-                    </mat-date-range-input>
-                    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-                    <mat-date-range-picker #picker></mat-date-range-picker>
-                  </mat-form-field>
-                </form>
-                <div class="submit-date" fxLayout="row" fxLayoutAlign="center">
-                  <button (click)="onSubmit()" color="primary" mat-raised-button>
-                    <mat-icon>dashboard</mat-icon>
-                    <span id="submit-date-span"> reload dashboard</span>
-                  </button>
-                </div>
-              </mat-card-content>
-            </mat-card>
-          </div>
-        </div>
-      </div>
-
-      <mat-card class="mat-card-map" fxFlex fxLayout="row">
         <div class="mini-map" fxFlex>
           <div class="map-frame" fxFill>
             <div fxFill id="minimap"></div>

projects/project-3/frontend/src/app/dashboard/dashboard.component.scss

@@ -14,28 +14,14 @@ a {
   background: #086ed2;
 }
 
+.submit-date {
+  margin-bottom: 15px;
+}
+
 #chart {
   margin-right: 16px;
 }
 
-#submit-date-span {
-  padding: 10px;
-}
-
-.user-input {
-  height: 10em;
-}
-
-.datepicker {
-  margin-top: 2em;
-  margin-left: 1em;
-  margin-right: 1em
-}
-
-.submit-date {
-  padding-bottom: 2em;
-}
-
 .mat-card {
   padding: 1px 1px 1px;
   margin: 10px;

projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.html

@@ -0,0 +1 @@
+<p>auto-refresh works!</p>

projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AutoRefreshComponent } from './auto-refresh.component';
+
+describe('AutoRefreshComponent', () => {
+  let component: AutoRefreshComponent;
+  let fixture: ComponentFixture<AutoRefreshComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AutoRefreshComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AutoRefreshComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-auto-refresh',
+  templateUrl: './auto-refresh.component.html',
+  styleUrls: ['./auto-refresh.component.scss']
+})
+export class AutoRefreshComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}