toggle m3u and epg active from ui

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}/`, {

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'),

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>
         ),
       },