add save/cancel button to payment-page-config-page, add transparent b…

…ackground to alerts
OpenDonationAssistant · Jan 21, 2024 · 5a7e9d9 · 5a7e9d9
1 parent 1540c5e
commit 5a7e9d9
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 78 deletions.
diff --git a/src/components/ConfigurationPage/ConfigurationPage.tsx b/src/components/ConfigurationPage/ConfigurationPage.tsx
@@ -36,12 +36,11 @@ const types = [
   { name: "payments", description: "Payment History" },
   { name: "player-control", description: "Music Player Remote Control" },
   { name: "donation-timer", description: "Donation Timer" },
-  { name: "donation-timer", description: "Donation Timer" },
 ];
 
 export default function ConfigurationPage({}: {}) {
   const [config, setConfig] = useState(new Map());
-	
+
   function updateConfig(id: string, key: string, value) {
     setConfig((oldConfig) => {
       let updatedProperties = oldConfig.get(id)?.properties.map((it) => {
@@ -135,7 +134,7 @@ export default function ConfigurationPage({}: {}) {
                 className="new-widget-type-button"
                 onClick={() => {
                   addWidget(type.name, widgets.length)
-                    .then((ignore) => loadSettings())
+                    .then(() => loadSettings())
                     .then((updatedSettings) => setWidgets(updatedSettings));
                   setShowAddWidgetPopup(false);
                 }}

diff --git a/src/components/ConfigurationPage/WidgetSettings.ts b/src/components/ConfigurationPage/WidgetSettings.ts
@@ -154,7 +154,14 @@ const defaultSettings = {
     ],
   },
   "payment-alerts": {
-    properties: [],
+    properties: [
+      {
+        name: "useGreenscreen",
+        type: "boolean",
+        value: false,
+        displayName: "Использовать greenscreen"
+      },
+    ],
     alerts: [],
   },
   "player-info": {

diff --git a/src/components/ConfigurationPage/css/Toolbar.css b/src/components/ConfigurationPage/css/Toolbar.css
@@ -1,5 +1,5 @@
 .toolbar {
-  /* position: fixed; */
+  position: fixed;
   height: 100%;
   width: 250px;
   border-right: 1px solid #674afd;

diff --git a/src/components/ConfigurationPage/css/WidgetList.css b/src/components/ConfigurationPage/css/WidgetList.css
@@ -1,5 +1,5 @@
 .widget-list {
-  margin-left: 100px;
+  margin-left: 300px;
   margin-right: 100px;
   padding-top: 20px;
   flex: 1 0 auto;

diff --git a/src/components/ConfigurationPage/settings/BaseSettings.tsx b/src/components/ConfigurationPage/settings/BaseSettings.tsx
@@ -14,15 +14,17 @@ export default function BaseSettings({
 }) {
   const { config, setConfig } = useContext(WidgetsContext);
 
-  function update(key: string, value: string) {
+  function update(key: string, value: any) {
     setConfig((oldConfig) => {
-      let updatedProperties = oldConfig.get(id)?.properties.map((it) => {
+      const widgetSettings = oldConfig.get(id);
+      let updatedProperties = widgetSettings?.properties.map((it) => {
         if (it.name === key) {
           it.value = value;
         }
         return it;
       });
-      return new Map(oldConfig).set(id, { properties: updatedProperties });
+      widgetSettings.properties = updatedProperties;
+      return new Map(oldConfig).set(id,widgetSettings);
     });
     onChange.call({});
   }
@@ -61,7 +63,21 @@ export default function BaseSettings({
               />
             </>
           )}
-          {prop.type === "custom" && customHandler ? customHandler(prop) : <></>}
+          {prop.type === "boolean" && (
+            <>
+              <input
+                type="checkbox"
+                className="widget-settings-value"
+                checked={true === prop.value}
+                onChange={(e) => update(prop.name, !prop.value)}
+              />
+            </>
+          )}
+          {prop.type === "custom" && customHandler ? (
+            customHandler(prop)
+          ) : (
+            <></>
+          )}
         </div>
       ))}
     </>

diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { WidgetsContext } from "../WidgetsContext";
 import axios from "axios";
 import ColorPicker from "./ColorPicker";
+import BaseSettings from "./BaseSettings";
 
 interface PaymentAlertSettingsProps {
   id: string;
@@ -221,10 +222,11 @@ export default function PaymentAlertSettings({
       ],
     });
 
-    setConfig(
-      new Map(config).set(id, {
-        alerts: alerts,
-      }),
+    setConfig((oldConfig) => {
+      const alertConfig = oldConfig.get(id);
+      alertConfig.alerts = alerts;
+      return new Map(config).set(id, alertConfig);
+    }
     );
 
     setSelected(alerts.length - 1);
@@ -268,13 +270,13 @@ export default function PaymentAlertSettings({
       console.log(file);
       uploadFile(file).then((ignore) => {
         setConfig((oldConfig) => {
-          const alerts = config.get(id)?.alerts;
+          const alertConfig = oldConfig.get(id);
+          const alerts = alertConfig?.alerts;
           let updatedAlerts = alerts?.at(selected);
           updatedAlerts.image = file.name;
           alerts[selected] = updatedAlerts;
-          const newConfig = new Map(oldConfig).set(id, {
-            alerts: alerts,
-          });
+          alertConfig.alerts = alerts;
+          const newConfig = new Map(oldConfig).set(id, alertConfig);
           return newConfig;
         });
         onChange.call({});
@@ -288,13 +290,13 @@ export default function PaymentAlertSettings({
       console.log(file);
       uploadFile(file).then((ignore) => {
         setConfig((oldConfig) => {
-          const alerts = config.get(id)?.alerts;
+          const alertConfig = oldConfig.get(id);
+          const alerts = alertConfig?.alerts;
           let updatedAlerts = alerts?.at(selected);
           updatedAlerts.audio = file.name;
           alerts[selected] = updatedAlerts;
-          const newConfig = new Map(oldConfig).set(id, {
-            alerts: alerts,
-          });
+          alertConfig.alerts = alerts;
+          const newConfig = new Map(oldConfig).set(id, alertConfig);
           return newConfig;
         });
         onChange.call({});
@@ -548,6 +550,7 @@ export default function PaymentAlertSettings({
 
   return (
     <>
+      <BaseSettings id={id} onChange={onChange} />
       {previews()}
       {selected > -1 && (
         <div className="payment-alert-settings">

diff --git a/src/components/MediaWidget/MediaWidget.tsx b/src/components/MediaWidget/MediaWidget.tsx
@@ -14,11 +14,12 @@ import { log } from "../../logging";
 import RequestsDisabledWarning from "./RequestsDisabledWarning";
 import MenuEventButton from "../Menu/MenuEventButton";
 import MenuButton from "../Menu/MenuButton";
+import { Song } from "./types";
 
 export default function MediaWidget({}: {}) {
   const [playlist, setPlaylist] = useState([]);
   const [current, setCurrent] = useState(0);
-  const playlistController = useRef<PlaylistController>(null);
+  const playlistController = useRef<PlaylistController|null>(null);
   const paymentPageConfig = useRef<PaymentPageConfig>();
   const navigate = useNavigate();
   const { recipientId, conf, widgetId } = useLoaderData();
@@ -30,7 +31,7 @@ export default function MediaWidget({}: {}) {
       recipientId,
       setPlaylist,
       setCurrent,
-      (tab) => {
+      (tab: PLAYLIST_TYPE) => {
         setActiveTab(tab);
         log.debug(`using tab ${tab}`);
       },
@@ -53,7 +54,7 @@ export default function MediaWidget({}: {}) {
   }, [recipientId, widgetId]);
 
   useEffect(() => {
-    function toggle(event) {
+    const toggle: EventListenerOrEventListenerObject = (event: { detail: boolean }) => {
       log.debug(`toggle requests: ${event.detail}`);
       setRequestsEnabled(event.detail);
     }
@@ -78,8 +79,8 @@ export default function MediaWidget({}: {}) {
           playlist={playlist}
           tab={activeTab}
           current={current}
-          updateCurrentFn={(newIndex) =>
-            playlistController.current.updateIndex(newIndex)
+          updateCurrentFn={(newIndex:number) =>
+            playlistController.current?.updateIndex(newIndex)
           }
         />
         <div className="playlist-controls">
@@ -91,7 +92,10 @@ export default function MediaWidget({}: {}) {
                   ? "Disable music requests"
                   : "Enable music request"
               }
-              handler={() => paymentPageConfig.current?.toggleMediaRequests()}
+              handler={() => {
+                paymentPageConfig.current?.toggleMediaRequests()
+                paymentPageConfig.current?.save();
+              }}
             />
           </Menu>
           <ul className="playlist-tabs nav nav-underline">
@@ -129,14 +133,13 @@ export default function MediaWidget({}: {}) {
           </div>
         </div>
         <Playlist
-          recipientId={recipientId}
           playlist={playlist}
           current={current}
-          updatePlaylistFn={(newPlaylist) =>
-            playlistController.current.updatePlaylist(newPlaylist)
+          updatePlaylistFn={(newPlaylist: Song[]) =>
+            playlistController.current?.updatePlaylist(newPlaylist)
           }
-          playFn={(newIndex) =>
-            playlistController.current.updateIndex(newIndex)
+          playFn={(newIndex: number) =>
+            playlistController.current?.updateIndex(newIndex)
           }
         />
       </div>

diff --git a/src/components/MediaWidget/PaymentPageConfig.ts b/src/components/MediaWidget/PaymentPageConfig.ts
@@ -4,9 +4,9 @@ import { log } from "../../logging";
 export class PaymentPageConfig {
   config: any = {};
   email: string = "";
-	fio: string = "";
-	inn: string = "";
-  arbitraryText: string|null = null;
+  fio: string = "";
+  inn: string = "";
+  arbitraryText: string | null = null;
   requestsEnabled = true;
   requestsDisabledPermanently = false;
   requestCost = 100;
@@ -23,10 +23,9 @@ export class PaymentPageConfig {
           json.value["media.requests.disabled.permanently"] ?? false;
         this.requestCost = json.value["media.requests.cost"] ?? 100;
         this.email = json.value["email"] ?? "";
-				this.fio = json.value["fio"] ?? "";
-				this.inn = json.value["inn"] ?? "";
-        this.arbitraryText =
-          json.value["arbitraryText"] ?? null;
+        this.fio = json.value["fio"] ?? "";
+        this.inn = json.value["inn"] ?? "";
+        this.arbitraryText = json.value["arbitraryText"] ?? null;
         this.sendMediaRequestsEnabledState();
         this.sendEventPaymentPageUpdated();
       });
@@ -49,57 +48,71 @@ export class PaymentPageConfig {
   toggleMediaRequests() {
     this.requestsEnabled = !this.requestsEnabled;
     this.config.value["media.requests.enabled"] = this.requestsEnabled;
-    this.updateConfig(this.config);
     this.sendMediaRequestsEnabledState();
   }
 
   toggleRequestsPermanently() {
     this.requestsDisabledPermanently = !this.requestsDisabledPermanently;
     this.config.value["media.requests.disabled.permanently"] =
       this.requestsDisabledPermanently;
-    this.updateConfig(this.config);
     this.sendEventPaymentPageUpdated();
   }
 
   setRequestsCost(cost: number) {
     this.requestCost = cost;
     this.config.value["media.requests.cost"] = this.requestCost;
-    this.updateConfig(this.config);
     this.sendEventPaymentPageUpdated();
   }
 
   setEmail(email: string) {
     this.email = email;
     this.config.value["email"] = this.email;
-    this.updateConfig(this.config);
     this.sendEventPaymentPageUpdated();
   }
 
-	setFio(fio: string) {
+  setFio(fio: string) {
     this.fio = fio;
     this.config.value["fio"] = this.fio;
-    this.updateConfig(this.config);
     this.sendEventPaymentPageUpdated();
-	}
+  }
 
-	setInn(inn: string) {
+  setInn(inn: string) {
     this.inn = inn;
     this.config.value["inn"] = this.inn;
-    this.updateConfig(this.config);
     this.sendEventPaymentPageUpdated();
-	}
+  }
 
-  setArbitraryText(arbitraryText:string){
+  setArbitraryText(arbitraryText: string) {
     this.arbitraryText = arbitraryText;
     this.config.value["arbitraryText"] = arbitraryText;
-    this.updateConfig(this.config);
     this.sendEventPaymentPageUpdated();
   }
 
+  save() {
+    this.updateConfig(this.config);
+  }
+
   updateConfig(config: any) {
-    axios.post(
+    return axios.post(
       `${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/${this.config.id}`,
       config,
     );
   }
+
+  async reloadConfig(): Promise<void> {
+    const data = await axios.get(
+      `${process.env.REACT_APP_CONFIG_API_ENDPOINT}/config/paymentpage`,
+    );
+    this.config = data.data;
+    this.requestsEnabled = this.config.value["media.requests.enabled"] ?? true;
+    this.requestsDisabledPermanently =
+      this.config.value["media.requests.disabled.permanently"] ?? false;
+    this.requestCost = this.config.value["media.requests.cost"] ?? 100;
+    this.email = this.config.value["email"] ?? "";
+    this.fio = this.config.value["fio"] ?? "";
+    this.inn = this.config.value["inn"] ?? "";
+    this.arbitraryText = this.config.value["arbitraryText"] ?? null;
+    this.sendMediaRequestsEnabledState();
+    this.sendEventPaymentPageUpdated();
+  }
 }
diff --git a/src/components/PaymentAlerts/PaymentAlerts.tsx b/src/components/PaymentAlerts/PaymentAlerts.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import classes from "./PaymentAlerts.module.css";
 import { useLoaderData, useNavigate } from "react-router";
 import "bootstrap/dist/css/bootstrap.min.css";
@@ -10,10 +10,12 @@ import MessageTitle from "./sections/MessageTitle";
 import AlertImage from "./sections/AlertImage/AlertImage";
 import FontLoader from "../FontLoader/FontLoader";
 import ImageCache from "../ImageCache/ImageCache";
+import { findSetting } from "../utils";
 
 function PaymentAlerts({}: {}) {
   const { recipientId, settings, conf, widgetId } = useLoaderData();
   const navigate = useNavigate();
+  const [useGreenscreen, setUseGreenscreen] = useState<boolean>(true);
   const alertController = useRef<AlertController>(
     new AlertController(settings, recipientId),
   );
@@ -22,6 +24,10 @@ function PaymentAlerts({}: {}) {
     alertController.current.listen(widgetId, conf);
   }, [alertController]);
 
+  useEffect(() => {
+    setUseGreenscreen(findSetting(settings, "useGreenscreen", true));
+  },[settings]);
+
   useEffect(() => {
     subscribe(widgetId, conf.topic.alertWidgetCommans, (message) => {
       log.info(`Alerts command: ${message.body}`);
@@ -41,7 +47,7 @@ function PaymentAlerts({}: {}) {
     <>
       <style
         dangerouslySetInnerHTML={{
-          __html: `html, body {height: 100%; background-color: green;}`,
+          __html: `html, body {height: 100%; background-color: ${useGreenscreen ? "green" : "rgba(0,0,0,0)"};}`,
         }}
       />
       <FontLoader fontProvider={alertController.current} />