Changes on UI home and some examples for backend creation of tables - first draft

backend/config/db.js

@@ -1,18 +1,62 @@
 const mysql = require('mysql');
 
+// Create the connection to the database
 const db = mysql.createConnection({
     host: process.env.DB_HOST,
     user: process.env.DB_USER,
     password: process.env.DB_PASSWORD,
     database: process.env.DB_NAME
 });
 
+// Connect to the database and create tables if they don't exist
 db.connect((err) => {
     if (err) {
         console.error('Error connecting to MySQL:', err);
         return;
     }
     console.log('Connected to MySQL database');
+
+    // SQL for checking and creating tables
+    const queries = [
+        `CREATE TABLE IF NOT EXISTS locationTypes (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            typeName VARCHAR(255) NOT NULL
+        );`,
+        `CREATE TABLE IF NOT EXISTS users (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            userName VARCHAR(255) NOT NULL,
+            email VARCHAR(255) NOT NULL UNIQUE
+        );`,
+        `CREATE TABLE IF NOT EXISTS locations (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            locationName VARCHAR(255) NOT NULL,
+            locationTypeId INT,
+            userId INT,
+            longitude FLOAT,
+            latitude FLOAT,
+            image VARCHAR(255),
+            FOREIGN KEY (locationTypeId) REFERENCES locationTypes(id),
+            FOREIGN KEY (userId) REFERENCES users(id)
+        );`,
+        `CREATE TABLE IF NOT EXISTS user_locations (
+            userId INT,
+            locationId INT,
+            PRIMARY KEY (userId, locationId),
+            FOREIGN KEY (userId) REFERENCES users(id),
+            FOREIGN KEY (locationId) REFERENCES locations(id)
+        );`
+    ];
+
+    // Loop through each query to create tables
+    queries.forEach((query) => {
+        db.query(query, (error, results) => {
+            if (error) {
+                console.error('Error creating table:', error);
+            } else {
+                console.log('Table checked/created successfully.');
+            }
+        });
+    });
 });
 
-module.exports = db;
+module.exports = db;

frontend/src/app/components/location-card/location-card.component.html

@@ -1,5 +1,5 @@
 <div class="py-6 px-6 max-w-sm mx-auto bg-white rounded-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 w-full mb-4 shadow-lg">
-  <img class="block mx-auto h-16 w-16 rounded-full sm:mx-0 sm:flex-shrink-0" [src]="location.image" alt="">
+  <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">

frontend/src/app/pages/home/home.component.html

@@ -1,53 +1,50 @@
 <div class="w-full">
   <!-- Image Section -->
-  <div class="relative h-[500px] bg-cover bg-center"
-    style="background-image: url('/assets/smetovi-bg.jpg');">
+  <div class="relative h-[500px] bg-cover bg-center" style="background-image: url('/assets/smetovi-bg.jpg');">
     <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-md">
-      <h1 class="text-white text-4xl md:text-6xl font-bold text-center">Dobro došli na Smetovi.ba</h1>
+      <h1 class="text-white text-3xl md:text-5xl font-bold text-center uppercase">Dobro došli na Smetovi.ba</h1>
     </div>
   </div>
 
   <!-- Location Section -->
   <div class="bg-white py-12">
     <div class="container mx-auto px-4">
-      <h2 class="text-3xl font-semibold text-center mb-8">Lokacije</h2>
+      <h2 class="text-4xl font-semibold text-center mb-8">Lokacije</h2>
 
       <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
         <!-- Location 1 -->
-        <div class="bg-white-100 rounded-lg shadow-lg">
-          <img class="w-full" src="/assets/images/smet.jpg">
+        <div class="bg-white-100">
+          <img class="w-64 h-64 object-cover rounded-full mx-auto" src="/assets/images/smet.jpg">
           <div class="p-6">
-            <h3 class="text-xl font-bold mb-2">Konjički klub "Smet"</h3>
-            <p>Location Address or description.</p>
+            <h3 class="text-xl font-medium mb-2 text-center">Konjički klub "Smet"</h3>
           </div>
-
         </div>
 
         <!-- Location 2 -->
-        <div class="bg-white-100 rounded-lg shadow-lg">
-          <img class="w-full" src="/assets/images/hero-section.jpg">
+        <div class="bg-white-100">
+          <img class="w-64 h-64 object-cover rounded-full mx-auto" src="/assets/images/spomenik.jpg">
           <div class="p-6">
-            <h3 class="text-xl font-bold mb-2">Spomen obilježje</h3>
-            <p>Location Address or description.</p>
+            <h3 class="text-xl font-medium mb-2 text-center">Spomen obilježje</h3>
           </div>
         </div>
 
         <!-- Location 3 -->
-        <div class="bg-white-100 rounded-lg shadow-lg">
+        <div class="bg-white-100">
+          <img class="w-64 h-64 object-cover rounded-full mx-auto" src="/assets/images/restoran_360.jpg">
           <div class="p-6">
-            <h3 class="text-xl font-bold mb-2">Restoran 360</h3>
-            <p>Location Address or description.</p>
+            <h3 class="text-xl font-medium mb-2 text-center">Restoran 360</h3>
           </div>
         </div>
 
         <!-- Location 4 -->
-        <div class="bg-white-100 rounded-lg shadow-lg">
+        <div class="bg-white-100">
+          <img class="w-64 h-64 object-cover rounded-full mx-auto" src="/assets/images/dom_saveza_izvidaca_i_radioamatera.jpg">
           <div class="p-6">
-            <h3 class="text-xl font-bold mb-2">Dom Saveza Izviđača i Radioamatera</h3>
-            <p>Location Address or description.</p>
+            <h3 class="text-xl font-medium mb-2 text-center">Dom Saveza Izviđača i Radioamatera</h3>
           </div>
         </div>
       </div>
     </div>
   </div>
+
 </div>

frontend/src/app/pages/location/location.component.html

@@ -6,7 +6,7 @@
       </ng-container>
     </div>
     <div class="lg:w-1/2">
-     <h1>Google map</h1>
+     <!-- <h1>Google map</h1> -->
     </div>
   </div>
 </main>

frontend/src/app/pages/location/location.component.ts

@@ -9,15 +9,15 @@ const DUMMY_LOCATIONS = [
     name: 'Konjicki klub "Smet"',
     address: 'Smetovi bb',
     type: 'Zooloski vrt',
-    image: 'https://images.pexels.com/photos/808465/pexels-photo-808465.jpeg',
+    image: '/assets/images/smet.jpg',
   },
   {
     id: 2,
     name: 'Restoran Smetovi',
     address: 'Smetovi bb',
     type: 'Restoran',
     image:
-      'https://images.pexels.com/photos/552785/pexels-photo-552785.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+      '/assets/images/restoran_360.jpg',
   },
 ];