Countdown added

ui/angular.json

@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],

ui/package.json

@@ -16,11 +16,14 @@
     "@angular/compiler": "~13.1.0",
     "@angular/core": "~13.1.0",
     "@angular/forms": "~13.1.0",
+    "@angular/localize": "~13.1.0",
     "@angular/material": "^13.1.1",
     "@angular/platform-browser": "~13.1.0",
     "@angular/platform-browser-dynamic": "~13.1.0",
     "@angular/router": "~13.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
     "auth0-js": "^9.18.0",
+    "bootstrap": "^4.6.0",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

ui/src/app/app.component.html

@@ -1,2 +1,16 @@
 
+<app-navbar></app-navbar>
+
+<div class="section-heading-page">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12">
+          <h1 class="heading-page">Annika &amp; Damian</h1>
+          <div class="subtitle-page text-center mt-10">04.10.2022</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
 <app-besucher></app-besucher>
+<app-countdown></app-countdown>

ui/src/app/app.module.ts

@@ -10,12 +10,17 @@ import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { BesucherComponent } from './besucher/besucher.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CountdownComponent } from './countdown/countdown.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    BesucherComponent
+    BesucherComponent,
+    CountdownComponent,
+    NavbarComponent
   ],
   imports: [
     BrowserModule,
@@ -23,7 +28,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     FormsModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    MatRadioModule
+    MatRadioModule,
+    NgbModule
   ],
   providers: [],
   bootstrap: [AppComponent]

ui/src/app/countdown/countdown.component.css

@@ -0,0 +1,121 @@
+.content-coming-soon {
+	position: relative;
+	width: 100%;
+}
+#coming-soon {
+	position: absolute;
+	top: -50px;
+	left: 50%;
+	margin-left: -230px;
+}
+.coming-soon-wrapper {
+	width: 100px;
+	border-radius: 50%;
+	height: 100px;
+}
+.coming-soon-time {
+	font-size: 44px;
+	font-weight: 100;
+	line-height: 64px;
+}
+.coming-soon-date {
+    line-height: 14px;
+	display:block;
+	font-size: 16px;
+}
+
+
+.wrapper-table {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.wrapper-table {
+    display: table;
+}
+
+.wrapper-table-cell {
+    display: table-cell;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.content-coming-soon {
+    height: auto;
+    margin: auto;
+}
+
+.coming-soon-wrapper {
+  text-align:center;
+  background-color:#fff;
+  padding: 0px;
+  display:inline-block;
+  color:white;
+}
+
+.coming-soon-wrapper-transparent {
+  text-align:center;
+  background-color:rgba(0,0,0,0.6);
+  padding:20px;
+  display:inline-block;
+  color:white;
+}
+.coming-soon-wrapper+.coming-soon-wrapper,
+.coming-soon-wrapper-transparent+.coming-soon-wrapper-transparent {
+  margin-left:16px;
+}
+
+@media (max-width: 992px) {
+	/*
+      .coming-soon-wrapper,
+    .coming-soon-wrapper-transparent {
+          padding-p: 20px;
+      }
+      /*.coming-soon-time {
+          font-size: 48px;
+          line-height: 60px;
+      }
+      .coming-soon-date {
+          line-height: 20px;
+          font-size: 15px;
+      }*/
+	#coming-soon {
+		top: -64px;
+    	margin-left: -228px;
+	}
+}
+
+@media (max-width: 767px) {
+  
+	.coming-soon-wrapper,
+  .coming-soon-wrapper-transparent {
+		width: 64px; /* 160, 128, 64 */
+		border-radius: 35px;
+		height: 64px;
+		padding-top: 10px;
+	}
+	.coming-soon-time {
+		font-size: 24px; /* 60, 48, 24 */
+		line-height: 30px;
+	}
+	.coming-soon-date {
+		line-height: 15px;
+		font-size: 11px;  /* 18, 15, 13 */
+	}
+	#coming-soon {
+		top: -32px;
+    	margin-left: -150px;
+	}
+
+  .coming-soon-wrapper+.coming-soon-wrapper,
+  .coming-soon-wrapper-transparent+.coming-soon-wrapper-transparent {
+    margin-left:8px;
+  }
+
+  .coming-soon-date {
+    display:block;
+  }
+}

ui/src/app/countdown/countdown.component.html

@@ -0,0 +1,20 @@
+<div id="content" class="content-comming-soon">
+<div id="comming-soon" class="text-theme">
+    <div class="comming-soon-wrapper">
+        <span class="comming-soon-time">{{Counter.Tage}}</span>
+        <span class="comming-soon-date">Tage</span>
+    </div>
+    <div class="comming-soon-wrapper">
+        <span class="comming-soon-time">{{Counter.Stunden}}</span>
+        <span class="comming-soon-date">Std.</span>
+    </div>
+    <div class="comming-soon-wrapper">
+        <span class="comming-soon-time">{{Counter.Minuten}}</span>
+        <span class="comming-soon-date">Min.</span>
+    </div>
+    <div class="comming-soon-wrapper">
+        <span class="comming-soon-time">{{Counter.Sekunden}}</span>
+        <span class="comming-soon-date">Sek.</span>
+    </div>
+</div>
+</div>

ui/src/app/countdown/countdown.component.spec.ts

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

ui/src/app/countdown/countdown.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-countdown',
+  templateUrl: './countdown.component.html',
+  styleUrls: ['./countdown.component.css']
+})
+export class CountdownComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  countDownDate = new Date("Aug 20, 2022 13:00:00").getTime();
+  Counter = new CountDown();
+  x = setInterval(() => {
+    var now = new Date().getTime();
+    var distance = this.countDownDate -  now;
+    var days = Math.floor(distance /(1000*60*60*24));
+    var hours = Math.floor((distance % (1000*60*60*24)) / (1000*60*60));
+    var minutes = Math.floor((distance % (1000*60*60)) / (1000*60));
+    var seconds = Math.floor((distance % (1000*60)) / 1000);
+    
+    this.Counter.Tage = days;
+    this.Counter.Stunden = hours;
+    this.Counter.Minuten = minutes;
+    this.Counter.Sekunden = seconds;
+  })
+}
+
+export class CountDown {
+  Tage: number;
+  Stunden: number;
+  Minuten: number;
+  Sekunden: number;
+  
+  constructor() {
+    this.Tage = 0;
+    this.Stunden = 0;
+    this.Minuten = 0;
+    this.Sekunden = 0;
+  }
+}

ui/src/app/navbar/navbar.component.html

@@ -0,0 +1,59 @@
+<p>Navbar works</p>
+<!-- NAVBAR -->
+    <!--===============================================================-->
+    <nav class="navbar fixed-top navbar-expand-sm justify-content-center navbar-light bg-light">
+        
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="#">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Unser Fest</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Bilder</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Wunschbüechli</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Anmeldung zum Fest</a>
+              </li>
+        </ul>
+    </nav>
+    
+      <!-- NAVBAR END -->
+
+      <br />
+      <br />
+
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+
+      <br />
+      <br />
+
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />

ui/src/app/navbar/navbar.component.spec.ts

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

ui/src/app/navbar/navbar.component.ts

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

ui/src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.