Added import modal

This commit is contained in:
jude 2023-12-01 23:50:33 +00:00
parent 4c10682de8
commit 4fee936939
5 changed files with 96 additions and 25 deletions

View File

@ -0,0 +1,73 @@
import { Modal } from "../Modal";
import { useState } from "preact/hooks";
export const Import = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<>
<a
class="show-modal"
data-modal="chooseTimezoneModal"
onClick={() => {
setModalOpen(true);
}}
>
<span class="icon">
<i class="fas fa-exchange"></i>
</span>{" "}
Import/Export
</a>
{modalOpen && <ImportModal setModalOpen={setModalOpen} />}
</>
);
};
const ImportModal = ({ setModalOpen }) => {
return (
<Modal
setModalOpen={setModalOpen}
title={
<>
Import/Export Manager{" "}
<a href="/help/iemanager">
<span>
<i class="fa fa-question-circle"></i>
</span>
</a>
</>
}
>
<>
<div class="control">
<div class="field">
<label>
<input
type="radio"
class="default-width"
name="exportSelect"
value="reminders"
checked
/>
Reminders
</label>
</div>
</div>
<br />
<div class="has-text-centered">
<div style="color: red">
Please first read the <a href="/help/iemanager">support page</a>
</div>
<button class="button is-success is-outlined" id="import-data">
Import Data
</button>
<button class="button is-success" id="export-data">
Export Data
</button>
</div>
<a id="downloader" download="export.csv" class="is-hidden"></a>
<input id="uploader" type="file" hidden></input>
</>
</Modal>
);
};

View File

@ -3,7 +3,7 @@ import { createPortal } from "preact/compat";
type Props = { type Props = {
setModalOpen: (open: boolean) => never; setModalOpen: (open: boolean) => never;
title: string; title: string | JSX.Element;
onSubmitText?: string; onSubmitText?: string;
onSubmit?: () => void; onSubmit?: () => void;
children: string | JSX.Element | JSX.Element[] | (() => JSX.Element); children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);

View File

@ -18,19 +18,21 @@ export const Field = ({ title, value, inline, index, onUpdate }) => {
title: ev.currentTarget.value, title: ev.currentTarget.value,
}) })
} }
></textarea> />
<button {(value !== "" || title !== "") && (
class="button is-small inline-btn" <button
onClick={() => { class="button is-small inline-btn"
onUpdate({ onClick={() => {
index, onUpdate({
inline: !inline, index,
}); inline: !inline,
}} });
> }}
<span class="is-sr-only">Toggle field inline</span> >
<i class="fas fa-arrows-h"></i> <span class="is-sr-only">Toggle field inline</span>
</button> <i class="fas fa-arrows-h"></i>
</button>
)}
</div> </div>
<label class="is-sr-only" for="embedFieldValue"> <label class="is-sr-only" for="embedFieldValue">

View File

@ -53,8 +53,8 @@ export const Embed = () => {
embed_description: description, embed_description: description,
})) }))
} }
></Description> />
<br></br> <br />
<Fields /> <Fields />
</div> </div>
@ -66,7 +66,7 @@ export const Embed = () => {
url={reminder.embed_thumbnail_url} url={reminder.embed_thumbnail_url}
alt="Square thumbnail embedded image" alt="Square thumbnail embedded image"
setImage={() => {}} setImage={() => {}}
></ImagePicker> />
</p> </p>
</div> </div>
</div> </div>
@ -77,14 +77,14 @@ export const Embed = () => {
url={reminder.embed_image_url} url={reminder.embed_image_url}
alt="Large embedded image" alt="Large embedded image"
setImage={() => {}} setImage={() => {}}
></ImagePicker> />
</p> </p>
<Footer <Footer
footer={reminder.embed_footer} footer={reminder.embed_footer}
icon={reminder.embed_footer_url} icon={reminder.embed_footer_url}
setReminder={setReminder} setReminder={setReminder}
></Footer> />
</div> </div>
); );
}; };

View File

@ -7,6 +7,7 @@ import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api"; import { fetchUserGuilds, GuildInfo } from "../../api";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { TimezonePicker } from "../TimezonePicker"; import { TimezonePicker } from "../TimezonePicker";
import { Import } from "../Import";
type ContentProps = { type ContentProps = {
guilds: GuildInfo[]; guilds: GuildInfo[];
@ -28,12 +29,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
<p class="menu-label">Options</p> <p class="menu-label">Options</p>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<a class="show-modal" data-modal="dataManagerModal"> <Import />
<span class="icon">
<i class="fas fa-exchange"></i>
</span>{" "}
Import/Export
</a>
<TimezonePicker /> <TimezonePicker />
<a href="/login/discord/logout"> <a href="/login/discord/logout">
<span class="icon"> <span class="icon">