mirror of https://github.com/mue/mue.git
feat(greeting): Initial Custom Events Implementation
This commit is contained in:
parent
a9f3992d2c
commit
c1cba4dd5e
|
@ -149,6 +149,27 @@ table {
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
input[type="number"] {
|
||||||
|
@include themed() {
|
||||||
|
background: t($modal-sidebar);
|
||||||
|
box-shadow: t($boxShadow);
|
||||||
|
color: t($color);
|
||||||
|
}
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-flow: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
transition: 0.5s;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
max-width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
@include themed {
|
@include themed {
|
||||||
background: t($modal-sidebar);
|
background: t($modal-sidebar);
|
||||||
border-radius: t($borderRadius);
|
border-radius: t($borderRadius);
|
||||||
|
@ -202,3 +223,10 @@ table {
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.eventDateControl {
|
||||||
|
display: flex !important;
|
||||||
|
flex-flow: column !important;
|
||||||
|
gap: 5px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
|
@ -1,16 +1,19 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"id": "widgets.greeting.christmas",
|
"id": "widgets.greeting.christmas",
|
||||||
|
"name": "Merry Christmas",
|
||||||
"month": 12,
|
"month": 12,
|
||||||
"date": 25
|
"date": 25
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "widgets.greeting.newyear",
|
"id": "widgets.greeting.newyear",
|
||||||
|
"name": "Happy New Year",
|
||||||
"month": 1,
|
"month": 1,
|
||||||
"date": 1
|
"date": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "widgets.greeting.halloween",
|
"id": "widgets.greeting.halloween",
|
||||||
|
"name": "Happy Halloween",
|
||||||
"month": 10,
|
"month": 10,
|
||||||
"date": 31
|
"date": 31
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,10 +10,16 @@ import {
|
||||||
Section,
|
Section,
|
||||||
} from 'components/Layout/Settings';
|
} from 'components/Layout/Settings';
|
||||||
import { Checkbox, Switch, Text } from 'components/Form/Settings';
|
import { Checkbox, Switch, Text } from 'components/Form/Settings';
|
||||||
|
import { TextareaAutosize } from '@mui/material';
|
||||||
|
import { Button } from 'components/Elements';
|
||||||
|
import defaultEvents from '../events.json';
|
||||||
|
|
||||||
import { MdEventNote } from 'react-icons/md';
|
import { MdEventNote, MdAdd, MdCancel, MdRefresh } from 'react-icons/md';
|
||||||
|
|
||||||
const GreetingOptions = () => {
|
const GreetingOptions = () => {
|
||||||
|
const [customEvents, setCustomEvents] = useState(
|
||||||
|
JSON.parse(localStorage.getItem('customEvents')) || [],
|
||||||
|
);
|
||||||
const [events, setEvents] = useState(false);
|
const [events, setEvents] = useState(false);
|
||||||
|
|
||||||
const [birthday, setBirthday] = useState(
|
const [birthday, setBirthday] = useState(
|
||||||
|
@ -28,6 +34,49 @@ const GreetingOptions = () => {
|
||||||
|
|
||||||
const GREETING_SECTION = 'modals.main.settings.sections.greeting';
|
const GREETING_SECTION = 'modals.main.settings.sections.greeting';
|
||||||
|
|
||||||
|
function addEvent() {
|
||||||
|
// Retrieve the current array of events from localStorage
|
||||||
|
const customEvents = JSON.parse(localStorage.getItem('customEvents')) || [];
|
||||||
|
|
||||||
|
// Create a new event
|
||||||
|
const newEvent = {
|
||||||
|
id: 'widgets.greeting.halloween',
|
||||||
|
name: '',
|
||||||
|
month: 10,
|
||||||
|
date: 31,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the new event to the array
|
||||||
|
const updatedEvents = [...customEvents, newEvent];
|
||||||
|
|
||||||
|
// Add the new event to the array
|
||||||
|
customEvents.push(newEvent);
|
||||||
|
|
||||||
|
// Store the updated array back in localStorage
|
||||||
|
localStorage.setItem('customEvents', JSON.stringify(customEvents));
|
||||||
|
|
||||||
|
setCustomEvents(updatedEvents);
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeEvent(index) {
|
||||||
|
// Remove the event at the given index
|
||||||
|
const updatedEvents = customEvents.filter((_, i) => i !== index);
|
||||||
|
|
||||||
|
// Store the updated array back in localStorage
|
||||||
|
localStorage.setItem('customEvents', JSON.stringify(updatedEvents));
|
||||||
|
|
||||||
|
// Update the state
|
||||||
|
setCustomEvents(updatedEvents);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetEvents() {
|
||||||
|
// Reset the events array in localStorage
|
||||||
|
localStorage.setItem('customEvents', JSON.stringify(defaultEvents));
|
||||||
|
|
||||||
|
// Update the state
|
||||||
|
setCustomEvents(defaultEvents);
|
||||||
|
}
|
||||||
|
|
||||||
const AdditionalOptions = () => {
|
const AdditionalOptions = () => {
|
||||||
return (
|
return (
|
||||||
<Row final={true}>
|
<Row final={true}>
|
||||||
|
@ -53,7 +102,7 @@ const GreetingOptions = () => {
|
||||||
|
|
||||||
const BirthdayOptions = () => {
|
const BirthdayOptions = () => {
|
||||||
return (
|
return (
|
||||||
<Row final={true}>
|
<Row>
|
||||||
<Content
|
<Content
|
||||||
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
|
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
|
||||||
subtitle={variables.getMessage(
|
subtitle={variables.getMessage(
|
||||||
|
@ -85,6 +134,71 @@ const GreetingOptions = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const CustomEventsSection = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row final={true}>
|
||||||
|
<Content title="Custom Events" />
|
||||||
|
<Action>
|
||||||
|
<div className="headerActions">
|
||||||
|
<Button type="settings" onClick={resetEvents} icon={<MdRefresh />} label="Reset" />
|
||||||
|
<Button type="settings" onClick={addEvent} icon={<MdAdd />} label="Add" />
|
||||||
|
</div>
|
||||||
|
</Action>
|
||||||
|
</Row>
|
||||||
|
<div className="messagesContainer">
|
||||||
|
{customEvents.map((event, index) => (
|
||||||
|
<div className="messageMap" key={index}>
|
||||||
|
<div className="flexGrow">
|
||||||
|
<div className="icon">
|
||||||
|
<MdEventNote />
|
||||||
|
</div>
|
||||||
|
<div className="messageText">
|
||||||
|
<span className="subtitle">Event Name</span>
|
||||||
|
<TextareaAutosize
|
||||||
|
value={event.name}
|
||||||
|
placeholder="Event Name"
|
||||||
|
onChange={(e) => this.message(e, true, index)}
|
||||||
|
varient="outlined"
|
||||||
|
style={{ padding: '0' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="messageAction">
|
||||||
|
<div className="eventDateControl">
|
||||||
|
<label>Month</label>
|
||||||
|
<input id="number" type="number" value={event.month} />
|
||||||
|
</div>
|
||||||
|
<div className="eventDateControl">
|
||||||
|
<label>Day</label>
|
||||||
|
<input id="number" type="number" value={event.date} />
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="settings"
|
||||||
|
onClick={() => removeEvent(index)}
|
||||||
|
icon={<MdCancel />}
|
||||||
|
label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{customEvents.length === 0 && (
|
||||||
|
<div className="photosEmpty">
|
||||||
|
<div className="emptyNewMessage">
|
||||||
|
<MdEventNote />
|
||||||
|
<span className="title">No Events</span>
|
||||||
|
<span className="subtitle">Add Some Events</span>
|
||||||
|
<Button type="settings" onClick={addEvent} icon={<MdAdd />} label="Add Event" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
let header;
|
let header;
|
||||||
if (events) {
|
if (events) {
|
||||||
header = (
|
header = (
|
||||||
|
@ -124,6 +238,7 @@ const GreetingOptions = () => {
|
||||||
</Action>
|
</Action>
|
||||||
</Row>
|
</Row>
|
||||||
{BirthdayOptions()}
|
{BirthdayOptions()}
|
||||||
|
{CustomEventsSection()}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" visibilityToggle={true}>
|
<PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" visibilityToggle={true}>
|
||||||
|
|
|
@ -270,5 +270,9 @@
|
||||||
{
|
{
|
||||||
"name": "applinks",
|
"name": "applinks",
|
||||||
"value": "[]"
|
"value": "[]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "customEvents",
|
||||||
|
"value": "[]"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue