Skip to content

Commit

Permalink
Merge pull request #58 from wethmiranasinghe/main
Browse files Browse the repository at this point in the history 
Add news button on front-end Updated
  • Loading branch information
@kasundie30
kasundie30 authored Jul 15, 2024
2 parents 5b118cc + 0dffce0 commit 9a6d098
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 148 deletions.
1 change: 0 additions & 1 deletion back-end/src/main/java/com/example/demo/appuser/AppUser.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
public class AppUser implements UserDetails {



/**
* The sequence generator for the primary key of the AppUser entity.
* This generator is used to generate unique IDs for each AppUser.
Expand Down
1 change: 0 additions & 1 deletion back-end/src/main/java/com/example/demo/download/FileRepository.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
/*
* Repository interface for managing FileEntity entities.
*/

@Repository
public interface FileRepository extends JpaRepository<FileEntity, Long> {
}
199 changes: 54 additions & 145 deletions front-end/src/Pages/News.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
import { loggedInUser } from '../Pages/Login';
import '../components/News.css'; // Import your CSS file

const fetchNews = async () => {
try {
Expand All @@ -15,6 +16,7 @@ const fetchNews = async () => {
const News = () => {

const [news, setNews] = useState([]);
const [showForm, setShowForm] = useState(false);

useEffect(() => {
const getNews = async () => {
Expand All @@ -25,171 +27,78 @@ const News = () => {
getNews();
}, []);

const toggleForm = () => {
setShowForm(!showForm);
};

// Visibility of Add news button
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
if (location.pathname === '/news' || loggedInUser.isLoggedIn) {
setIsVisible(true);
}
else {
setIsVisible(false);
}
})
const handleSubmit = (event) => {
event.preventDefault();
const form = event.target;
const newsData = {
newsTitle: form.newsTitle.value,
newsDescription: form.newsDescription.value,
newsUrl: form.newsUrl.value,
newsAuthor: form.newsAuthor.value,
newsDate: form.newsDate.value,
newsCoverImage: form.newsCoverImage.value,
};

const openFormInNewWindow = () => {
const width = 700;
const height = 750;
const left = window.innerWidth / 2 - width / 2;
const top = window.innerHeight / 2 - height / 2;
axios.post('http://localhost:8080/api/v1/news', newsData)
.then(response => {
toggleForm(); // Close the form after successful submission
fetchNews().then(latestNews => setNews(latestNews)); // Refresh news list
})
.catch(error => {
console.error('Error adding news:', error);
});
};

const newWindow = window.open('', '', `width=${width},height=${height},left=${left},top=${top}`);
newWindow.document.write(`
<html>
<head>
<title>Add News Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.add-news-form {
background-color: #ffffff;
padding: 20px;
border: 1px solid #cccccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 700px;
}
.add-news-form h2 {
font-size: 2rem;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group textarea {
width: 100%;
padding: 8px;
font-size: 1rem;
border: 1px solid #cccccc;
border-radius: 4px;
}
.form-buttons {
margin-top: 20px;
}
.form-buttons button {
padding: 10px 20px;
margin-right: 10px;
font-size: 1rem;
background-color: #203a90;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-buttons button[type="button"] {
background-color: #6c757d;
}
.form-buttons button:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
.add-news-form {
padding: 15px;
}
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group textarea {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class="add-news-form">
return (
<>
<div className="News">
<h3>News</h3>
{loggedInUser.isLoggedIn && (
<div>
<button className="AddNewsButton" onClick={toggleForm}>
{showForm ? 'Close Form' : 'Add News'}
</button>
</div>
)}
{showForm && (
<div className="add-news-form-container">
<div className="add-news-form">
<h2>Add News</h2>
<form id="add-news-form" onsubmit="handleSubmit(event)">
<div class="form-group">
<label for="newsTitle">Title:</label>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="newsTitle">Title:</label>
<input type="text" id="newsTitle" name="newsTitle" required />
</div>
<div class="form-group">
<label for="newsDescription">Description:</label>
<div className="form-group">
<label htmlFor="newsDescription">Description:</label>
<textarea id="newsDescription" name="newsDescription" required></textarea>
</div>
<div class="form-group">
<label for="newsUrl">URL:</label>
<div className="form-group">
<label htmlFor="newsUrl">URL:</label>
<input type="url" id="newsUrl" name="newsUrl" required />
</div>
<div class="form-group">
<label for="newsAuthor">Author:</label>
<div className="form-group">
<label htmlFor="newsAuthor">Author:</label>
<input type="text" id="newsAuthor" name="newsAuthor" required />
</div>
<div class="form-group">
<label for="newsDate">Date:</label>
<div className="form-group">
<label htmlFor="newsDate">Date:</label>
<input type="date" id="newsDate" name="newsDate" required />
</div>
<div class="form-group">
<label for="newsCoverImage">Cover Image URL:</label>
<div className="form-group">
<label htmlFor="newsCoverImage">Cover Image URL:</label>
<input type="url" id="newsCoverImage" name="newsCoverImage" required />
</div>
<div class="form-buttons">
<div className="form-buttons">
<button type="submit">Add News</button>
<button type="button" onclick="window.close()">Cancel</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function handleSubmit(event) {
event.preventDefault();
const form = event.target;
const newsData = {
newsTitle: form.newsTitle.value,
newsDescription: form.newsDescription.value,
newsUrl: form.newsUrl.value,
newsAuthor: form.newsAuthor.value,
newsDate: form.newsDate.value,
newsCoverImage: form.newsCoverImage.value,
};
axios.post('http://localhost:8080/api/v1/news', newsData)
.then(response => {
window.close();
if (window.opener && !window.opener.closed) {
window.opener.location.reload(); // Reload the main window
}
})
.catch(error => {
console.error('Error adding news:', error);
});
}
</script>
</body>
</html>
`);
};

return (
<>
<div className="News">
<h3>News</h3>
{isVisible && <div><button className="AddNewsButton" onClick={openFormInNewWindow}>Add News</button></div>}
</div>)}
</div>
<div className="news-container">
{news.map((item) => (
Expand Down
96 changes: 95 additions & 1 deletion front-end/src/components/News.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,100 @@
color: #ffffff;
}

.add-news-form {
background-color: #ffffff;
padding: 20px;
border: 1px solid #cccccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(22, 21, 21, 0.1);
width: 700px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
margin-top: 5px;
}

.add-news-form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.add-news-form h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #203a90;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

.form-group input {
background: transparent;
color: black;
}

.form-group textarea {
background: transparent;
color: black;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group textarea {
width: 100%;
padding: 8px;
font-size: 1rem;
border: 1px solid #cccccc;
border-radius: 4px;
}

.form-buttons {
margin-top: 20px;
}

.form-buttons button {
padding: 10px 20px;
margin-right: 10px;
font-size: 1rem;
background-color: #203a90;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.form-buttons button[type="button"] {
background-color: #6c757d;
}

.form-buttons button:hover {
opacity: 0.8;
}

@media (max-width: 768px) {
.add-news-form {
padding: 15px;
width: 100%;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group textarea {
font-size: 0.9rem;
}
}

.news-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
Expand All @@ -33,7 +127,7 @@
.news-tile {
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(92, 67, 67, 0.1);
}

.news-tile img {
Expand Down

0 comments on commit 9a6d098

Please sign in to comment.