Skip to content
Snippets Groups Projects
Commit c3cc1bbc authored by Abhinav Anurag's avatar Abhinav Anurag
Browse files

Add:Styles to the edit event form

parent 391d1070
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 319 additions and 50 deletions
src/main/java/polish_community_group_11/polish_community/event/controllers/EventController.java
+ 6
− 13
View file @ c3cc1bbc
......@@ -8,8 +8,11 @@ import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.stereotype.Controller;
import polish_community_group_11.polish_community.event.models.Event;
import polish_community_group_11.polish_community.event.models.EventImpl;
import polish_community_group_11.polish_community.event.services.EventService;
import java.sql.SQLException;
@Controller
public class EventController {
......@@ -65,25 +68,15 @@ event.setEvent_date(event.getEvent_date());
return modelAndView;
}
// @PutMapping("/event/editEvent")
// public ModelAndView editEvent( @ModelAttribute("editEvent") Event editEvent, BindingResult bindingResult, Model model){
// ModelAndView modelAndView = new ModelAndView("event/editEvent");
// if(bindingResult.hasErrors()){
// modelAndView.addObject(model.asMap());
// }
// else{
// modelAndView.setViewName("redirect:/event");
// }
// return modelAndView;
// }
@PostMapping("/event/editEvent")
public ModelAndView editEvent( @ModelAttribute("editEvent") Event editEvent, BindingResult bindingResult, Model model){
public ModelAndView editEvent(@ModelAttribute("editEvent") EventImpl editEvent, BindingResult bindingResult, Model model) throws SQLException {
ModelAndView modelAndView = new ModelAndView("event/editEvent");
if(bindingResult.hasErrors()){
modelAndView.addObject(model.asMap());
}
else{
// EventService.getEditEvent();
int id = editEvent.getEvent_id();
eventService.getEditEvent(editEvent);
modelAndView.setViewName("redirect:/event");
}
return modelAndView;
......
src/main/java/polish_community_group_11/polish_community/event/dao/EventRepositoryImpl.java
+ 6
− 5
View file @ c3cc1bbc
......@@ -80,7 +80,7 @@ public class EventRepositoryImpl implements EventRepository {
// Updates selected record with new updated information
public Event editEvent(Event event)throws SQLException {
String updateSql = "UPDATE event SET event_title = ?, description = ?, event_date = ?, event_time = ?, " +
"location = ?, user_id = ?, imageUrl = ?, whyJoin = ?, benefits = ?, WHERE event_id = ?";
"location = ?, user_id = ?, imageUrl = ?, whyJoin = ?, benefits = ? WHERE event_id = ?";
try {
// jdbc.update() is a method that will execute the sql query
// replaces the ? with the actual values from the news object
......@@ -90,18 +90,19 @@ public class EventRepositoryImpl implements EventRepository {
event.getEvent_date(),
event.getEvent_time(),
event.getLocation(),
event.getUser_id(),
1,
event.getImageUrl(),
event.getWhyJoin(),
event.getBenefits()
event.getBenefits(),
event.getEvent_id()
);
// error handling
if (rowsAffected == 0) {
throw new SQLException("No news item was updated. Check the ID provided.");
throw new SQLException("No event item was updated. Check the ID provided.");
}
} catch (DataAccessException e) {
throw new SQLException("Error updating news with ID: " + event.getEvent_id(), e);
throw new SQLException("Error updating event with ID: " + event.getEvent_id(), e);
}
return event;
}
......
src/main/resources/static/css/events/editEvent.css 0 → 100644
+ 128
− 0
View file @ c3cc1bbc
/* General Styles */
/* Center the form on the screen */
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*height: 100vh;*/
padding: 0 20px;
}
/* Form styling */
form {
background-color: var(--secondary-color);
border-radius: 10px;
padding: 30px;
width: 100%;
max-width: 600px;
box-sizing: border-box;
margin: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add some shadow to give the form a floating effect */
}
/* Header */
h1 {
text-align: left;
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
/* Label styling */
label {
display: block;
font-weight: bold;
margin-bottom: 10px;
color: #333;
font-size: 16px;
}
/* Input and Textarea Styling */
input[type="text"], input[type="date"], input[type="time"], input[type="url"], textarea {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 16px;
color: #333;
background-color: var(--background-color); /* Light background for inputs */
}
textarea {
resize: vertical;
min-height: 120px;
}
/* Alert message styling for errors */
.alert {
color: var(--secondary-color);
background-color: var(--border-color);
padding: 5px;
border-radius: 5px;
font-size: 14px;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
}
/* Button styling */
.buttons {
display: flex;
justify-content: space-between;
gap: 15px;
}
/* Submit and Cancel button styling */
button.submit {
background-color: #5bc0de;
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button.submit:hover {
background-color: #31b0d5;
}
#cancelButton {
background-color: #f44336;
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
text-decoration: none; /* Remove underline */
display: inline-block;
text-align: center;
transition: background-color 0.3s;
}
#cancelButton:hover {
background-color: #e53935;
}
/* Responsive Styles */
@media (max-width: 768px) {
section {
padding: 20px;
}
form {
width: 100%;
max-width: 90%;
padding: 20px;
}
h1 {
font-size: 20px;
}
}
src/main/resources/static/css/events/event.css
+ 162
− 13
View file @ c3cc1bbc
/*!* General Styles *!*/
/*body {*/
/* font-family: Arial, sans-serif;*/
/* margin: 0;*/
/* padding: 0;*/
/* background-color: #E3E2DF;*/
/*}*/
/*!* Main container for event details *!*/
/*#event-details {*/
/* padding: 20px;*/
/* background-color: #E3E2DF;*/
/*}*/
/*!* Event grid container for dynamically generated cards *!*/
/*.event-grid {*/
/* display: grid;*/
/* grid-template-columns: repeat(3, 1fr);*/
/* gap: 20px; !* Equal spacing between grid items *!*/
/* row-gap: 4rem;*/
/* justify-items: center;*/
/*}*/
/*!* Styling each event card *!*/
/*.event-card {*/
/* background: #fff;*/
/* border: 1px solid #ddd;*/
/* border-radius: 10px;*/
/* overflow: hidden;*/
/* transition: transform 0.3s ease, box-shadow 0.3s ease;*/
/* width: 100%;*/
/* max-width: 300px; !* Ensures cards do not get too wide *!*/
/* box-shadow: 0 0 15px 2px #E3AFBC;*/
/*}*/
/*!* Hover effect for the card *!*/
/*.event-card:hover {*/
/* transform: translateY(-10px);*/
/* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);*/
/*}*/
/*!* Event poster styling *!*/
/*.event-poster {*/
/* position: relative;*/
/* overflow: hidden;*/
/* height: 200px;*/
/* justify-content: center;*/
/* align-items: center;*/
/*}*/
/*.event-poster img {*/
/* width: 100%;*/
/* height: 100%;*/
/* object-fit: cover; !* Ensures the image covers the container *!*/
/*}*/
/*!* Title styling *!*/
/*.event-card h2,*/
/*.event-card h3 {*/
/* font-size: 1.5em;*/
/* color: #5D001E;*/
/* margin: 10px 0;*/
/* text-align: center;*/
/*}*/
/*!* Event details text *!*/
/*.event-card p {*/
/* font-size: 1em;*/
/* color: #666;*/
/* margin: 10px;*/
/*}*/
/*.event-card-button{*/
/* display: flex;*/
/*}*/
/*!* Register button styling *!*/
/*.register-button {*/
/* display: block;*/
/* width: 40%; !* Ensures the button spans the full width of its container *!*/
/* max-width: 250px; !* You can set a max-width to control the button size *!*/
/* padding: 10px;*/
/* margin: 10px auto; !* Horizontally centers the button and adds vertical spacing *!*/
/* background-color: var(--primary-color);*/
/* color: var(--secondary-color);*/
/* border: none;*/
/* border-radius: 5px;*/
/* cursor: pointer;*/
/* font-size: 1em;*/
/*}*/
/*.register-button:hover {*/
/* background-color: var(--border-color);*/
/*}*/
/*!* Remove underline from links with the class 'event-link' *!*/
/*.event-link {*/
/* text-decoration: none; !* Removes the underline *!*/
/* margin:auto;*/
/* background-color: var(--primary-color);*/
/* color: var(--secondary-color);*/
/*}*/
/*.event-link button{*/
/* background-color: var(--primary-color);*/
/* color: var(--secondary-color);*/
/* width: 40%; !* Ensures the button spans the full width of its container *!*/
/* max-width: 250px; !* You can set a max-width to control the button size *!*/
/* border: none;*/
/* border-radius: 5px;*/
/* cursor: pointer;*/
/* font-size: 1em;*/
/*}*/
/*!* Responsive adjustments *!*/
/*!* On medium screens, switch to a 2-column layout *!*/
/*@media (max-width: 768px) {*/
/* .event-grid {*/
/* grid-template-columns: repeat(2, 1fr);*/
/* }*/
/*}*/
/*!* On smaller screens, switch to a single column layout *!*/
/*@media (max-width: 480px) {*/
/* .event-grid {*/
/* grid-template-columns: 1fr; !* Single column for very small screens *!*/
/* }*/
/*}*/
/* General Styles */
body {
font-family: Arial, sans-serif;
......@@ -70,27 +201,45 @@ body {
margin: 10px;
}
/* Remove underline from links with the class 'event-link' */
.event-link {
text-decoration: none; /* Removes the underline */
/* Event buttons container */
.event-card-button {
display: flex;
flex-direction: column;
align-items: center; /* Center buttons horizontally */
gap: 10px; /* Adds space between buttons */
}
/* Register button styling */
.register-button {
display: block;
width: 50%; /* Ensures the button spans the full width of its container */
max-width: 300px; /* You can set a max-width to control the button size */
/* Common button styling for both buttons */
.event-card-button button {
max-width: 250px; /* Controls the button size */
padding: 10px;
margin: 10px auto; /* Horizontally centers the button and adds vertical spacing */
background-color: #EE4C7C;
color: #fff;
background-color: var(--primary-color);
color: var(--secondary-color);
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease, transform 0.3s ease; /* Add transition effects */
}
/* Hover effect for the buttons */
.event-card-button button:hover {
background-color: var(--border-color);
transform: scale(1.05); /* Slight scaling effect on hover */
}
/* Remove underline from links with the class 'event-link' */
.event-link {
text-decoration: none; /* Removes the underline */
margin:auto;
}
.register-button:hover {
background-color: #9A1750;
.event-link button {
max-width: 250px; /* Controls the button size */
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
/* Responsive adjustments */
......
src/main/resources/static/css/news/editNewsStyle.css
+ 0
− 6
View file @ c3cc1bbc
body{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.form-container {
display: flex;
justify-content: center;
......
src/main/resources/templates/event/editEvent.html
+ 13
− 11
View file @ c3cc1bbc
<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<head>
<meta charset="UTF-8">
<title>Edit Event</title>
<link rel="stylesheet" href="/css/events/editEvent.css"></link>
</head>
<section>
<section layout:fragment="content">
<h1>Add New Information</h1>
<form th:action="@{/event/editEvent}" th:method="post" th:object="${editEvent}" id="addEventForm">
<fieldset>
<!-- Hidden Event ID -->
<!-- <input th:field="*{event_id}" type="hidden" />-->
<!-- Hidden Event ID -->
<input th:field="*{event_id}" type="hidden" />
<!-- Event Title -->
<label th:for="*{event_title}">Event Title</label>
......@@ -50,12 +52,12 @@
<label th:for="*{benefits}">Benefits</label>
<textarea th:field="*{benefits}" placeholder="List the benefits..."></textarea>
<div class="alert alert-warning" th:errors="*{benefits}" th:if="${#fields.hasErrors('benefits')}">Benefits Error</div>
</fieldset>
<!-- Buttons -->
<div class="buttons">
<a href="#" id="cancelButton" class="button cancel">Cancel</a>
<button type="submit" class="submit">Add Event</button>
</div>
</form></section>
<div class="buttons">
<a href="#" id="cancelButton" class="button cancel">Cancel</a>
<button type="submit" class="submit">Add Event</button>
</div>
</form>
</section>
</html>
\ No newline at end of file
src/main/resources/templates/event/event.html
+ 4
− 2
View file @ c3cc1bbc
......@@ -15,7 +15,6 @@
<!-- Loop through each event and create a clickable link -->
<div class="event-card" th:each="event : ${events}">
<div class="event-card-content">
<a th:href="@{/event/editEvent/{id}(id=${event.getEvent_id()})}" class="event-link"><button>Edit Event</button></a>
<a th:href="@{/event/{id}(id=${event.getEvent_id()})}" class="event-link">
<div class="event-poster">
<img th:src="${event.getImageUrl()} " alt="Image description" id="myImage">
......@@ -26,7 +25,10 @@
<p><strong>Location:</strong> <span th:text="${event.getLocation()}">Event location</span></p>
</a>
</div>
<button class="register-button">Register Now</button>
<div class ="event-card-button">
<button class="register-button">Register Now</button>
<a th:href="@{/event/editEvent/{id}(id=${event.getEvent_id()})}" class="event-link"><button>Edit Event</button></a>
</div>
</div>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment