Skip to content

Commit 2c39610

Browse files
bjerrecsbjerrecs
committed
initial fetch from event service
1 parent e5cfcf8 commit 2c39610

File tree

2 files changed

+64
-82
lines changed

2 files changed

+64
-82
lines changed

‎src/components/Events.astro

+2-68
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,6 @@
11
---
22
import CardButton from "../components/ui/CardButton.astro";
3-
import MyComponent from "../components/Events.jsx"
3+
import Mycomponent from "../components/Events.jsx";
44
---
5+
<Mycomponent client:load />
56

6-
<h3 class="font-semibold text-lg text-secondary mb-2 dark:text-white">Today</h3>
7-
8-
<div class="flex flex-col gap-4 md:w-full">
9-
<div class="flex flex-col md:flex-row justify-center gap-2">
10-
<img
11-
src="/img/events/event_vtc.png"
12-
alt=""
13-
class="md:w-[350px] max-lg:w-[100%]"
14-
/>
15-
<div class="md:ml-4">
16-
<h4 class="text-secondary dark:text-white font-bold text-lg -mt-2">
17-
Copenhagen Live 2024
18-
</h4>
19-
<p class="mt-4 md:w-full break-words ">
20-
The time has come once again! On September 21st, 2024, we are excited to welcome you to the 8th annual Copenhagen LIVE. Join us as controllers from all of VATSIM-Scandinavia come together in Copenhagen to supply non-stop ATC for you the entire day starting from 6z and all the way until 22z.
21-
</p>
22-
<CardButton href="#" text="Read more" color="snow"/>
23-
</div>
24-
</div>
25-
26-
<div class="flex flex-col md:flex-row justify-center md:items-center gap-2">
27-
<img
28-
src="/img/events/event_bergen.png"
29-
alt=""
30-
class="md:w-[350px] max-lg:w-[100%]"
31-
/>
32-
33-
<div class="md:ml-4">
34-
<h4 class="text-secondary dark:text-white font-bold text-lg -mt-2">
35-
Copenhagen Live 2024
36-
</h4>
37-
<p class="mt-4 md:w-full">
38-
The time has come once again! On September 21st, 2024, we are
39-
excited to welcome you to the 8th annual Copenhagen LIVE. Join us
40-
as controllers from all of VATSIM-Scandinavia come together in
41-
Copenhagen to supply non-stop ATC for you the entire day starting
42-
from 6z and all the way until 22z.
43-
</p>
44-
<CardButton href="#" text="Read more" color="snow"/>
45-
</div>
46-
</div>
47-
</div>
48-
49-
<h3 class="font-semibold text-lg text-secondary mt-8 mb-2 dark:text-white">Upcoming</h3>
50-
<div class="flex flex-row gap-2 overflow-x-scroll" tabindex="0">
51-
<img
52-
src="/img/events/event_hell.png"
53-
alt=""
54-
class="w-[280px] max-lg:w-[200px]"
55-
/>
56-
<img
57-
src="/img/events/event_bergen.png"
58-
alt=""
59-
class="w-[280px] max-lg:w-[200px]"
60-
/>
61-
<img
62-
src="/img/events/event_vtc.png"
63-
alt=""
64-
class="w-[280px] max-lg:w-[200px]"
65-
/>
66-
<img
67-
src="/img/events/event_vtc.png"
68-
alt=""
69-
class="w-[280px] max-lg:w-[200px]"
70-
/>
71-
</div>
72-
<MyComponent client:only/>

‎src/components/Events.jsx

+62-14
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,80 @@ const Events = () => {
66
useEffect(() => {
77
const fetchData = async () => {
88
try {
9-
const response = await fetch('http://events.vatsim-scandinavia.org/api/calendars/1/events', {
9+
const response = await fetch('https://events.vatsim-scandinavia.org/api/calendars/1/events', {
1010
headers: {
11-
Authorization: 'Bearer 83e0745f-486d-4f73-8184-40c98930380c'
12-
},
13-
mode: 'no-cors' // Add the 'no-cors' mode
11+
Authorization: 'Bearer 83e0745f-486d-4f73-8184-40c98930380c' // Replace with your valid bearer token
12+
}
1413
});
1514
const data = await response.json();
16-
setEvents(data);
15+
setEvents(data.data);
1716
} catch (error) {
1817
console.error('Error fetching events:', error);
1918
}
2019
};
21-
20+
2221
fetchData();
2322
}, []);
2423

24+
function dateConverter(date) {
25+
const newDate = new Date(date);
26+
return newDate.toLocaleString('en-uk', { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
27+
}
28+
29+
console.log(dateConverter("2024-08-05 17:00:00"))
30+
2531
return (
26-
<div>
27-
<h1>Events</h1>
28-
<ul>
29-
{events.map(event => (
30-
<li key={event.id}>{event.title}</li>
31-
))}
32-
</ul>
32+
<div class="flex flex-col gap-4 md:w-full md:min-w-[900px] h-fit">
33+
<div className="grid grid-cols-5 grid-rows-3 gap-4">
34+
<div className="col-span-5 flex flex-row gap-4">
35+
<img src={events.length != 0 ? events[0].image : ""} className='w-96 h-fit aspect-video'/>
36+
<span>
37+
<h2 className='font-bold text-2xl'>{events.length != 0 ? events[0].title : ""}</h2>
38+
<p>{events.length != 0 ? dateConverter(events[0].start_date) : ""} - {events.length != 0 ? dateConverter(events[0].end_date) : ""}</p>
39+
<p className='line-clamp-5'>{events.length != 0 ? events[0].long_description : ""}</p>
40+
</span>
41+
</div>
42+
<div className="col-span-5 row-start-2 flex flex-row gap-4">
43+
<img src={events.length != 0 ? events[1].image : ""} className='w-96 h-fit aspect-video'/>
44+
<span>
45+
<h2 className='font-bold text-2xl'>{events.length != 0 ? events[1].title : ""}</h2>
46+
<p>{events.length != 0 ? dateConverter(events[1].start_date) : ""} - {events.length != 0 ? dateConverter(events[1].end_date) : ""}</p>
47+
<p className='line-clamp-5'>{events.length != 0 ? events[1].long_description : ""}</p>
48+
</span>
49+
</div>
50+
<div className='col-span-5 row-start-3 flex flex-row gap-4 w-ful overflow-x-visible md:min-w-[900px] overflow-hidden'>
51+
<div className="flex flex-row gap-4 w-fit">
52+
<img src={events.length != 0 ? events[2].image : ""} className='w-48 h-fit aspect-video'/>
53+
<span>
54+
<h2 className='font-bold text-lg'>{events.length != 0 ? events[2].title : ""}</h2>
55+
<p>{events.length != 0 ? dateConverter(events[2].start_date) : ""} - {events.length != 0 ? dateConverter(events[2].end_date) : ""}</p>
56+
</span>
57+
</div>
58+
<div className="flex flex-row gap-4">
59+
<img src={events.length != 0 ? events[3].image : ""} className='w-48 h-fit aspect-video'/>
60+
<span>
61+
<h2 className='font-bold text-lg'>{events.length != 0 ? events[3].title : ""}</h2>
62+
<p>{events.length != 0 ? dateConverter(events[3].start_date) : ""} - {events.length != 0 ? dateConverter(events[3].end_date) : ""}</p>
63+
</span>
64+
</div>
65+
<div className="flex flex-row gap-4">
66+
<img src={events.length != 0 ? events[4].image : ""} className='w-48 h-fit aspect-video'/>
67+
<span>
68+
<h2 className='font-bold text-lg'>{events.length != 0 ? events[4].title : ""}</h2>
69+
<p>{events.length != 0 ? dateConverter(events[4].start_date) : ""} - {events.length != 0 ? dateConverter(events[4].end_date) : ""}</p>
70+
</span>
71+
</div>
72+
<div className="flex flex-row gap-4">
73+
<img src={events.length != 0 ? events[5].image : ""} className='w-48 h-fit aspect-video'/>
74+
<span>
75+
<h2 className='font-bold text-lg'>{events.length != 0 ? events[5].title : ""}</h2>
76+
<p>{events.length != 0 ? dateConverter(events[5].start_date) : ""} - {events.length != 0 ? dateConverter(events[5].end_date) : ""}</p>
77+
</span>
78+
</div>
79+
</div>
80+
</div>
3381
</div>
3482
);
3583
};
3684

37-
export default Events;
85+
export default Events;

0 commit comments

Comments
 (0)