feat: implement fab on events list

src/app/app.module.ts

@@ -36,6 +36,7 @@ import {MessagesComponent} from './components/messages/messages.component';
 import {ConfirmEmailComponent} from './pages/u/confirm-email/confirm-email.component';
 import {ConfirmPasswordComponent} from './pages/u/confirm-password/confirm-password.component';
 import { ChangePasswordComponent } from './pages/admin/change-password/change-password.component';
+import { NewEventButtonComponent } from './components/new-event-button/new-event-button.component';
 
 export function jwtOptionsFactory(authService: AuthenticationService) {
     return {
@@ -82,7 +83,8 @@ export function jwtOptionsFactory(authService: AuthenticationService) {
         MessagesComponent,
         ConfirmEmailComponent,
         ConfirmPasswordComponent,
-        ChangePasswordComponent
+        ChangePasswordComponent,
+        NewEventButtonComponent
     ],
     imports: [
         BrowserModule,

src/app/components/new-event-button/new-event-button.component.html

@@ -0,0 +1,13 @@
+<div class="fab" #fab>
+    <div class="fab-inner">
+        <div class="fab-menu" [routerLink]="'/u/events'">
+            registrar in’occurrenza
+        </div>
+        <a href="#" class="fab-button" #button>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M16 6.48756V9.47263H9.52099V16H6.43951V9.47263H0V6.48756H6.43951V0H9.52099V6.48756H16Z"
+                      fill="white"/>
+            </svg>
+        </a>
+    </div>
+</div>

src/app/components/new-event-button/new-event-button.component.scss

@@ -0,0 +1,67 @@
+.fab {
+  display: block;
+  position: fixed;
+  bottom: 45px;
+  right: 45px;
+  z-index: 999999999;
+
+  .fab-button {
+    display: block;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    background: var(--accent);
+    color: #fff;
+    line-height: 60px;
+    position: absolute;
+    border-radius: 50% 50%;
+    bottom: 0;
+    right: 0;
+    opacity: 1;
+    transition: all 0.4s;
+
+    svg {
+      transform: rotate(0deg);
+      transition: all 0.4s;
+    }
+  }
+
+  .fab-menu {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    /* width: 200px; */
+    display: none;
+    height: 60px;
+    padding-left: 30px;
+    padding-right: 80px;
+    font-size: 1.25rem;
+    background-color: #8AD9C8;
+    white-space: nowrap;
+    align-items: center;
+    color: white;
+    border-radius: 30px;
+    cursor: pointer;
+  }
+}
+
+.fab.open .fab-menu {
+  display: flex;
+  align-items: center;
+}
+
+.fab.open .fab-button svg {
+  transform: rotate(315deg);
+}
+
+.fab-inner {
+  position: relative;
+}
+
+
+
+
+
+
+
+

src/app/components/new-event-button/new-event-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewEventButtonComponent } from './new-event-button.component';
+
+describe('NewEventButtonComponent', () => {
+  let component: NewEventButtonComponent;
+  let fixture: ComponentFixture<NewEventButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NewEventButtonComponent]
+    });
+    fixture = TestBed.createComponent(NewEventButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/new-event-button/new-event-button.component.ts

@@ -0,0 +1,26 @@
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+
+@Component({
+    selector: 'app-new-event-button',
+    templateUrl: './new-event-button.component.html',
+    styleUrls: ['./new-event-button.component.scss']
+})
+export class NewEventButtonComponent implements AfterViewInit {
+    @ViewChild('fab') fab?: ElementRef;
+    @ViewChild('button') button?: ElementRef;
+
+    constructor() {
+
+    }
+
+    ngAfterViewInit(): void {
+        if (this.button) {
+            this.button.nativeElement.addEventListener('click', (e: any) => {
+                e.preventDefault();
+                if (this.fab) {
+                    this.fab.nativeElement.classList.toggle('open');
+                }
+            });
+        }
+    }
+}

src/app/pages/events/events-list/events-list.component.html

@@ -65,3 +65,5 @@ <h2>{{cat.formattedDate}}</h2>
     <button class="clndr load-next-page" (click)="loadNextPage()" *ngIf="hasMorePages">mussar ulteriuras occurrenzas
     </button>
 </div>
+
+<app-new-event-button/>

src/app/pages/u/events/events.component.ts

@@ -1,14 +1,21 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Router} from "@angular/router";
+import {AuthenticationService} from "../../../services/authentication.service";
 
 @Component({
     selector: 'app-events',
     templateUrl: './events.component.html',
     styleUrls: ['./events.component.scss']
 })
-export class EventsComponent {
+export class EventsComponent implements OnInit {
 
-    constructor(private router: Router) {
+    constructor(private router: Router, private authService: AuthenticationService) {
+    }
+
+    ngOnInit() {
+        if (this.authService.isLoggedIn()) {
+            this.createEvent();
+        }
     }
 
     login(): void {