Skip to content

Commit

Permalink
add video and image deletion in alert's settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@stCarolas
stCarolas committed May 29, 2024
1 parent 959d964 commit 0883e86
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 75 deletions.
19 changes: 19 additions & 0 deletions src/components/ConfigurationPage/css/Widget.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,19 @@
outline: none;
}

.audio-button-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.sound-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.current-sound {
display: inline-block;
padding-top: 5px;
Expand All @@ -147,6 +160,12 @@
cursor: pointer;
}

.audio-name {
vertical-align: top;
margin-right: 10px;
font-weight: 900;
}

.new-alert.payment-alerts-previews-item .payment-alert-image-preview {
border: none;
background-color: #2b3566;
Expand Down
159 changes: 86 additions & 73 deletions src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,61 +6,20 @@ import ColorPicker from "./ColorPicker";
import BaseSettings from "./BaseSettings";
import BooleanPropertyInput from "./properties/BooleanPropertyInput";
import TestAlertButton from "./TestAlertButton";
import FontSelect from "./FontSelect";

interface PaymentAlertSettingsProps {
id: string;
onChange: Function;
}

const fonts = [
"Roboto",
"Ruslan Display",
"Cuprum",
"Anonymous Pro",
"Pangolin",
"Ruda",
"Stalinist One",
"Montserrat",
"Ubuntu Mono",
"Jura",
"Scada",
"Prosto One",
"Arsenal",
"Tenor Sans",
"El Messiri",
"Yeseva One",
"Pattaya",
"Andika",
"Gabriela",
"Marmelad",
"Cormorant Unicase",
"Cormorant SC",
"Amatic SC",
"Rubik Mono One",
"PT Sans Caption",
"Spectral SC",
"Rubik",
"Exo 2",
"Exo",
"Oswald",
"Underdog",
"Kurale",
"Forum",
"Neucha",
"Didact Gothic",
"Philosopher",
"Russo One",
"Noto Serif",
];

export default function PaymentAlertSettings({
id,
onChange,
}: PaymentAlertSettingsProps) {
const [tab, setTab] = useState("trigger");
const [selected, setSelected] = useState<number>(-2);
const { config, setConfig } = useContext(WidgetsContext);
const [showTestAlert, setShowTestAlert] = useState<boolean>(false);

function addDefaultAlert(): void {
let alerts = config.get(id)?.alerts;
Expand Down Expand Up @@ -291,6 +250,21 @@ export default function PaymentAlertSettings({
}
};

function deleteImage() {
setConfig((oldConfig) => {
const alertConfig = oldConfig.get(id);
const alerts = alertConfig?.alerts;
let updatedAlerts = alerts?.at(selected);
updatedAlerts.image = null;
updatedAlerts.video = null;
alerts[selected] = updatedAlerts;
alertConfig.alerts = alerts;
const newConfig = new Map(oldConfig).set(id, alertConfig);
return newConfig;
});
onChange.call({});
}

const handleVideoUpload = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
const file = e.target.files[0];
Expand Down Expand Up @@ -331,6 +305,20 @@ export default function PaymentAlertSettings({
}
};

function deleteAudio() {
setConfig((oldConfig) => {
const alertConfig = oldConfig.get(id);
const alerts = alertConfig?.alerts;
let updatedAlerts = alerts?.at(selected);
updatedAlerts.audio = null;
alerts[selected] = updatedAlerts;
alertConfig.alerts = alerts;
const newConfig = new Map(oldConfig).set(id, alertConfig);
return newConfig;
});
onChange.call({});
}

function update(key: string, value: any) {
setConfig((oldConfig) => {
const widgetConfig = oldConfig.get(id) ?? {};
Expand Down Expand Up @@ -510,15 +498,10 @@ export default function PaymentAlertSettings({
/>
)}
{prop.type === "fontselect" && (
<select
value={prop.value}
className="widget-settings-value select"
onChange={(e) => update(prop.name, e.target.value)}
>
{fonts.sort().map((font) => (
<option key={font}>{font}</option>
))}
</select>
<FontSelect
prop={prop}
onChange={(font: string) => update(prop.name, font)}
/>
)}
{prop.type === "color" && (
<div className="color-container">
Expand Down Expand Up @@ -562,40 +545,70 @@ export default function PaymentAlertSettings({
)}
{"image" === tab && (
<div className="upload-button-container">
<label className="upload-button" style={{ marginRight: "10px" }}>
<input type="file" onChange={handleVideoUpload} />
Загрузить видео
</label>
<label className="upload-button">
<input type="file" onChange={handleFileChange} />
Загрузить изображение
</label>
{!config.get(id)?.alerts?.at(selected)?.video &&
!config.get(id)?.alerts?.at(selected)?.image && (
<>
<label
className="upload-button"
style={{ marginRight: "10px" }}
>
<input type="file" onChange={handleVideoUpload} />
Загрузить видео
</label>
<label className="upload-button">
<input type="file" onChange={handleFileChange} />
Загрузить изображение
</label>
</>
)}
{(config.get(id)?.alerts?.at(selected)?.video ||
config.get(id)?.alerts?.at(selected)?.image) && (
<button className="widget-button" onClick={deleteImage}>
Удалить
</button>
)}
</div>
)}
{"sound" === tab && (
<>
<div className="current-sound">
<span
onClick={() =>
playAudio(config.get(id)?.alerts?.at(selected).audio)
}
className="material-symbols-sharp"
>
play_circle
</span>
<div className="sound-container">
{config.get(id)?.alerts?.at(selected).audio && (
<div className="current-sound">
<span className="audio-name">
{config.get(id)?.alerts?.at(selected).audio}
</span>
<span
onClick={() =>
playAudio(config.get(id)?.alerts?.at(selected).audio)
}
className="material-symbols-sharp"
>
play_circle
</span>
</div>
)}
<div className="audio-button-container">
{!config.get(id)?.alerts?.at(selected).audio && (
<label className="upload-button">
<input type="file" onChange={handleAudioUpload} />
Загрузить аудио
</label>
)}
{config.get(id)?.alerts?.at(selected).audio && (
<button onClick={deleteAudio} className="widget-button">
Удалить
</button>
)}
</div>
</div>
<label className="upload-button">
<input type="file" onChange={handleAudioUpload} />
Загрузить аудио
</label>
</>
)}
</>
);

return (
<>
<TestAlertButton config={config}/>
<TestAlertButton config={config} />
<BaseSettings id={id} />
{previews()}
{selected > -1 && (
Expand Down
4 changes: 2 additions & 2 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ code {
.upload-button {
background-color: #151a33;
color: #7885bd;
padding-top: 10px;
padding-bottom: 10px;
padding-top: 7px;
padding-bottom: 9px;
padding-left: 10px;
padding-right: 10px;
margin-top: 20px;
Expand Down

0 comments on commit 0883e86

Please sign in to comment.