Merge pull request #33 from rotirk20/development

Added data for presentation and final changes for first public version
rotirk20 · Oct 20, 2024 · d16a33e · d16a33e
2 parents 7623a08 + 6a94ed4
commit d16a33e
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 35 deletions.
diff --git a/frontend/src/app/components/contact/contact-form/contact-form.component.html b/frontend/src/app/components/contact/contact-form/contact-form.component.html
@@ -19,7 +19,7 @@
 >
   <div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
     <h2 class="text-2xl font-bold mb-4">Kontaktirajte nas</h2>
-    <form (ngSubmit)="submitForm()">
+    <form #form="ngForm" (ngSubmit)="submitForm(form)">
       <div class="mb-4">
         <label class="block text-gray-700 font-bold mb-2" for="name"
           >Ime i prezime *</label

diff --git a/frontend/src/app/components/contact/contact-form/contact-form.component.ts b/frontend/src/app/components/contact/contact-form/contact-form.component.ts
@@ -3,7 +3,7 @@ import {
   ContactFormModel,
   ContactFormErrors,
 } from '../../../shared/models/contact-form.model';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgForm } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { ContactService } from 'src/app/shared/services/contact.service';
 
@@ -72,7 +72,7 @@ export class ContactFormComponent {
         : '';
   }
 
-  submitForm() {
+  submitForm(form: NgForm) {
     this.validateForm();
     if (
       this.formErrors.name ||
@@ -87,6 +87,7 @@ export class ContactFormComponent {
       (response) => {
         console.log('Form data successfully submitted:', response);
         this.closeForm();
+        form.resetForm();
       },
       (error) => {
         console.error('Error submitting form:', error);

diff --git a/frontend/src/app/components/location-card/location-card.component.html b/frontend/src/app/components/location-card/location-card.component.html
@@ -1,16 +1,27 @@
-<div class="w-full max-w-5xl mx-auto rounded-xl p-4 sm:flex sm:items-center sm:space-x-6 shadow-md hover:shadow-sm transition-shadow duration-300 mb-4 bg-white cursor-pointer" (click)="onSelectLocation()" [ngClass]="{'shadow-none border-l-8 border-blue-500 text-white' : isSelected}">
-  <img class="block mx-auto h-16 w-16 object-cover rounded-full sm:mx-0 sm:flex-shrink-0" [src]="location.image" alt="">
-  <div class="text-center space-y-2 sm:text-left">
-    <div class="space-y-0.5">
-      <p class="text-lg text-black font-semibold">
-        {{ location.name }}
+<div class="w-full max-w-5xl mx-auto rounded-xl p-4 shadow-md hover:shadow-sm transition-shadow border-l-6  border-white-500 duration-300 mb-4 bg-white cursor-pointer location-list" 
+     (click)="onSelectLocation()" 
+     [ngClass]="{'shadow-none border-blue-500 text-white' : isSelected}">
+
+  <!-- Title -->
+  <h3 class="font-semibold mb-2 uppercase">
+    {{ location.name }}
+  </h3>
+
+  <!-- Content Container -->
+  <div class="sm:flex sm:space-x-6">
+    <!-- Image -->
+    <img class="block h-32 w-32 object-cover rounded-md sm:mx-0 sm:flex-shrink-0" 
+         [src]="location.image" alt="{{ location.name }}">
+
+    <!-- Description and Type -->
+    <div class="space-y-2 flex-1 location-detail mt-2 sm:mt-0">
+      <!-- <span class="text-gray-600 text-slate-500 tracking-widest location-type">
+        {{ location.type }}
+      </span> -->
+      <span class="inline-flex items-center bg-gray-50 px-1 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 tracking-widest location-type">{{ location.type }}</span>
+      <p class="text-gray-600 text-sm text-slate-500 description">
+        {{ location.description | slice:0:300 }}
       </p>
-      <p class="text-gray-500 text-sm text-slate-500 truncate">
-        {{ location.address }}
-      </p>
-      <!-- <p class="text-gray-600 text-sm text-slate-500 truncate">
-        Kategorija: {{ location.type }}
-      </p> -->
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/components/location-card/location-card.component.scss b/frontend/src/app/components/location-card/location-card.component.scss
@@ -0,0 +1,20 @@
+.location-list {
+    font-size: 10px;
+    h3 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #434343;
+    }
+    .location-detail {
+        .description {
+            line-height: 1.3;
+        }
+        .location-type {
+            font-weight: bold;
+            text-transform: uppercase;
+            font-size: 10px;
+            line-height: 1;
+        }
+    }
+
+}
diff --git a/frontend/src/app/components/location-card/location-card.component.ts b/frontend/src/app/components/location-card/location-card.component.ts
@@ -1,11 +1,11 @@
-import { NgClass } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Location } from 'src/app/shared/models/location.model';
 
 @Component({
   selector: 'app-location-card',
   standalone: true,
-  imports: [NgClass],
+  imports: [NgClass, CommonModule],
   templateUrl: './location-card.component.html',
   styleUrls: ['./location-card.component.scss'],
 })

diff --git a/frontend/src/app/components/navbar/navbar.component.html b/frontend/src/app/components/navbar/navbar.component.html
@@ -33,16 +33,16 @@
                     <img src="../../../assets/images/smetovi-trees.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer" />
 
                     <div *ngIf="subMenuOpen"
-                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-sm shadow-sm border z-10">
+                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-md z-10">
                         <ul>
                             <li>
-                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Admin</a>
+                                <a routerLink="/dashboard" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Admin</a>
                             </li>
                             <li>
-                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Postavke</a>
+                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Postavke</a>
                             </li>
                             <li>
-                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
+                                <a (click)="logout()" (click)="toggleMenu()" class="rounded-md cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
                             </li>
                         </ul>
                     </div>
@@ -55,8 +55,9 @@
                 <!-- Weather Component (Visible on Mobile) -->
                 <app-weather-widget *ngIf="isMobileView"
                     [hasScrolled]="hasScrolled || !isHomePage || isMobileMenuOpen"></app-weather-widget>
-                <button id="mobile-menu-button" class="text-black focus:outline-none"
-                    [class.text-white]="isHomePage && !hasScrolled && !isMobileMenuOpen">
+                <button id="mobile-menu-button" class="focus:outline-none"
+                    [class.text-white]="isHomePage && !hasScrolled && !isMobileMenuOpen"
+                    [class.text-black]="!isHomePage && hasScrolled && isMobileMenuOpen">
                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -67,16 +68,16 @@
                     <img src="../../../assets/images/smetovi-trees.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer" />
 
                     <div *ngIf="subMenuOpen"
-                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-sm shadow-sm border z-10">
+                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-md z-10">
                         <ul>
                             <li>
-                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Admin</a>
+                                <a routerLink="/dashboard" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Admin</a>
                             </li>
                             <li>
-                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Postavke</a>
+                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Postavke</a>
                             </li>
                             <li>
-                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
+                                <a (click)="logout()" (click)="toggleMenu()" class="rounded-md cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
                             </li>
                         </ul>
                     </div>

diff --git a/frontend/src/app/home/pages/home/home.component.ts b/frontend/src/app/home/pages/home/home.component.ts
@@ -4,6 +4,7 @@ import { RouterLink } from '@angular/router';
 import { ItemListComponent } from 'src/app/components/item-list/item-list.component';
 import { Location } from 'src/app/shared/models/location.model';
 import { LocationService } from 'src/app/shared/services/location.service';
+import { Title, Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-home',
@@ -14,8 +15,14 @@ import { LocationService } from 'src/app/shared/services/location.service';
 })
 export class HomeComponent implements OnInit {
   locations: Location[] = [];
-  constructor(private locationService: LocationService) {}
-
+  constructor(private locationService: LocationService, private title: Title, private meta: Meta) {
+    this.title.setTitle('Početna - Dobro došli');
+    this.meta.addTags([
+      { name: 'description', content: 'Sve informacije na jednom mjestu o izletištu Smetovi kod Zenice' },
+      { name: 'keywords', content: 'Smetovi, Izletište, Zenica, Snijeg' }
+    ]);
+  }
+
   ngOnInit() {
     this.locationService.getLocations().subscribe(data => {
       this.locations = data.locations; // Assuming 'locations' is the key in your JSON

diff --git a/frontend/src/app/home/pages/location/location.component.html b/frontend/src/app/home/pages/location/location.component.html
@@ -1,6 +1,6 @@
 <main class="flex items-center justify-center bg-gray-100">
   <div class="w-full lg:flex container">
-    <div class="lg:w-1/3 py-6 px-4">
+    <div class="py-6 px-4">
       <ng-container *ngFor="let locationItem of locations; let i = index">
         <app-location-card 
           [location]="locationItem"

diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html
@@ -11,7 +11,7 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
           <div>
             <label class="text-gray-800 text-sm mb-2 block">Korisničko ime</label>
             <div class="relative flex items-center">
-              <input formControlName="username" type="text"
+              <input formControlName="username" type="email"
                 class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600"
                 placeholder="Unesite email" />
               <svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb"

diff --git a/frontend/src/app/shared/models/location.model.ts b/frontend/src/app/shared/models/location.model.ts
@@ -6,6 +6,7 @@ export interface WorkingHours {
 export interface Location {
   id: number;
   name: string;
+  description: string,
   address: string;
   type: string;
   image?: string;

diff --git a/frontend/src/assets/data/data.json b/frontend/src/assets/data/data.json
@@ -2,20 +2,23 @@
     "locations": [
       {
         "name": "Konjički klub 'Smet'",
-        "description": "Horse riding club",
+        "description": "Predstavlja savršeno mjesto za ljubitelje životinja i prirode. Osim konja, klub se ponosi velikim brojem različitih životinja, što ga čini pravim malim zoološkim vrtom. Posjetitelji mogu uživati u bliskom susretu s brojnim životinjama.",
+        "type": "Rekreacija",
         "image": "/assets/images/smet.jpg",
         "coordinates": { "lat": 44.241592, "lng": 17.969323 }
       },
       {
         "name": "Spomen obilježje",
-        "description": "Memorial monument",
+        "description": "Spomen obilježje u Zenici posvećeno je čuvanju sjećanja na hrabre ljude i događaje koji su obilježili historiju ovog kraja. Ovaj prostor nudi mirnu atmosferu za razmišljanje i odavanje počasti onima koji su dali svoje živote za bolje sutra.",
+        "type": "Rekreacija",
         "image": "/assets/images/spomenik.jpg",
         "coordinates": { "lat": 44.244918, "lng": 17.959509 }
       },
       {
         "name": "Restoran 960",
-        "description": "Restaurant 960",
+        "description": "Moderno uređen restoran koji posjetiteljima nudi bogat izbor hrane i pića, uz jedinstven i ugodan ambijent. Idealno mjesto za opuštanje i uživanje u ukusnim specijalitetima u prijatnom okruženju uz predivan pogled.",
         "image": "/assets/images/restoran_960.jpg",
+        "type": "Restoran",
         "coordinates": { "lat": 44.242418, "lng": 17.97361 },
         "workingHours": [
           { "day": "Ponedjeljak", "open": "10:00", "close": "22:00" },
@@ -29,9 +32,17 @@
       },
       {
         "name": "Dom Saveza Izviđača i Radioamatera",
-        "description": "Dom Saveza Izviđača i Radioamatera",
+        "description": "Smješten u prelijepom okruženju, dom nudi idealan prostor za kampovanje, edukaciju i druženje. Posjetitelji mogu uživati u miru i prirodnim ljepotama, kao i u bogatom programu aktivnosti koje promovišu izviđačke i radioamaterske vještine.",
+        "type": "Smještaj",
         "image": "/assets/images/dom_saveza_izvidaca_i_radioamatera.jpg",
         "coordinates": { "lat": 44.245125, "lng": 17.978405 }
+      },
+      {
+        "name": "Planinarski dom Smet",
+        "description": "Planinarski dom Smet se nalazi na nadmorskoj visini od 964 metara. Dom posjeduje restoran, salu, terasu, igralište, parkove za djecu te prostor za roštilj. Domom upravlja planinarsko društvo Željezara iz Zenice. Dom je otvoren tokom cijele godine.",
+        "type": "Smještaj",
+        "image": "/assets/images/dom_saveza_izvidaca_i_radioamatera.jpg",
+        "coordinates": { "lat": 44.247535, "lng": 17.971122 }
       }
     ]
   }

diff --git a/frontend/src/favicon.ico b/frontend/src/favicon.ico
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -8,6 +8,7 @@
 body {
     padding: 0;
     margin: 0;
+    font-family: Poppins, sans-serif;
 }
 
 button, .button {