From cad9a3064e1eaa3dbc9db9fa976b9f3228ae9697 Mon Sep 17 00:00:00 2001
From: Steven Engelbert <steve@micro-nova.com>
Date: Mon, 14 Oct 2024 10:28:14 -0400
Subject: [PATCH] Add link to LMS Control Panel from settings page when LMS
 Mode is active

---
 .../Settings/Config/ConfigPanels/LMSMode.jsx  | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Settings/Config/ConfigPanels/LMSMode.jsx b/web/src/pages/Settings/Config/ConfigPanels/LMSMode.jsx
index e6d9adaea..6ef3fda8b 100644
--- a/web/src/pages/Settings/Config/ConfigPanels/LMSMode.jsx
+++ b/web/src/pages/Settings/Config/ConfigPanels/LMSMode.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import "../Config.scss";
+import Button from "@mui/material/Button/Button";
+import Grid from "@mui/material/Grid/Grid";
 import ConfigPanel from './ConfigTemplates/ConfigPanel.jsx';
 import { useStatusStore } from "@/App.jsx";
 import Switch from '@mui/material/Switch/Switch';
@@ -20,6 +22,16 @@ export default function LMSMode() {
         setLoading(false);
     };
 
+    function LMSControlLink() {
+        if(lmsMode){
+            return (
+                <Button target="_blank" href={`http://${window.location.hostname}:9000`} className="config-spacing">
+                    LMS Control Panel
+                </Button>
+            )
+        }
+    }
+
     function LMSModal(){
         if(lmsMode){
             return(
@@ -50,11 +62,22 @@ export default function LMSMode() {
                 subheader={"Toggles LMS Mode on or off. LMS is useful for piggy-backing off integrations AmpliPi does not have natively. This will wipe out the current config! As a result, it downloads the current config before proceeding with LMS mode."}
                 loading={loading}
             >
-                <Switch
-                    checked={lmsMode}
-                    onClick={() => {setModalOpen(true);}}
-                    inputProps={{ "aria-label": "controlled" }}
-                />
+                <Grid
+                    container
+                    direction="row"
+                    alignItems="center"
+                >
+                    <Grid item>
+                        <Switch
+                            checked={lmsMode}
+                            onClick={() => {setModalOpen(true);}}
+                            inputProps={{ "aria-label": "controlled" }}
+                        />
+                    </Grid>
+                    <Grid item>
+                        <LMSControlLink/>
+                    </Grid>
+                </Grid>
             </ConfigPanel>
 
             <LMSModal />