Add feed
This commit is contained in:
Greg Shuflin
parent
5db2cb4ead
commit
50d1171f19
51
static/js/app.js
Normal file
51
static/js/app.js
Normal file
@ -0,0 +1,51 @@
|
||||
// Logout functionality
|
||||
document.getElementById('logoutButton').addEventListener('click', async () => {
|
||||
try {
|
||||
const response = await fetch('/logout', {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Modal functionality
|
||||
const modal = document.getElementById('addFeedModal');
|
||||
const addFeedButton = document.getElementById('addFeedButton');
|
||||
const cancelButton = document.getElementById('cancelAddFeed');
|
||||
const confirmButton = document.getElementById('confirmAddFeed');
|
||||
const addFeedForm = document.getElementById('addFeedForm');
|
||||
|
||||
function showModal() {
|
||||
modal.classList.add('show');
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
modal.classList.remove('show');
|
||||
addFeedForm.reset();
|
||||
}
|
||||
|
||||
addFeedButton.addEventListener('click', showModal);
|
||||
cancelButton.addEventListener('click', hideModal);
|
||||
|
||||
// Close modal when clicking outside
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
|
||||
confirmButton.addEventListener('click', async () => {
|
||||
const feedUrl = document.getElementById('feedUrl').value;
|
||||
if (!feedUrl) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Add API endpoint integration here
|
||||
console.log('Feed URL to add:', feedUrl);
|
||||
hideModal();
|
||||
});
|
||||
@ -11,7 +11,7 @@
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -20,6 +20,12 @@
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.top-bar-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
@ -34,6 +40,110 @@
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
.add-feed-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.add-feed-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal-footer button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #545b62;
|
||||
}
|
||||
|
||||
/* Adjust main content to account for top bar */
|
||||
.with-sidebar {
|
||||
padding-top: 3rem;
|
||||
@ -46,8 +156,34 @@
|
||||
</head>
|
||||
<body class="with-sidebar">
|
||||
<div class="top-bar">
|
||||
<div class="top-bar-buttons">
|
||||
<button class="add-feed-button" id="addFeedButton">Add Feed</button>
|
||||
</div>
|
||||
<button class="logout-button" id="logoutButton">Logout</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Feed Modal -->
|
||||
<div class="modal" id="addFeedModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Add RSS Feed</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addFeedForm">
|
||||
<div class="form-group">
|
||||
<label for="feedUrl">Feed URL</label>
|
||||
<input type="url" id="feedUrl" name="feedUrl" required
|
||||
placeholder="https://example.com/feed.xml">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn-secondary" id="cancelAddFeed">Cancel</button>
|
||||
<button type="button" class="btn-primary" id="confirmAddFeed">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
@ -61,20 +197,6 @@
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('logoutButton').addEventListener('click', async () => {
|
||||
try {
|
||||
const response = await fetch('/logout', {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user