transfer 2 angular

2024-02-13 17:34:08 +01:00
parent 0ec827f8ed
commit e47088a33e
27 changed files with 453 additions and 1247 deletions
@@ -1,4 +1,4 @@
-# Landingpage
+# AngUniversityHttpclient

 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.

@@ -3,7 +3,7 @@
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
-    "landingpage": {
+    "ang-university-httpclient": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
@@ -23,7 +23,7 @@
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
-            "outputPath": "dist/landingpage",
+            "outputPath": "dist/ang-university-httpclient",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
@@ -35,9 +35,8 @@
              "src/assets"
            ],
            "styles": [
-              "@angular/material/prebuilt-themes/indigo-pink.css",
-              "node_modules/bootstrap5/src/css/bootstrap.min.css",
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap5/src/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap5/src/js/bootstrap.bundle.min.js"
@@ -71,10 +70,10 @@
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
-              "buildTarget": "landingpage:build:production"
+              "buildTarget": "ang-university-httpclient:build:production"
            },
            "development": {
-              "buildTarget": "landingpage:build:development"
+              "buildTarget": "ang-university-httpclient:build:development"
            }
          },
          "defaultConfiguration": "development"
@@ -82,7 +81,7 @@
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "buildTarget": "landingpage:build"
+            "buildTarget": "ang-university-httpclient:build"
          }
        },
        "test": {
@@ -98,7 +97,6 @@
              "src/assets"
            ],
            "styles": [
-              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": []
@@ -1,5 +1,5 @@
 {
-  "name": "landingpage",
+  "name": "ang-university-httpclient",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
@@ -11,23 +11,23 @@
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.1.0",
-    "@angular/cdk": "^17.1.1",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/forms": "^17.1.0",
-    "@angular/material": "^17.1.1",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
+    "@types/lodash": "^4.14.202",
    "bootstrap5": "^1.1.9",
+    "lodash": "^4.17.21",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.1.0",
-    "@angular/cli": "^17.1.1",
+    "@angular/cli": "^17.1.0",
    "@angular/compiler-cli": "^17.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
@@ -1,16 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { ListLinksComponent } from './list-links/list-links.component';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { LinksComponent } from './links/links.component';

 const routes: Routes = [
-  { path: '', redirectTo: 'list-links', pathMatch: 'full' },
-  { path: 'list-links', component:ListLinksComponent },
-  { path: '**', component: PageNotFoundComponent }
+  { path: '', redirectTo: '/list-links', pathMatch: 'full'},
+  { path: 'list-links', component:LinksComponent }
 ];

@NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
 })
 export class AppRoutingModule { }
@@ -1,25 +1,24 @@
-<nav class="navbar navbar-expand-lg bg-body-tertiary" >
-  <div class="container-fluid">
-    <a class="navbar-brand" href="hallo">Navbar</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavAltMarkup" data-bs-theme="dark">
-      <div class="navbar-nav">
+<header>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container">
+      <a href="#" class="navbar-brand">
+        <img src="assets/img/net-so.org.logo.png" alt="" width="100" class="d-inline-block align-text-center">
+        Net-So.Org
+      </a>
+    </div>
+  </nav>

-        <a class="nav-link" routerLink="/list-links" routerLinkActive="active" ariaCurrentWhenActive="page">Internal Links</a>
+</header>


-      </div>
-    </div>
-  </div>
-</nav>
-<div class="container-fluid text-center">
-<!-- The routed views render in the <router-outlet>-->
+<div class="container">
  <router-outlet></router-outlet>
 </div>

-
-<footer class="container-fluid text-center">
-  <p>Footer Text</p>
+<footer>
+  <div class="container bg-light text-center">
+    Most of the stuff people worry about ain’t never gonna happen anyway.
+  </div>
 </footer>
+
+
@@ -20,16 +20,16 @@ describe('AppComponent', () => {
    expect(app).toBeTruthy();
  });

-  it(`should have as title 'landingpage'`, () => {
+  it(`should have as title 'ang-university-httpclient'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
-    expect(app.title).toEqual('landingpage');
+    expect(app.title).toEqual('ang-university-httpclient');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, landingpage');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, ang-university-httpclient');
  });
 });
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
  styleUrl: './app.component.css'
 })
 export class AppComponent {
-  title = 'landingpage';
+  title = 'ang-university-httpclient';
 }
@@ -1,29 +1,21 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';

-import { MatGridListModule } from '@angular/material/grid-list';
-import {MatSidenavModule} from '@angular/material/sidenav';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
-import { ListLinksComponent } from './list-links/list-links.component';
+import { HttpClientModule } from '@angular/common/http';
+import { LinksComponent } from './links/links.component';
+import * as _ from 'lodash';

@NgModule({
  declarations: [
    AppComponent,
-    PageNotFoundComponent,
-    ListLinksComponent,
-    PageNotFoundComponent,
-    ListLinksComponent
+    LinksComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatGridListModule,
-    MatSidenavModule
+    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LinksService } from './links.service';
+
+describe('LinksService', () => {
+  let service: LinksService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LinksService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Links } from './links';
+import { Observable } from 'rxjs';
+import * as _ from 'lodash';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LinksService {
+
+  constructor(private http: HttpClient) { }
+    private apiUrl = 'http://10.0.0.104:8055/items/landingpage';
+    public apiKey = 'KGjpxZ3tesmhEXHS7C7JbKDyW6YJlgQT';
+
+    httpOptions = {
+      headers: new HttpHeaders({
+        'Authorization': `Bearer ${this.apiKey}`,
+      }),
+    };
+
+    getLinks(): Observable<Links> {
+      return this.http
+        .get<Links>(this.apiUrl, this.httpOptions)
+
+
+    }
+}
@@ -1,9 +1,8 @@
-export interface Applications {
+export interface Links {
  id: string;
  name: string;
  beschreibung: string;
  bild: string;
  link: string;
-  link_zu_software: string;
-  status: string
+  link_zu_software: string
 }
@@ -0,0 +1,14 @@
+
+<div class="card"  *ngFor="let link of linkList">
+  <a href="{{ link.link }}" target="_blank" class="card-link">
+    <img src="http://10.0.0.104:8055/assets/{{ link.bild }}?access_token={{ apiKey }}&width=200" alt=" {{ link.name }}" style="width:200px" >
+  </a>
+  <div class="card-body">
+    <h5 class="card-title"> {{ link.name }} </h5>
+    <p class="card-text">{{ link.beschreibung }}</p>
+
+    <a href="{{ link.link_zu_software }}" target="_blank" class="card-link">Website: {{ link.name }}</a>
+  </div>
+</div>
+
+
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { ListLinksComponent } from './list-links.component';
+import { LinksComponent } from './links.component';

-describe('ListLinksComponent', () => {
-  let component: ListLinksComponent;
-  let fixture: ComponentFixture<ListLinksComponent>;
+describe('LinksComponent', () => {
+  let component: LinksComponent;
+  let fixture: ComponentFixture<LinksComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ListLinksComponent]
+      declarations: [LinksComponent]
    })
    .compileComponents();
    
-    fixture = TestBed.createComponent(ListLinksComponent);
+    fixture = TestBed.createComponent(LinksComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
@@ -0,0 +1,30 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { LinksService } from '../links.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-links',
+  templateUrl: './links.component.html',
+  styleUrl: './links.component.css'
+})
+export class LinksComponent implements OnInit {
+
+  linkList: any = [];
+  apiKey = this.linkservice.apiKey;
+
+  constructor (public linkservice: LinksService) {}
+
+  ngOnInit(): void {
+      this.getLinks();
+  }
+
+  getLinks() {
+    return this.linkservice.getLinks().subscribe((data: any) => {
+      this.linkList = data.data;
+      this.apiKey;
+      console.log(this.linkList);
+
+    });
+  }
+
+}
@@ -1,3 +0,0 @@
-mat-grid-tile {
-  background: lightblue;
-}
@@ -1,2 +0,0 @@
-<p>works</p>
-
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-list-links',
-  templateUrl: './list-links.component.html',
-  styleUrl: './list-links.component.css'
-})
-export class ListLinksComponent {
-
-}
@@ -1,7 +0,0 @@
-<h1>Seite nicht gefunden</h1>
-<div>
-  <img src="../assets/pics/the_end.jpg" alt="This is the End">
-</div>
-<div>
-  You have reached the end of the Internet
-</div>
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageNotFoundComponent } from './page-not-found.component';
-
-describe('PageNotFoundComponent', () => {
-  let component: PageNotFoundComponent;
-  let fixture: ComponentFixture<PageNotFoundComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [PageNotFoundComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(PageNotFoundComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-not-found',
-  templateUrl: './page-not-found.component.html',
-  styleUrl: './page-not-found.component.css'
-})
-export class PageNotFoundComponent {
-
-}
@@ -1,15 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
 <head>
  <meta charset="utf-8">
-  <title>Landingpage</title>
+  <title>Homenas Landing Page</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body class="mat-typography">
+<body>
  <app-root></app-root>
 </body>
 </html>
@@ -1,35 +1 @@
 /* You can add global styles to this file, and also import other style files */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
- /* Remove the navbar's default margin-bottom and rounded borders */
- .navbar {
-  margin-bottom: 0;
-  border-radius: 0;
-}
-
-/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
-.row.content {height: 450px}
-
-/* Set gray background color and 100% height */
-.sidenav {
-  padding-top: 20px;
-  background-color: #f1f1f1;
-  height: 100%;
-}
-
-/* Set black background color, white text and some padding */
-footer {
-  background-color: #555;
-  color: white;
-  padding: 15px;
-}
-
-/* On small screens, set height to 'auto' for sidenav and grid */
-@media screen and (max-width: 767px) {
-  .sidenav {
-    height: auto;
-    padding: 15px;
-  }
-  .row.content {height:auto;}
-}