-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #190 from HKN-UCSD/revert-188-ui-table
Revert "UI table"
- Loading branch information
Showing
46 changed files
with
1,944 additions
and
4,044 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,171 @@ | ||
|
|
||
| <script> | ||
| import { navigate } from 'svelte-routing'; | ||
| export let event; | ||
| export let toggleRSVP; | ||
| export let RSVP; | ||
| export let RSVPEnabled = true; | ||
| function getFormattedDateTime(startDateTimeString, endDateTimeString) { | ||
| const startEventTime = new Date(startDateTimeString); | ||
| const endEventTime = new Date(endDateTimeString); | ||
| const options = { | ||
| month: 'short', // Month abbreviation (e.g., Oct) | ||
| day: 'numeric', // Day of the month (e.g., 22) | ||
| hour: 'numeric', // Hour in 12-hour format (e.g., 6) | ||
| minute: '2-digit', // Minutes (e.g., 00) | ||
| hour12: true // Use 12-hour clock (e.g., AM/PM) | ||
| }; | ||
| if (startEventTime.toLocaleString('en-US', options).split(',')[0] == endEventTime.toLocaleString('en-US', options).split(',')[0]){ | ||
| return startEventTime.toLocaleString('en-US', options).concat(" -", endEventTime.toLocaleString('en-US', options).split(',')[1]) | ||
| }else{ | ||
| return startEventTime.toLocaleString('en-US', options).concat(" - ", endEventTime.toLocaleString('en-US', options)) | ||
| } | ||
| } | ||
| import { onMount } from 'svelte'; | ||
| import { getEvents } from "./eventstore"; | ||
| import { embedCode } from "./canvaEmbed.js"; | ||
| </script> | ||
| let events = []; | ||
| let logo = "/static/Default_card_banner.png"; | ||
| //Filter and sort events(Only keep Upcoming Events in ascending order) | ||
| function filterEvents(allEvents) { | ||
| const currentDate = new Date(); | ||
| //Does not compare time other than the date(Event list last until the day end) | ||
| currentDate.setHours(0,0,0,0); | ||
| const filteredEvents = allEvents | ||
| .filter(event => { | ||
| const eventStartTime = new Date(event.start_time); | ||
| eventStartTime.setHours(0,0,0,0) | ||
| return eventStartTime >= currentDate; | ||
| }) | ||
| //Sort event in start time | ||
| .sort((a, b) => { | ||
| const startTimeA = new Date(a.start_time); | ||
| const startTimeB = new Date(b.start_time); | ||
| return startTimeA - startTimeB; | ||
| }); | ||
| <!-- svelte-ignore a11y-click-events-have-key-events --> | ||
| <div class="flex-none md:basis-1/2 lg:basis-1/3 border border-gray-300 rounded-lg min-h-10 m-2 bg-white rounded-lg shadow-md overflow-hidden hover:bg-gray-100 transition duration-300 flex flex-col" on:click={() => navigate(event.url)}> | ||
| <div class="canva-embed-code max-h-[200px] overflow-hidden"> | ||
| {@html event.embed_code} | ||
| </div> | ||
| <!-- Content Section --> | ||
| <div class="flex-grow p-6 flex flex-col overflow-x-auto"> | ||
| <h2 class="text-xl font-semibold text-gray-900 mb-2">{event.title}</h2> | ||
| <p class="text-gray-600 flex items-center gap-2 mb-2"> | ||
| 📍 {event.location} | ||
| </p> | ||
| <p class="text-gray-600 flex items-center gap-2"> | ||
| 🕒 {getFormattedDateTime(event.start_time, event.end_time)} | ||
| </p> | ||
| </div> | ||
|
|
||
| <!-- Button Section --> | ||
|
|
||
| {#if RSVPEnabled} | ||
|
|
||
| <div class="p-6"> | ||
| <button | ||
| class="w-full py-3 px-6 rounded-lg font-semibold text-white transition-all duration-300 transform hover:scale-105 focus:outline-none shadow-lg | ||
| {RSVP.find((record) => record.event == event.pk) | ||
| ? 'bg-primary hover:bg-primary-dark focus:ring-primary' | ||
| : 'bg-secondary hover:bg-secondary-dark focus:ring-secondary' | ||
| }" | ||
| on:click={(e) => toggleRSVP(event, e)} | ||
| > | ||
| {RSVP.find((record) => record.event == event.pk) ? "RSVP'd ★" : "RSVP"} | ||
| </button> | ||
| return filteredEvents; | ||
| } | ||
| function getFormattedDateTime(startDateTimeString, endDateTimeString) { | ||
| const startEventTime = new Date(startDateTimeString); | ||
| const endEventTime = new Date(endDateTimeString); | ||
| const options = { | ||
| month: 'short', // Month abbreviation (e.g., Oct) | ||
| day: 'numeric', // Day of the month (e.g., 22) | ||
| hour: 'numeric', // Hour in 12-hour format (e.g., 6) | ||
| minute: '2-digit', // Minutes (e.g., 00) | ||
| hour12: true // Use 12-hour clock (e.g., AM/PM) | ||
| }; | ||
| if (startEventTime.toLocaleString('en-US', options).split(',')[0] == endEventTime.toLocaleString('en-US', options).split(',')[0]){ | ||
| return startEventTime.toLocaleString('en-US', options).concat(" -", endEventTime.toLocaleString('en-US', options).split(',')[1]) | ||
| }else{ | ||
| return startEventTime.toLocaleString('en-US', options).concat(" - ", endEventTime.toLocaleString('en-US', options)) | ||
| } | ||
| } | ||
| onMount(async () => { | ||
| // Fetch events from the API and wait for the promise to resolve | ||
| const allEvents = await getEvents(); | ||
| events = filterEvents(allEvents).slice(0,10); | ||
| }); | ||
| </script> | ||
|
|
||
| <div class="event-list"> | ||
| {#each events as event} | ||
| <div class="event-card"> | ||
| {#if event.embed_code} | ||
| <div class="embed-code"> | ||
| {@html event.embed_code} | ||
| </div> | ||
| {:else if Object.keys(embedCode).includes(event.event_type)} | ||
| <div class="embed-code"> | ||
| {@html embedCode[event.event_type]} | ||
| </div> | ||
| {:else} | ||
| <img class="default-image" src={logo} alt="{event.title}"> | ||
| {/if} | ||
| <div class={event.is_draft ? "draft-content" : "card-content"}> | ||
| <h2 class="title"><a href={`/events/${event.pk}`}>{event.name}</a></h2> | ||
| <p class="eventtime">{getFormattedDateTime(event.start_time, event.end_time)}</p> | ||
| <p class="location">{event.location}</p> | ||
| </div> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <style> | ||
| .event-list { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
| .embed-code :global(div) { | ||
| margin:0 !important; | ||
| } | ||
| .event-card { | ||
| border: 2px solid; | ||
| border-color: #333; | ||
| border-radius: 10px; | ||
| overflow-x: hidden; | ||
| overflow-y: hidden; | ||
| padding: 0px; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| border: 2px solid black; | ||
| height: 280px; | ||
| width: 300px; | ||
| margin: 20px; | ||
| scrollbar-width: none; | ||
| } | ||
| .embed-code{ | ||
| height:160px; | ||
| object-fit: cover; | ||
| object-position: top; | ||
| width: 100%; | ||
| vertical-align: middle; | ||
| overflow: hidden; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| .default-image { | ||
| height:160px; | ||
| object-position: top; | ||
| max-width: 100%; | ||
| vertical-align: middle; | ||
| overflow: hidden; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| .title a { | ||
| color: black; | ||
| font-size: 25px; | ||
| text-decoration: none; | ||
| margin: 0px 0px 0px 20px; | ||
| display: inline-block; | ||
| } | ||
| .title a:hover { | ||
| text-decoration: underline; /* Add underline on hover for links */ | ||
| } | ||
| .card-content { | ||
| margin: 0px; | ||
| padding-bottom: 2em; | ||
| width: 100%; | ||
| text-align: left; | ||
| } | ||
| .draft-content{ | ||
| margin: 0px; | ||
| padding-bottom: 2em; | ||
| background-color: #dcdcdc; | ||
| width: 100%; | ||
| text-align: left; | ||
| } | ||
| .eventtime{ | ||
| color: black; | ||
| font-size: 14px; | ||
| text-decoration: none; | ||
| margin: 5px 0px 0px 20px; | ||
| } | ||
| .location{ | ||
| color: black; | ||
| font-size: 14px; | ||
| text-decoration: none; | ||
| margin: 5px 0px 0px 20px; | ||
| float: left; | ||
| } | ||
| h2{ | ||
| margin:12px 0px; | ||
| } | ||
| </style> | ||
|
|
Oops, something went wrong.