From 348c471e2670ffb8bdaaa92f5c7014e7c04a9410 Mon Sep 17 00:00:00 2001
From: dekzter <kappa118@gmail.com>
Date: Fri, 11 Apr 2025 17:15:43 -0400
Subject: [PATCH] toggle m3u and epg active from ui

---
 frontend/src/api.js                          |  1 +
 frontend/src/components/tables/EPGsTable.jsx | 27 +++++++++++++++++++-
 frontend/src/components/tables/M3UsTable.jsx | 16 ++++++++++--
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/frontend/src/api.js b/frontend/src/api.js
index 94183a10..92dc84e8 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -712,6 +712,7 @@ export default class API {
         if (!payload.url) {
           delete payload.url;
         }
+        body = payload;
       }
 
       const response = await request(`${host}/api/epg/sources/${id}/`, {
diff --git a/frontend/src/components/tables/EPGsTable.jsx b/frontend/src/components/tables/EPGsTable.jsx
index 31b71077..85584fca 100644
--- a/frontend/src/components/tables/EPGsTable.jsx
+++ b/frontend/src/components/tables/EPGsTable.jsx
@@ -13,6 +13,7 @@ import {
   Button,
   Flex,
   useMantineTheme,
+  Switch,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconSquarePlus } from '@tabler/icons-react';
@@ -25,10 +26,16 @@ const EPGsTable = () => {
   const [rowSelection, setRowSelection] = useState([]);
 
   const { epgs } = useEPGsStore();
-  console.log(epgs);
 
   const theme = useMantineTheme();
 
+  const toggleActive = async (epg) => {
+    await API.updateEPG({
+      ...epg,
+      is_active: !epg.is_active,
+    });
+  };
+
   const columns = useMemo(
     //column definitions...
     () => [
@@ -45,6 +52,24 @@ const EPGsTable = () => {
         accessorKey: 'url',
         enableSorting: false,
       },
+      {
+        header: 'Active',
+        accessorKey: 'is_active',
+        size: 100,
+        sortingFn: 'basic',
+        mantineTableBodyCellProps: {
+          align: 'left',
+        },
+        Cell: ({ row, cell }) => (
+          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Switch
+              size="xs"
+              checked={cell.getValue()}
+              onChange={() => toggleActive(row.original)}
+            />
+          </Box>
+        ),
+      },
       {
         header: 'Updated',
         accessorFn: (row) => dayjs(row.updated_at).format('MMMM D, YYYY h:mma'),
diff --git a/frontend/src/components/tables/M3UsTable.jsx b/frontend/src/components/tables/M3UsTable.jsx
index c4bd273a..08ec142e 100644
--- a/frontend/src/components/tables/M3UsTable.jsx
+++ b/frontend/src/components/tables/M3UsTable.jsx
@@ -13,6 +13,7 @@ import {
   Box,
   ActionIcon,
   Tooltip,
+  Switch,
 } from '@mantine/core';
 import { SquareMinus, SquarePen, RefreshCcw, Check, X } from 'lucide-react';
 import { IconSquarePlus } from '@tabler/icons-react'; // Import custom icons
@@ -84,6 +85,13 @@ const M3UTable = () => {
     return `Parsing: ${data.progress}%`;
   };
 
+  const toggleActive = async (playlist) => {
+    await API.updatePlaylist({
+      ...playlist,
+      is_active: !playlist.is_active,
+    });
+  };
+
   const columns = useMemo(
     //column definitions...
     () => [
@@ -133,9 +141,13 @@ const M3UTable = () => {
         mantineTableBodyCellProps: {
           align: 'left',
         },
-        Cell: ({ cell }) => (
+        Cell: ({ row, cell }) => (
           <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            {cell.getValue() ? <Check color="green" /> : <X color="red" />}
+            <Switch
+              size="xs"
+              checked={cell.getValue()}
+              onChange={() => toggleActive(row.original)}
+            />
           </Box>
         ),
       },