add properties for donation goal

OpenDonationAssistant · May 14, 2024 · 55a2bd8 · 55a2bd8
1 parent b9564c3
commit 55a2bd8
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 10 deletions.
diff --git a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
@@ -61,6 +61,7 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
       <>
         {this.value.map((goal: Goal, index: number) => (
           <div key={index} className={`${classes.goalcontainer}`}>
+            <div style={{ fontStyle: "italic", fontWeight: "900"}}>Цель:</div>
             <div className="widget-settings-item">
               <label
                 htmlFor={`${this.widgetId}_${index}`}
@@ -128,7 +129,7 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
                   this.deleteGoal(updateConfig, index);
                 }}
               >
-                Удалить цель
+                Удалить
               </button>
             </div>
           </div>

diff --git a/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/DonationGoalWidgetSettings.tsx
@@ -8,11 +8,85 @@ import { AbstractWidgetSettings } from "./AbstractWidgetSettings";
 import classes from "./DonationGoalWidgetSettings.module.css";
 import { log } from "../../../logging";
 import { uuidv7 } from "uuidv7";
+import { FontProperty } from "../widgetproperties/FontProperty";
+import { NumberProperty } from "../widgetproperties/NumberProperty";
+import { ColorProperty } from "../widgetproperties/ColorProperty";
 
 export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
   constructor(widgetId: string, properties: WidgetProperty[]) {
     const tabs = new Map();
-    super(widgetId, properties, [new DonationGoalProperty(widgetId)], tabs);
+    super(
+      widgetId,
+      properties,
+      [
+        new FontProperty(
+          widgetId,
+          "titleFont",
+          "fontselect",
+          "Alice",
+          "Шрифт заголовка",
+          "header",
+        ),
+        new NumberProperty(
+          widgetId,
+          "titleFontSize",
+          "number",
+          "24",
+          "Размер шрифта заголовка",
+          "header",
+        ),
+        new ColorProperty(
+          widgetId,
+          "titleColor",
+          "color",
+          "#000000",
+          "Цвет заголовка",
+          "header",
+        ),
+        new FontProperty(
+          widgetId,
+          "filledFont",
+          "fontselect",
+          "Russo One",
+          "Шрифт суммы",
+          "header",
+        ),
+        new NumberProperty(
+          widgetId,
+          "filledFontSize",
+          "number",
+          "24",
+          "Размер шрифта суммы",
+          "header",
+        ),
+        new ColorProperty(
+          widgetId,
+          "filledTextColor",
+          "color",
+          "#ffffff",
+          "Цвет суммы",
+          "header",
+        ),
+        new ColorProperty(
+          widgetId,
+          "backgroundColor",
+          "color",
+          "#818181",
+          "Цвет фона полоски",
+          "header",
+        ),
+        new ColorProperty(
+          widgetId,
+          "filledColor",
+          "color",
+          "#00aa00",
+          "Цвет заполненной части",
+          "header",
+        ),
+        new DonationGoalProperty(widgetId),
+      ],
+      tabs,
+    );
   }
 
   copy() {
@@ -21,15 +95,16 @@ export class DonationGoalWidgetSettings extends AbstractWidgetSettings {
 
   addGoal(updateConfig: Function) {
     log.debug({ settings: this }, "adding goal to");
-    const goal = (
-      this.properties.find(it => it.name == "goal") ?? new DonationGoalProperty(this.widgetId)
-    );
-    log.debug({ goal: goal}, "updating goal");
+    const goal =
+      this.properties.find((it) => it.name == "goal") ??
+      new DonationGoalProperty(this.widgetId);
+    log.debug({ goal: goal }, "updating goal");
     (goal.value as Goal[]).push({
       id: uuidv7(),
       briefDescription: "Название",
       fullDescription: "Полное описание",
       requiredAmount: { major: 100, currency: "RUB" },
+      accumulatedAmount: { major: 0, currency: "RUB" },
     });
     updateConfig(this.widgetId, "goal", goal.value);
     log.debug({ settings: this }, "updated goal widget settings");

diff --git a/src/components/DonationGoal/DonationGoal.tsx b/src/components/DonationGoal/DonationGoal.tsx
@@ -56,9 +56,9 @@ export default function DonationGoal({}) {
       );
   }, [recipientId]);
 
-  const fontSize = findSetting(settings, "fontSize", "24");
-  const font = findSetting(settings, "font", "Alice");
-  const textColor = findSetting(settings, "textColor", "black");
+  const fontSize = findSetting(settings, "titleFontSize", "24");
+  const font = findSetting(settings, "titleFont", "Alice");
+  const textColor = findSetting(settings, "titleColor", "black");
   const textStyle = {
     fontSize: fontSize ? fontSize + "px" : "unset",
     fontFamily: font ? font : "unset",
@@ -74,7 +74,7 @@ export default function DonationGoal({}) {
   const filledColor = findSetting(settings, "filledColor", "green");
   const filledTextColor = findSetting(settings, "filledTextColor", "white");
   const filledFontSize = findSetting(settings, "filledFontSize", "24");
-  const filledFont = findSetting(settings, "font", "Russo One");
+  const filledFont = findSetting(settings, "filledFont", "Russo One");
   const filledTextStyle = {
     fontSize: filledFontSize ? filledFontSize + "px" : "unset",
     fontFamily: filledFont ? filledFont : "unset",