From 8095fa360173ee3131508d05cb38bb03c0c0ed07 Mon Sep 17 00:00:00 2001 From: luke Date: Sun, 16 Jun 2024 02:19:39 +0200 Subject: [PATCH] provide the animations --- src/main/webui/package-lock.json | 8 ++++- src/main/webui/package.json | 3 +- src/main/webui/src/app/app.component.html | 4 +-- src/main/webui/src/app/app.component.ts | 36 +++++++++++++---------- src/main/webui/src/app/app.config.ts | 7 ++++- src/main/webui/src/styles.css | 1 + 6 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/main/webui/package-lock.json b/src/main/webui/package-lock.json index 416e9d4..e95fdf3 100644 --- a/src/main/webui/package-lock.json +++ b/src/main/webui/package-lock.json @@ -8,7 +8,7 @@ "name": "webui", "version": "0.0.0", "dependencies": { - "@angular/animations": "^18.0.0", + "@angular/animations": "^18.0.3", "@angular/common": "^18.0.0", "@angular/compiler": "^18.0.0", "@angular/core": "^18.0.0", @@ -16,6 +16,7 @@ "@angular/platform-browser": "^18.0.0", "@angular/platform-browser-dynamic": "^18.0.0", "@angular/router": "^18.0.0", + "primeicons": "^7.0.0", "primeng": "^17.18.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -10086,6 +10087,11 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/primeicons": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz", + "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==" + }, "node_modules/primeng": { "version": "17.18.1", "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.18.1.tgz", diff --git a/src/main/webui/package.json b/src/main/webui/package.json index 849e2ae..779569b 100644 --- a/src/main/webui/package.json +++ b/src/main/webui/package.json @@ -10,7 +10,7 @@ }, "private": true, "dependencies": { - "@angular/animations": "^18.0.0", + "@angular/animations": "^18.0.3", "@angular/common": "^18.0.0", "@angular/compiler": "^18.0.0", "@angular/core": "^18.0.0", @@ -18,6 +18,7 @@ "@angular/platform-browser": "^18.0.0", "@angular/platform-browser-dynamic": "^18.0.0", "@angular/router": "^18.0.0", + "primeicons": "^7.0.0", "primeng": "^17.18.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/src/main/webui/src/app/app.component.html b/src/main/webui/src/app/app.component.html index 1d0dca4..24b52c8 100644 --- a/src/main/webui/src/app/app.component.html +++ b/src/main/webui/src/app/app.component.html @@ -7,8 +7,6 @@

Create object

- + diff --git a/src/main/webui/src/app/app.component.ts b/src/main/webui/src/app/app.component.ts index d2ffa02..604c5a8 100644 --- a/src/main/webui/src/app/app.component.ts +++ b/src/main/webui/src/app/app.component.ts @@ -1,10 +1,15 @@ -import {Component, OnInit} from '@angular/core'; +import {Component} from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import {PaginatorModule} from "primeng/paginator"; import { InputTextModule } from 'primeng/inputtext'; import { DropdownModule } from 'primeng/dropdown'; -import {SelectItem} from "primeng/api"; + + +interface City { + name: string, + code: string +} @Component({ selector: 'app-root', @@ -13,22 +18,21 @@ import {SelectItem} from "primeng/api"; templateUrl: './app.component.html', styleUrl: './app.component.css' }) -export class AppComponent implements OnInit { - selectedOption: SelectItem | undefined; - options:SelectItem[]; + + +export class AppComponent { + cities: City[]; + + selectedCity1: City; constructor() { - this.options = [ - { label: "GET", value: "GET" }, - { label: "POST", value: "POST" }, - { label: "PUT", value: "PUT" }, - { label: "DELETE", value: "DELETE" }, - { label: "HEAD", value: "HEAD" }, - { label: "CONNECT", value: "CONNECT" }, - { label: "OPTIONS", value: "OPTIONS" }, - { label: "TRACE", value: "TRACE" }, - { label: "PATCH", value: "PATCH" } + this.cities = [ + {name: 'New York', code: 'NY'}, + {name: 'Rome', code: 'RM'}, + {name: 'London', code: 'LDN'}, + {name: 'Istanbul', code: 'IST'}, + {name: 'Paris', code: 'PRS'} ]; + this.selectedCity1 = this.cities[0] } - ngOnInit() {} } diff --git a/src/main/webui/src/app/app.config.ts b/src/main/webui/src/app/app.config.ts index a1e7d6f..79059f4 100644 --- a/src/main/webui/src/app/app.config.ts +++ b/src/main/webui/src/app/app.config.ts @@ -2,7 +2,12 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; +import {provideAnimations} from "@angular/platform-browser/animations"; export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + provideAnimations() + ], }; diff --git a/src/main/webui/src/styles.css b/src/main/webui/src/styles.css index 5f2e635..4dc0fbb 100644 --- a/src/main/webui/src/styles.css +++ b/src/main/webui/src/styles.css @@ -1,3 +1,4 @@ /* You can add global styles to this file, and also import other style files */ +@import "primeicons/primeicons.css"; @import "primeng/resources/themes/aura-dark-blue/theme.css"; /* This line defines the global primeAngular theme*/ @import "primeng/resources/primeng.css";