mirror of https://github.com/mue/mue.git
feat(greeting): Initial Custom Events Implementation
This commit is contained in:
alexsparkes
parent
a9f3992d2c
commit
c1cba4dd5e
|
|
@ -149,6 +149,27 @@ table {
|
|||
padding: 25px;
|
||||
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 {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
|
|
@ -202,3 +223,10 @@ table {
|
|||
flex-flow: column;
|
||||
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",
|
||||
"name": "Merry Christmas",
|
||||
"month": 12,
|
||||
"date": 25
|
||||
},
|
||||
{
|
||||
"id": "widgets.greeting.newyear",
|
||||
"name": "Happy New Year",
|
||||
"month": 1,
|
||||
"date": 1
|
||||
},
|
||||
{
|
||||
"id": "widgets.greeting.halloween",
|
||||
"name": "Happy Halloween",
|
||||
"month": 10,
|
||||
"date": 31
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,16 @@ import {
|
|||
Section,
|
||||
} from 'components/Layout/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 [customEvents, setCustomEvents] = useState(
|
||||
JSON.parse(localStorage.getItem('customEvents')) || [],
|
||||
);
|
||||
const [events, setEvents] = useState(false);
|
||||
|
||||
const [birthday, setBirthday] = useState(
|
||||
|
|
@ -28,6 +34,49 @@ const GreetingOptions = () => {
|
|||
|
||||
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 = () => {
|
||||
return (
|
||||
<Row final={true}>
|
||||
|
|
@ -53,7 +102,7 @@ const GreetingOptions = () => {
|
|||
|
||||
const BirthdayOptions = () => {
|
||||
return (
|
||||
<Row final={true}>
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
|
||||
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;
|
||||
if (events) {
|
||||
header = (
|
||||
|
|
@ -124,6 +238,7 @@ const GreetingOptions = () => {
|
|||
</Action>
|
||||
</Row>
|
||||
{BirthdayOptions()}
|
||||
{CustomEventsSection()}
|
||||
</>
|
||||
) : (
|
||||
<PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" visibilityToggle={true}>
|
||||
|
|
|
|||
|
|
@ -270,5 +270,9 @@
|
|||
{
|
||||
"name": "applinks",
|
||||
"value": "[]"
|
||||
},
|
||||
{
|
||||
"name": "customEvents",
|
||||
"value": "[]"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue