Made the UI. Now the back-end.

client/src/components/MainWindow.tsx

@@ -9,6 +9,7 @@ import ArtistWindow from './windows/ArtistWindow';
 import AlbumWindow from './windows/AlbumWindow';
 import TagWindow from './windows/TagWindow';
 import SongWindow from './windows/SongWindow';
+import ManageWindow from './windows/ManageWindow';
 var _ = require('lodash');
 
 const darkTheme = createMuiTheme({
@@ -76,6 +77,7 @@ export default function MainWindow(props: any) {
             newWindowState[WindowType.Album](),
             newWindowState[WindowType.Artist](),
             newWindowState[WindowType.Tag](),
+            newWindowState[WindowType.Manage](),
         ],
         tabReducers: [
             newWindowReducer[WindowType.Query],
@@ -83,6 +85,7 @@ export default function MainWindow(props: any) {
             newWindowReducer[WindowType.Album],
             newWindowReducer[WindowType.Artist],
             newWindowReducer[WindowType.Tag],
+            newWindowReducer[WindowType.Manage],
         ],
         tabTypes: [
             WindowType.Query,
@@ -90,6 +93,7 @@ export default function MainWindow(props: any) {
             WindowType.Album,
             WindowType.Artist,
             WindowType.Tag,
+            WindowType.Manage,
         ],
         activeTab: 0
     })
@@ -134,6 +138,12 @@ export default function MainWindow(props: any) {
                     dispatch={tabDispatch}
                     mainDispatch={dispatch}
                 />
+            case WindowType.Manage:
+                return <ManageWindow
+                    state={tabState}
+                    dispatch={tabDispatch}
+                    mainDispatch={dispatch}
+                />
             default:
                 throw new Error("Unimplemented window type");
         }

client/src/components/windows/ManageWindow.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import * as serverApi from '../../api';
+import { WindowState } from './Windows';
+import { Box, Button, Dialog, DialogTitle, DialogContent, CircularProgress } from '@material-ui/core';
+var _ = require('lodash');
+
+export enum ClearDBState {
+    None = 0,
+    Confirming,
+    Executing,
+}
+
+export interface ManageWindowState extends WindowState {
+    clearDBState: ClearDBState,
+}
+
+export enum ManageWindowStateActions {
+    SetClearDBState = "SetClearDBState",
+}
+
+export function ManageWindowReducer(state: ManageWindowState, action: any) {
+    switch (action.type) {
+        case ManageWindowStateActions.SetClearDBState:
+            return { ...state, clearDBState: action.value }
+        default:
+            throw new Error("Unimplemented ManageWindow state update.")
+    }
+}
+
+export interface IProps {
+    state: ManageWindowState,
+    dispatch: (action: any) => void,
+    mainDispatch: (action: any) => void,
+}
+
+export default function ManageWindow(props: IProps) {
+    const startClearDB = () => {
+        props.dispatch({
+            type: ManageWindowStateActions.SetClearDBState,
+            value: ClearDBState.Executing,
+        })
+    }
+
+    return <>
+        <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
+            <Box
+                m={1}
+                mt={4}
+                width="80%"
+            >
+                <Button
+                    variant="contained" color="secondary"
+                    onClick={() => props.dispatch({
+                        type: ManageWindowStateActions.SetClearDBState,
+                        value: ClearDBState.Confirming
+                    })}
+                >Clear database</Button>
+            </Box>
+        </Box>
+        <Dialog
+            open={props.state.clearDBState === ClearDBState.Confirming}
+        >
+            <DialogTitle>Are you sure?</DialogTitle>
+            <DialogContent>
+                <Box m={1}>
+                    Clearing the database cannot be undone. All music information will be lost.
+                </Box>
+                <Box m={1} display="flex" alignItems="center">
+                    <Box m={1}>
+                        <Button
+                            variant="contained" color="secondary"
+                            onClick={startClearDB}
+                        >I'm sure</Button>
+                    </Box>
+                    <Box m={1}>
+                        <Button
+                            variant="outlined"
+                            onClick={() => props.dispatch({
+                                type: ManageWindowStateActions.SetClearDBState,
+                                value: ClearDBState.None
+                            })}
+                        >Never mind</Button>
+                    </Box>
+                </Box>
+            </DialogContent>
+        </Dialog>
+        <Dialog
+            open={props.state.clearDBState === ClearDBState.Executing}
+        >
+            <DialogTitle>Clearing Database</DialogTitle>
+            <DialogContent>
+                    <CircularProgress />
+            </DialogContent>
+        </Dialog>
+    </>
+}

client/src/components/windows/Windows.tsx

@@ -6,10 +6,12 @@ import PersonIcon from '@material-ui/icons/Person';
 import AlbumIcon from '@material-ui/icons/Album';
 import LocalOfferIcon from '@material-ui/icons/LocalOffer';
 import AudiotrackIcon from '@material-ui/icons/Audiotrack';
+import SettingsIcon from '@material-ui/icons/Settings';
 import { SongWindowReducer } from './SongWindow';
 import { AlbumWindowReducer } from './AlbumWindow';
 import { TagWindowReducer } from './TagWindow';
 import { songGetters } from '../../lib/songGetters';
+import { ManageWindowReducer, ClearDBState } from './ManageWindow';
 
 export enum WindowType {
     Query = "Query",
@@ -17,6 +19,7 @@ export enum WindowType {
     Album = "Album",
     Tag = "Tag",
     Song = "Song",
+    Manage = "Manage",
 }
 
 export interface WindowState {
@@ -29,6 +32,7 @@ export const newWindowReducer = {
     [WindowType.Album]: AlbumWindowReducer,
     [WindowType.Song]: SongWindowReducer,
     [WindowType.Tag]: TagWindowReducer,
+    [WindowType.Manage]: ManageWindowReducer,
 }
 
 export const newWindowState = {
@@ -78,4 +82,10 @@ export const newWindowState = {
             songsWithTag: null,
         }
     },
+    [WindowType.Manage]: () => {
+        return {
+            tabLabel: <><SettingsIcon/>Manage</>,
+            clearDBState: ClearDBState.None,
+        }
+    }
 }