Progyssey/Calmerge
2
0
Fork 1
Code Issues 2 Pull requests Releases Activity

feat(calendar): unify calendar name input and calendar search input fields

Browse source
This commit is contained in:
ryan 2025-07-28 15:11:45 +03:00
parent c3e86bfead
commit 077077dffe
4 changed files with 61 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
public/index.html
View file

@ -13,23 +13,19 @@
<!-- Merge Form -->
<div class="form-card">
<form id="merge-form">
<!-- Find Existing Calendar Section -->
<!-- Unified Calendar Collection Section -->
<h2>Calendar Collection Name</h2>
<div class="input-group">
<h2>Find Existing Calendar</h2>
<div class="search-container">
<input type="text" id="calendar-search" placeholder="Enter calendar name">
<button type="button" id="search-btn" class="button primary-btn">Search</button>
<input type="text"
id="link-group-name"
placeholder="Enter collection name (existing or new)"
class="input-field">
<button type="button" id="search-btn" class="button secondary-btn">Search</button>
</div>
<div id="search-result"></div>
</div>
<!-- Merge Calendars Section -->
<h2>Merge Calendars</h2>
<div class="input-group">
<input type="text"
id="link-group-name"
placeholder="Enter collection name"
class="input-field">
<div class="collection-status" id="collection-status"></div>
</div>
<!-- Global Settings -->

74
public/script.js
View file

@ -60,44 +60,70 @@ function extractCalendarName(input) {
// Event listener for the search button
if (searchBtn) {
searchBtn.addEventListener('click', searchCalendar);
// Also search when pressing Enter in the search field
if (calendarSearch) {
calendarSearch.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
searchCalendar();
}
});
}
}
// Function to search for a calendar
// Event listener for the unified input field
const linkGroupNameInput = document.getElementById('link-group-name');
if (linkGroupNameInput) {
// Search when pressing Enter
linkGroupNameInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault(); // Prevent form submission
searchCalendar();
}
});
// Clear status when user starts typing
linkGroupNameInput.addEventListener('input', function() {
// Clear search results when user modifies the input
if (searchResult) {
searchResult.innerHTML = '';
}
// Reset editing state when input changes significantly
if (isEditing && this.value.trim() !== currentCalendarName) {
isEditing = false;
currentCalendarName = '';
}
});
}
// Function to search for a calendar using the unified input
function searchCalendar() {
let calendarName = calendarSearch.value.trim();
let calendarName = document.getElementById('link-group-name').value.trim();
if (!calendarName) {
searchResult.innerHTML = '<div class="alert alert-warning">Please enter a calendar name</div>';
searchResult.innerHTML = '<div class="alert alert-warning">Please enter a collection name</div>';
return;
}
// Extract just the calendar name if a URL was entered
calendarName = extractCalendarName(calendarName);
// Update the input field with the extracted name
document.getElementById('link-group-name').value = calendarName;
searchResult.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
// Check if calendar exists
fetch(`/calendar-config/${calendarName}`)
.then(response => response.json())
.then(data => {
const statusElement = document.getElementById('collection-status');
if (data.exists) {
searchResult.innerHTML = `<div class="alert alert-success">Calendar found!</div>`;
// Clear search result
searchResult.innerHTML = '';
loadCalendarConfig(data.config, calendarName);
} else {
searchResult.innerHTML = `<div class="alert alert-danger">Calendar not found</div>`;
} else {
// Clear search result for new collections
searchResult.innerHTML = '';
// Reset to creation mode
isEditing = false;
currentCalendarName = '';
}
})
.catch(error => {
console.error('Error searching for calendar:', error);
searchResult.innerHTML = `<div class="alert alert-danger">Error searching for calendar</div>`;
searchResult.innerHTML = `<div class="alert alert-danger">Error checking collection</div>`;
document.getElementById('collection-status').innerHTML = '';
});
}
@ -213,27 +239,29 @@ form.addEventListener('submit', (event) => {
})
.then((data) => {
mergedUrl = data.url;
// Hide the info text when showing results
if (resultInfo) {
resultInfo.style.display = 'none';
}
const statusElement = document.getElementById('collection-status');
if (isEditing) {
result.innerHTML = `Updated calendar URL: <a href="${data.url}">${data.url}</a>`;
result.innerHTML = `Collection updated successfully! <br>URL: <a href="${data.url}" target="_blank">${data.url}</a>`;
// Update the search result
if (searchResult) {
searchResult.innerHTML = `<div class="alert alert-success">Calendar updated successfully!</div>`;
}
// Reset editing state
isEditing = false;
currentCalendarName = '';
} else {
result.innerHTML = `Merged calendar URL: <a href="${data.url}">${data.url}</a>`;
result.innerHTML = `New collection created! <br>URL: <a href="${data.url}" target="_blank">${data.url}</a>`;
}
console.log('Operation completed successfully!');
})
.catch((error) => {

1
public/styles.css
View file

@ -33,7 +33,6 @@
.input-group {
display: grid;
gap: 1rem;
margin-bottom: 1.5rem;
}
/* Calendar Entry Styling */

2
src/app.js
View file

@ -1,6 +1,6 @@
import server from './server.js';
const port = process.env.NODE_PORT || 3012;
const port = process.env.NODE_PORT || 3013;
server.listen(port, () => {
console.log(`Server started on port ${port}`);
});