solved merge conflict

MatejFrnka · Feb 7, 2024 · 413ba35 · 413ba35
2 parents 834eeee + 022c2c9
commit 413ba35
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 61 deletions.
diff --git a/backend/sportsmatch/.gitignore b/backend/sportsmatch/.gitignore
@@ -35,3 +35,7 @@ out/
 
 ### VS Code ###
 .vscode/
+
+### h2 database ###
+./sportsmatch
+*.db
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/SportsmatchApplication.java b/backend/sportsmatch/src/main/java/com/sportsmatch/SportsmatchApplication.java
@@ -32,7 +32,14 @@ public static void main(String[] args) {
 
   @Override
   public void run(String... args) throws Exception {
-    addData();
+    checkRecords();
+  }
+
+  private void checkRecords() {
+    List<User> users = userRepository.findAll();
+    if (users.isEmpty()) {
+      addData();
+    }
   }
 
   public void addData() {

diff --git a/backend/sportsmatch/src/main/resources/application.properties b/backend/sportsmatch/src/main/resources/application.properties
@@ -1,11 +1,11 @@
-spring.datasource.url=jdbc:h2:mem:testdb
+spring.datasource.url=jdbc:h2:file:./sportsmatch
+spring.jpa.hibernate.ddl-auto=update
 spring.datasource.driver-class-name=org.h2.Driver
 spring.datasource.username=sa
 spring.datasource.password=password
 spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
 spring.jpa.show-sql=true
 spring.h2.console.enabled=true
-
 spring.mvc.hiddenmethod.filter.enabled=true
 
 jwt.secret=56e1a2c8b7a56f5c480cf0045186dbc514d9172e4fbbc81dd82f541384274c3c
diff --git a/frontend/sportsmatch-app/assets/Filter.png b/frontend/sportsmatch-app/assets/Filter.png
diff --git a/frontend/sportsmatch-app/assets/InProgress.png b/frontend/sportsmatch-app/assets/InProgress.png
diff --git a/frontend/sportsmatch-app/assets/img-event-card-badminton.png b/frontend/sportsmatch-app/assets/img-event-card-badminton.png
diff --git a/frontend/sportsmatch-app/src/components/Match.tsx b/frontend/sportsmatch-app/src/components/Match.tsx
@@ -0,0 +1,82 @@
+import '../styles/Match.css'
+import {
+  LuSwords,
+  LuMapPin,
+  LuMedal,
+  LuCalendarCheck,
+  LuCalendarX,
+  LuSettings2,
+} from 'react-icons/lu'
+
+interface InProgressProps {
+  event: {
+    id: number
+    maxElo: number
+    minElo: number
+    dateEnd: string
+    dateStart: string
+    location: string
+    title: string
+    sport: string
+    playerOne: string
+    playerTwo?: string
+  }
+}
+
+function InProgress({ event }: InProgressProps) {
+  return (
+    <>
+      <div className="container-sm">
+        <div className="match">
+          <div className="row">
+            <div className="col position-relative">
+              <a
+                href="test/1"
+                className="overlap position-absolute top-0 end-0"
+              >
+                <LuSettings2 />
+              </a>
+              {event.playerTwo === null ? (
+                <h1>
+                  Matchmaking
+                  <br /> in progress
+                </h1>
+              ) : (
+                <h1>
+                  Upcoming
+                  <br /> match
+                </h1>
+              )}
+              <ul>
+                <li>
+                  <LuSwords />{' '}
+                  {event.playerTwo === null
+                    ? 'Awaiting opponent...'
+                    : event.playerTwo}
+                </li>
+                <li>
+                  <LuMapPin />
+                  {event.location}
+                </li>
+                <li>
+                  <LuMedal />
+                  {event.minElo} - {event.maxElo}
+                </li>
+                <li>
+                  <LuCalendarCheck />
+                  {event.dateStart}
+                </li>
+                <li>
+                  <LuCalendarX />
+                  {event.dateEnd}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default InProgress
diff --git a/frontend/sportsmatch-app/src/components/SportEvent.test.tsx b/frontend/sportsmatch-app/src/components/SportEvent.test.tsx
@@ -18,14 +18,19 @@ describe('SportEvent', async () => {
     render(<SportEvent event={mockEvent} />)
 
     // Assert that the rendered component contains the expected data
-    expect(screen.getByText(`📍${mockEvent.location}`)).toBeInTheDocument()
+    expect(screen.getByText(`Test Location`)).toBeInTheDocument()
     expect(
-      screen.getByText(`🏅${mockEvent.minElo} - ${mockEvent.maxElo}`),
-    ).toBeInTheDocument()
-    expect(
-      screen.getByText(`📆${mockEvent.dateStart} to ${mockEvent.dateEnd}`),
+      screen.getByText(`${mockEvent.minElo} - ${mockEvent.maxElo}`),
     ).toBeInTheDocument()
+    expect(screen.getByText(`${mockEvent.dateStart}`)).toBeInTheDocument()
+    expect(screen.getByText(`${mockEvent.dateEnd}`)).toBeInTheDocument()
     expect(screen.getByText(mockEvent.title)).toBeInTheDocument()
+
+    // Check for the presence of react-icons
+    expect(screen.getByTestId('luMapPin')).toBeInTheDocument()
+    expect(screen.getByTestId('luMedal')).toBeInTheDocument()
+    expect(screen.getByTestId('luCalendarCheck')).toBeInTheDocument()
+    expect(screen.getByTestId('luCalendarX')).toBeInTheDocument()
   })
 
   it('renders the component without playerTwo when it is not provided', () => {

diff --git a/frontend/sportsmatch-app/src/components/SportEvent.tsx b/frontend/sportsmatch-app/src/components/SportEvent.tsx
@@ -1,4 +1,5 @@
 import '../styles/SportEvent.css'
+import { LuMapPin, LuMedal, LuCalendarCheck, LuCalendarX } from 'react-icons/lu'
 
 interface SportEventProps {
   event: {
@@ -19,20 +20,29 @@ function SportEvent({ event }: SportEventProps) {
   return (
     <>
       <div className="container-sm">
-        <div className="event-card">
-          <div className="left">
-            <ul>
-              <li>📍{event.location}</li>
-              <li>
-                🏅{event.minElo} - {event.maxElo}
-              </li>
-              <li>
-                📆{event.dateStart} to {event.dateEnd}
-              </li>
-            </ul>
-          </div>
-          <div className="right">
-            <h3>{event.title}</h3>
+        <div className="event">
+          <div className="row">
+            <div className="col left">
+              <ul>
+                <li data-testid="luMapPin">
+                  <LuMapPin /> {event.location}
+                </li>
+                <li data-testid="luMedal">
+                  <LuMedal /> {event.minElo} - {event.maxElo}
+                </li>
+                <li data-testid="luCalendarCheck">
+                  <LuCalendarCheck />
+                  {event.dateStart}
+                </li>
+                <li data-testid="luCalendarX">
+                  <LuCalendarX />
+                  {event.dateEnd}
+                </li>
+              </ul>
+            </div>
+            <div className="col right">
+              <h3>{event.title}</h3>
+            </div>
           </div>
         </div>
       </div>

diff --git a/frontend/sportsmatch-app/src/pages/Home.tsx b/frontend/sportsmatch-app/src/pages/Home.tsx
@@ -1,3 +1,4 @@
+import Match from '../components/Match'
 import SportEvent from '../components/SportEvent'
 import EventHistoryItem from '../components/EventHistoryItem'
 
@@ -7,7 +8,7 @@ function Home() {
     id: 1,
     maxElo: 2000,
     minElo: 1200,
-    dateEnd: '2024-05-01',
+    dateEnd: '2024-05-02',
     dateStart: '2024-05-01',
     location: 'Prague, Stadium A',
     title: 'Badminton match',
@@ -23,6 +24,7 @@ function Home() {
 
   return (
     <>
+      <Match event={sampleEvent} />
       <SportEvent event={sampleEvent} />
       <EventHistoryItem eventHistoryDTO={sampleHistoryDTO}/>
     </>

diff --git a/frontend/sportsmatch-app/src/styles/Match.css b/frontend/sportsmatch-app/src/styles/Match.css
@@ -0,0 +1,56 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
+
+svg {
+  color: #fff;
+}
+
+.match {
+  margin-top: 4em;
+}
+
+.match .row {
+  margin: 0.75em 0;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
+  background: linear-gradient(
+      0deg,
+      rgba(232, 95, 41, 0.25),
+      rgba(232, 95, 41, 0.25)
+    ),
+    url(./assets/InProgress.png);
+  background-clip: content-box;
+  background-size: cover;
+  border-radius: 2px;
+  min-height: 395px;
+}
+
+.match .col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0.563em;
+}
+
+.match .col ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  color: #fff;
+}
+
+.match .col svg {
+  margin-right: 0.5em;
+}
+
+.match h1 {
+  font-family: 'Manrope', sans-serif;
+  font-size: 2.5em !important;
+  font-weight: 900;
+  font-size: 1em;
+
+  color: #fff;
+}
+
+.match .overlap {
+  padding-top: 0.563em;
+  padding-right: 0.563em;
+}
diff --git a/frontend/sportsmatch-app/src/styles/SportEvent.css b/frontend/sportsmatch-app/src/styles/SportEvent.css
@@ -1,8 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
 
+* {
+  font-family: 'Inter', sans-serif;
+}
+
+body {
+  background-color: #F9F8F5;
+}
 
-.container {
+.event .row {
+  padding: 0.75em;
+  min-height: 6.625em;
+}
+
+.event .col.left {
   display: flex;
+<<<<<<< HEAD
   justify-content: center;
   margin-top: 5%;
 
@@ -16,43 +30,51 @@
     font-size: 10px;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
     border-radius: 2px;
+=======
+  flex-direction: column;
+  justify-content: flex-end;
+  border-top-left-radius: 0.125em;
+  border-bottom-left-radius: 0.125em;
+>>>>>>> develop
 }
 
-.left {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: 9px;
-  }
-
-.right {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    background:linear-gradient(0deg, rgba(232, 95, 41, 0.25), rgba(232, 95, 41, 0.25)), url(https://images.pexels.com/photos/8007406/pexels-photo-8007406.jpeg);
-    background-size: cover;
-    background-position: bottom;
-    color: #fff; 
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    padding: 0 9px;
-  }
-
-  .right h3 {
-    font-weight: 900;
-    font-size: 24px;
-    text-transform: uppercase;
-    text-align: right;
-  }
-
-.event-card ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-.event-card ul li {
-    color: #393939;
+.event .col.right {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  text-align: right;
+  background: linear-gradient(
+      0deg,
+      rgba(232, 95, 41, 0.25),
+      rgba(232, 95, 41, 0.25)
+    ),
+    url('/assets/img-event-card-badminton.png');
+  background-size: cover;
+  background-position: top;
+  border-bottom-right-radius: 0.125em;
+  border-top-right-radius: 0.125em;
 }
+
+.event .col.right h3 {
+  font-weight: 900;
+  font-size: 1.5em;
+  text-transform: uppercase;
+  text-align: right;
+  color: #fff;
+}
+
+.event ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.event svg {
+  color: #393939;
+  margin-right: 0.5em;
+}
+
+.event ul li {
+  color: #393939;
+  font-size: 0.78em;
+}