add playlist sort order toggle, #171

frontend/src/api/actions/updatePlaylistSortOrder.ts

@@ -0,0 +1,10 @@
+import APIClient from '../../functions/APIClient';
+
+const updatePlaylistSortOrder = async (playlistId: string, newSortOrder: 'top' | 'bottom') => {
+  return APIClient(`/api/playlist/${playlistId}/`, {
+    method: 'POST',
+    body: { playlist_sort_order: newSortOrder },
+  });
+};
+
+export default updatePlaylistSortOrder;

frontend/src/api/loader/loadPlaylistById.ts

@@ -14,6 +14,7 @@ export type PlaylistType = {
   playlist_channel_id: string;
   playlist_description: string;
   playlist_entries: PlaylistEntryType[];
+  playlist_sort_order: 'top' | 'bottom';
   playlist_id: string;
   playlist_last_refresh: string;
   playlist_name: string;

frontend/src/pages/Playlist.tsx

@@ -31,6 +31,7 @@ import useIsAdmin from '../functions/useIsAdmin';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 import { ApiResponseType } from '../functions/APIClient';
 import NotFound from './NotFound';
+import updatePlaylistSortOrder from '../api/actions/updatePlaylistSortOrder';
 
 export type VideoResponseType = {
   data?: VideoType[];
@@ -287,6 +288,31 @@ const Playlist = () => {
                   />
                 </div>
               )}
+              <div className="toggle">
+                <span>Switch sort order:</span>
+                <div className="toggleBox">
+                  <input
+                    id="playlist_sort_order"
+                    type="checkbox"
+                    checked={playlist.playlist_sort_order === 'bottom'}
+                    onChange={async () => {
+                      const newSortOrder =
+                        playlist.playlist_sort_order === 'top' ? 'bottom' : 'top';
+                      await updatePlaylistSortOrder(playlist.playlist_id, newSortOrder);
+                      setRefresh(true);
+                    }}
+                  />
+                  {playlist.playlist_sort_order === 'bottom' ? (
+                    <label htmlFor="" className="onbtn">
+                      On
+                    </label>
+                  ) : (
+                    <label htmlFor="" className="ofbtn">
+                      Off
+                    </label>
+                  )}
+                </div>
+              </div>
             </div>
           </div>
         </div>