feat: Add filtering, M3U import/export, and channel management features

- Add filtering system with multiple filter types and tags - Implement M3U playlist import and export functionality - Add channel sorting by group and name - Add URL validation checking for stream URLs - Improve pagination with dynamic page numbers - Add modal forms for channel management - Enhance UI with Bootstrap styling
rafikb · Nov 7, 2024 · 789319a · 789319a
1 parent 512e59b
commit 789319a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 31 deletions.
diff --git a/app.js b/app.js
@@ -35,11 +35,16 @@ function initializeEventListeners() {
 
 	// Filter controls
 	document.getElementById('add-filter').addEventListener('click', handleAddFilter);
+
+	// Add this line
+	document.getElementById('add-channel-button').addEventListener('click', () => $('#channelModal').modal('show'));
+	document.getElementById('save-channel').addEventListener('click', handleChannelSubmit);
 }
 
 // Channel form handler
 function handleChannelSubmit(e) {
-	e.preventDefault();
+	if (e) e.preventDefault();
+
 	var name = document.getElementById('name').value;
 	var logoId = document.getElementById('logo-id').value;
 	var groupId = document.getElementById('group-id').value;
@@ -74,6 +79,10 @@ function handleChannelSubmit(e) {
 	}
 	localStorage.setItem('channels', JSON.stringify(channels));
 	loadChannels();
+
+	// Add these lines at the end
+	$('#channelModal').modal('hide');
+	document.getElementById('channel-form').reset();
 }
 
 // Channel loading and display
@@ -137,10 +146,7 @@ function displayChannels(channels) {
 			document.getElementById('epg-id').value = channel.epgId;
 			document.getElementById('provider-id').value = channel.providerId;
 			document.getElementById('stream-urls').value = channel.streamUrls.join('\n');
-			// Scroll to the form
-			document.getElementById('channel-form').scrollIntoView({
-				behavior: 'smooth'
-			});
+			$('#channelModal').modal('show');
 		});
 
 		cardBody.appendChild(deleteButton);

diff --git a/index.html b/index.html
@@ -9,21 +9,17 @@
 <body>
     <div class="container">
         <h1>M3U Playlist Manager</h1>
-        <form id="channel-form" class="mb-3">
-            <input type="text" id="name" class="form-control" placeholder="Channel Name" required>
-            <br>
-            <input type="text" id="logo-id" class="form-control" placeholder="Logo ID" required>
-            <br>
-            <input type="text" id="group-id" class="form-control" placeholder="Group ID" required>
-            <br>
-            <input type="text" id="epg-id" class="form-control" placeholder="EPG ID" required>
-            <br>
-            <input type="text" id="provider-id" class="form-control" placeholder="Provider ID" required>
-            <br>
-            <textarea id="stream-urls" class="form-control" placeholder="Stream URLs (one per line)" required></textarea>
-            <br>
-            <button type="submit" class="btn btn-primary mt-2">Add Channel</button>
-        </form>
+        <div class="d-flex flex-wrap gap-2 mb-3">
+            <button id="add-channel-button" class="btn btn-primary">Add Channel</button>
+            <button id="save-playlist" class="btn btn-primary">Save Playlist</button>
+            <input type="file" id="load-playlist" style="display: none;">
+            <button id="load-playlist-button" class="btn btn-primary">Load Playlist</button>
+            <button id="check-urls" class="btn btn-primary">Check URLs</button>
+            <button id="sort-channels" class="btn btn-primary">Sort Channels</button>
+            <button id="export-m3u" class="btn btn-primary">Export M3U</button>
+            <input type="file" id="import-m3u" style="display: none;">
+            <button id="import-m3u-button" class="btn btn-primary">Import M3U</button>
+        </div>
 
         <div class="filter-controls mb-3">
             <div class="row">
@@ -57,17 +53,6 @@ <h1>M3U Playlist Manager</h1>
                 </div>
             </div>
         </div>
-
-        <div class="toolbar mb-3">
-            <button id="save-playlist" class="btn btn-primary">Save Playlist</button>
-            <input type="file" id="load-playlist" style="display: none;">
-            <button id="load-playlist-button" class="btn btn-primary">Load Playlist</button>
-            <button id="check-urls" class="btn btn-primary">Check URLs</button>
-            <button id="sort-channels" class="btn btn-primary">Sort Channels</button>
-            <button id="export-m3u" class="btn btn-primary">Export M3U</button>
-            <input type="file" id="import-m3u" style="display: none;">
-            <button id="import-m3u-button" class="btn btn-primary">Import M3U</button>
-        </div>
     </div>
 
     <!-- Modal component for M3U Export -->
@@ -96,6 +81,34 @@ <h5 class="modal-title">Export Options</h5>
         </div>
     </div>
 
+    <!-- Modal component for adding a new channel -->
+    <div class="modal" tabindex="-1" role="dialog" id="channelModal">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Add Channel</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="channel-form">
+                        <input type="text" id="name" class="form-control mb-2" placeholder="Channel Name" required>
+                        <input type="text" id="logo-id" class="form-control mb-2" placeholder="Logo ID" required>
+                        <input type="text" id="group-id" class="form-control mb-2" placeholder="Group ID" required>
+                        <input type="text" id="epg-id" class="form-control mb-2" placeholder="EPG ID" required>
+                        <input type="text" id="provider-id" class="form-control mb-2" placeholder="Provider ID" required>
+                        <textarea id="stream-urls" class="form-control mb-2" placeholder="Stream URLs (one per line)" required></textarea>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" id="save-channel">Save Channel</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Scripts -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

diff --git a/styles.css b/styles.css
@@ -16,4 +16,16 @@
     font-size: 1.1rem;
     text-align: center;
     width: 100%;
+}
+
+.gap-2 {
+    gap: 0.5rem;
+}
+
+.d-flex {
+    display: flex;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
 }