Upload files to "src/app"

src/app/app.component.html

@@ -0,0 +1,56 @@
+<div class="container m-5 mx-auto">
+  <div class="row">
+    <div class="col">
+      <form>
+        <h3> Dane klienta </h3>
+        <div>
+          <div class="mb-1">
+            <label for="imie" class="form-label"> Imię </label>
+            <input type="text" name="imie" id="imie" placeholder="Jan" class="form-control" [(ngModel)]="formImie">
+          </div>
+          <div class="mb-1">
+            <label for="nazwisko" class="form-label"> Nazwisko </label>
+            <input type="text" name="nazwisko" id="nazwisko" placeholder="Kowalski" class="form-control" [(ngModel)]="formNazwisko">
+          </div>
+          <div class="mb-1">
+            <label for="email" class="form-label"> Email </label>
+            <input type="email" name="email" id="email" placeholder="jan@example.com" class="form-control" [(ngModel)]="formEmail">
+          </div>
+        </div>
+
+        <h3 class="mt-4"> Zamówienie </h3>
+        <div>
+          <div class="mb-1">
+            <label for="produkt" class="form-label"> Produkt </label>
+            <select name="produkt" id="produkt" class="form-select" [(ngModel)]="selectedProduct">
+              <option value="null" selected disabled></option>
+              <option value="1"> Produkt 1</option>
+              <option value="2"> Produkt 2</option>
+              <option value="3"> Produkt 3</option>
+            </select>
+          </div>
+          <div class="mb-1">
+            <label for="model" class="form-label"> Model </label>
+            <input type="text" name="model" id="model" class="form-control" [(ngModel)]="formModel">
+          </div>
+          <div class="mb-1">
+            <label for="ilosc" class="form-label"> Ilość </label>
+            <input type="number" name="ilosc" id="ilosc" min="1" max="100" value="1" class="form-control" [(ngModel)]="formIlosc">
+          </div>
+          <div class="text-center mt-3">
+            <input type="reset" value="Resetuj" class="btn btn-danger me-3">
+            <button class="btn btn-primary" (click)="submitForm()"> Zamów</button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div class="col text-center">
+      <button class="btn btn-outline-primary mb-4" (click)="switchTheme()"> Zmień motyw </button>
+      <img [src]="imageSrc">
+    </div>
+
+  </div>
+</div>
+
+<router-outlet/>

src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([])
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'zst-a51-angular-projekt'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('zst-a51-angular-projekt');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, zst-a51-angular-projekt');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  standalone: false,
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'zst-a51-angular-projekt';
+
+  formImie: string = '';
+  formNazwisko: string = '';
+  formEmail: string = '';
+  formModel: string = '';
+  formIlosc: string = '';
+
+
+  selectedProduct: string = '';
+  images: { [key: string]: string } = {
+    "1": 'img1.jpg',
+    "2": 'img2.jpg',
+    "3": 'img3.jpg',
+  };
+
+  switchTheme() {
+    if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
+      document.documentElement.setAttribute('data-bs-theme', 'light');
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', 'dark');
+    }
+  }
+
+  submitForm() {
+    console.log("Imię: " + this.formImie);
+    console.log("Nazwisko: " + this.formNazwisko);
+    console.log("Email: " + this.formEmail);
+    console.log("Produkt: " + this.selectedProduct);
+    console.log("Model: " + this.formModel);
+    console.log("Ilość: " + this.formIlosc);
+  }
+
+  get imageSrc(): string {
+    return this.images[this.selectedProduct];
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import {FormsModule} from "@angular/forms";
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        FormsModule
+    ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }