ap7pd/event-management-frontend
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: Improve readme UI, use raw HTML for the table

Browse source
This commit is contained in:
Peter Vacho 2025-01-05 17:21:30 +01:00
parent 2a1d1f9ef6
commit 3dea73ed41
Signed by: school
GPG key ID: 8CFC3837052871B4
3 changed files with 173 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

203
README.md
View file

@ -11,13 +11,64 @@ attendees, and categories effectively.
## Overview / Key Features ## Overview / Key Features
- **Monthly Calendar View**: View events in a grid layout by weeks and days. - **Monthly Calendar View:** The default landing page of the app provides a
- **Daily View**: Easily browse and manage daily events. neatly organized monthly calendar view. Days are displayed in a grid layout
- **Event Management**: Create, edit, and delete events with support for categories and attendees. with rows representing weeks. Days with events are highlighted. Users can
- **User Authentication**: Register and log in with robust access and refresh navigate between months using arrow buttons.
token support, ensuring secure and seamless user sessions. - **Daily View:** An interface for viewing and managing events for a specific
- **Error Handling**: Gracefully handles API errors, including scenarios where day. Events are displayed as easy-to-read cards, ordered by their start times.
the backend is unreachable. From here, users can create new events, edit or delete their own events, leave
invited events, or view detailed event information.
- **Event Management:** Fully featured event management allows users to create,
edit, and delete events. Events support color selection from a color picker,
detailed descriptions, and attendee invitations. Invited events are integrated
into the calendar, and invite notifications provide quick actions for managing
responses.
- **Category Management:** Users can create, edit, and delete event categories.
These categories can be assigned to events to organize them effectively.
Categories also support color selection for easy identification.
- **User Authentication:** Secure and robust authentication with automatic
login for valid session tokens. Tokens are securely stored & persist across app
restarts, allowing users to access the app without needing to reauthenticate
every time they open it. Registration and login are straightforward, and access
tokens are refreshed automatically to maintain session continuity. Once a
refresh token expires, the user is automatically logged out and redirected to
the login screen.
- **Invitations and Notifications:** Users can invite others to events, and
invitations appear as notifications. Invite notifications contain support
actions like marking as read, previewing the event details, accepting or
declining the invitation, and deleting the notification. When an invitation
is accepted or declined, the inviter receives a notification update, letting
them know about the acceptance/rejection.
- **Error Handling and API Base URL Management:** When the app cannot connect
to the API server, a dedicated error screen is displayed. From this screen,
users can modify the API base URL, allowing seamless switching to another
server if needed. This Base URL setting is also accessible from the login and
register screens.
- **Settings and Account Management:** The settings screen is accessible to
logged in users and offers comprehensive account management. Users can update
their username, email, and password, delete their account, or log out. The API
base URL can also be adjusted from here.
- **Event Details View:** A detailed view displays complete event information,
including its creation date, description, attendees, categories, and, if
applicable, the event owner's details for invited events. This page offers a
full view of the event, unlike the event cards shown in the day view, which
only show a summary.
- **Color-Coded Visuals:** Both events and categories support color
customization via a built-in color picker, making it easy to differentiate and
organize items visually.
- **Clean and Intuitive UI:** The app's design prioritizes usability and
clarity, with features like the event-based day highlights in the monthly view
and a simple card format for daily events. All functionalities are accessible
through logically organized pages and actions.
- **Notifications System:** The notification page supports the previously
described invite notifications, but also general message notifications, which
the administrator can send (currently only possible by directly adding it to
the database, as the API doesn't support privileged/admin accounts, though
this would be possible to add in the future). Note that the app doesn't
support push notifications, so notifications are only visible from the
notifications screen when the app is open, however, this could be implemented
in the future as well.
## Backend requirements ## Backend requirements
@ -40,34 +91,122 @@ Repository](https://git.itsdrike.com/ap7pd/event-management-backend).
Below is a showcase of key features and screens in the application: Below is a showcase of key features and screens in the application:
| ![API Unreachable](showcase/01_api_unreachable.png) | ![Login Screen](showcase/02_login.png) | ![Base URL Change](showcase/02_login_base_url_change.png) | <table>
| --------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------- | <!-- First Image Row -->
| Error screen, shown whenever the API becomes unreachable. | Login screen for user authentication. | Screen to update the API base URL, available from the login, register & API unreachable pages. | <tr>
<th>📶 API Unreachable</th>
<th>🔒 Login Screen</th>
<th>🔧 Base URL Change</th>
</tr>
<tr>
<td>
<img src="showcase/01_api_unreachable.png" alt="API Unreachable" />
</td>
<td>
<img src="showcase/02_login.png" alt="Login Screen" />
</td>
<td>
<img src="showcase/02_login_base_url_change.png" alt="Base URL Change" />
</td>
</tr>
| ![Register Screen](showcase/03_register.png) | ![Month View](showcase/04_month_view.png) | ![Day View](showcase/05_day_view.png) | <!-- Second Image Row -->
| -------------------------------------------- | ----------------------------------------- | ------------------------------------------------- | <tr>
| User registration screen. | Monthly calendar view to browse events. | Daily event view with event details for that day. | <th>📝 Register Screen</th>
<th>📆 Month View</th>
<th>📅 Day View</th>
</tr>
<tr>
<td>
<img src="showcase/03_register.png" alt="Register Screen" />
</td>
<td>
<img src="showcase/04_month_view.png" alt="Month View" />
</td>
<td>
<img src="showcase/05_day_view.png" alt="Day View" />
</td>
</tr>
| ![Edit Duration Event](showcase/06_duration_event_edit.png) | ![Edit Instant Event](showcase/07_instant_event_edit.png) | ![Invite User to Event](showcase/08_invite_user_to_event.png) | <!-- Third Image Row -->
| ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- | <tr>
| Edit screen for duration-based events. | Edit screen for instant events. | Interface for inviting users to an event. | <th>⏳ Edit Duration Event</th>
<th>⚡ Edit Instant Event</th>
<th>📨 Invite User to Event</th>
</tr>
<tr>
<td>
<img src="showcase/06_duration_event_edit.png" alt="Edit Duration Event" />
</td>
<td>
<img src="showcase/07_instant_event_edit.png" alt="Edit Instant Event" />
</td>
<td>
<img src="showcase/08_invite_user_to_event.png" alt="Invite User to Event" />
</td>
</tr>
| ![Duration Event Details](showcase/09_duration_event_details.png) | ![Instant Event Details](showcase/10_instant_event_details.png) | ![Categories Overview](showcase/11_categories.png) | <!-- Fourth Image Row -->
| ----------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------- | <tr>
| Detailed view of a duration-based event. | Detailed view of an instant event. | List of event categories of the user. | <th>⏱️ Duration Event Details</th>
<th>🔍 Instant Event Details</th>
<th>📂 Categories Overview</th>
</tr>
<tr>
<td>
<img src="showcase/09_duration_event_details.png" alt="Duration Event Details" />
</td>
<td>
<img src="showcase/10_instant_event_details.png" alt="Instant Event Details" />
</td>
<td>
<img src="showcase/11_categories.png" alt="Categories Overview" />
</td>
</tr>
| ![Create New Category](showcase/12_new_category.png) | ![Updated Categories](showcase/13_categories_with_new.png) | ![Settings Screen](showcase/14_settings.png) | <!-- Fifth Image Row -->
| ---------------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- | <tr>
| Form to create a new category. | Updated list with a newly added category. | Settings menu for app configuration. Only available when logged in. | <th>➕ Create New Category</th>
<th>🆕 Updated Categories Overview</th>
<th>⚙️ Settings Screen</th>
</tr>
<tr>
<td>
<img src="showcase/12_new_category.png" alt="Create New Category" />
</td>
<td>
<img src="showcase/13_categories_with_new.png" alt="Updated Categories" />
</td>
<td>
<img src="showcase/14_settings.png" alt="Settings Screen" />
</td>
</tr>
| ![Notification: Invite](showcase/15_notification_invite_bob.png) | ![Invite Preview](showcase/16_invite_event_details_preview.png) | ![Notification: Invite Accepted](showcase/17_notification_invite_accepted_bob.png) | <!-- Sixth Image Row -->
| ---------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------- | <tr>
| Notification about an (incomming) event invite. | Preview of the event from the invite. | Notification for the (incomming) invite after accepting (already marked read). | <th>🔔 Notification: Invite</th>
<th>👀 Invite Preview</th>
<th>✅ Notification: Accepted</th>
</tr>
<tr>
<td>
<img src="showcase/15_notification_invite_bob.png" alt="Notification: Invite" />
</td>
<td>
<img src="showcase/16_invite_event_details_preview.png" alt="Invite Preview" />
</td>
<td>
<img src="showcase/17_notification_invite_accepted_bob.png" alt="Notification: Accepted" />
</td>
</tr>
| ![Day View with Invite](showcase/18_day_view_invited_event_bob.png) | ![Invited Event Details](showcase/19_invited_event_details_bob.png) | ![Notification Accepted John](showcase/20_notification_invite_accepted_john.png) | <!-- Final Row -->
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | <tr>
| Day view showing the invited event. | Details of an event the user was invited to. | Notification about user having accepted an outgoing invite (from the invitor's account). | <th colspan="3">🗑️ Notifications Cleared</th>
</tr>
| ![Notifications Cleared](showcase/21_notifications_cleared.png) | <tr>
| --------------------------------------------------------------- | <td colspan="3" align="center">
| Screen showing cleared notifications. | <img src="showcase/21_notifications_cleared.png" alt="Notifications Cleared" />
</td>
</tr>
</table>

2
app/src/main/java/com/p_vacho/neat_calendar/activities/CreateEventActivity.kt
View file

@ -109,10 +109,12 @@ class CreateEventActivity : AppCompatActivity() {
txtStartTime.setText(formatDateTime(startDateTime)) txtStartTime.setText(formatDateTime(startDateTime))
if (endDateTime != startDateTime) { if (endDateTime != startDateTime) {
eventTypeToggleGroup.check(R.id.btnDurationEvent)
instantEvent = false instantEvent = false
txtEndTime.visibility = View.VISIBLE txtEndTime.visibility = View.VISIBLE
txtEndTime.setText(formatDateTime(endDateTime)) txtEndTime.setText(formatDateTime(endDateTime))
} else { } else {
eventTypeToggleGroup.check(R.id.btnInstantEvent)
instantEvent = true instantEvent = true
endDateTime = null endDateTime = null
txtEndTime.visibility = View.GONE txtEndTime.visibility = View.GONE

BIN
showcase/06_duration_event_edit.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 39 KiB