-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #35 from FRC2713/settings
add settings modal
- Loading branch information
Showing
11 changed files
with
234 additions
and
152 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,84 +1,24 @@ | ||
| import { | ||
| resetToDefaultConfig, | ||
| uploadConfig, | ||
| useQRScoutState, | ||
| } from '../../../store/store'; | ||
| import { Cog6ToothIcon } from '@heroicons/react/20/solid'; | ||
| import { useState } from 'preact/hooks'; | ||
| import Button, { Variant } from '../../core/Button'; | ||
| import { Config } from '../../inputs/BaseInputProps'; | ||
| import { ThemeSelector } from './ThemeSelector'; | ||
|
|
||
| /** | ||
| * Download a text file | ||
| * @param filename The name of the file | ||
| * @param text The text to put in the file | ||
| */ | ||
| function download(filename: string, text: string) { | ||
| var element = document.createElement('a'); | ||
| element.setAttribute( | ||
| 'href', | ||
| 'data:text/plain;charset=utf-8,' + encodeURIComponent(text), | ||
| ); | ||
| element.setAttribute('download', filename); | ||
|
|
||
| element.style.display = 'none'; | ||
| document.body.appendChild(element); | ||
|
|
||
| element.click(); | ||
|
|
||
| document.body.removeChild(element); | ||
| } | ||
|
|
||
| /** | ||
| * Download the current form data as a json file | ||
| * @param formData The form data to download | ||
| */ | ||
| function downloadConfig(formData: Config) { | ||
| const configDownload = { ...formData }; | ||
|
|
||
| configDownload.sections.forEach(s => | ||
| s.fields.forEach(f => (f.value = undefined)), | ||
| ); | ||
| download('QRScout_config.json', JSON.stringify(configDownload)); | ||
| } | ||
| import { Section } from '../../core/Section'; | ||
| import { SettingsModal } from './SettingsModal'; | ||
|
|
||
| export function ConfigSection() { | ||
| const formData = useQRScoutState(state => state.formData); | ||
| return ( | ||
| <div className="mb-4 flex flex-col justify-center rounded bg-white shadow-md dark:bg-gray-600 gap-2 p-2"> | ||
| <Button | ||
| variant={Variant.Secondary} | ||
| onClick={() => | ||
| navigator.clipboard.writeText( | ||
| formData.sections | ||
| .map(s => s.fields) | ||
| .flat() | ||
| .map(f => f.title) | ||
| .join('\t'), | ||
| ) | ||
| } | ||
| > | ||
| Copy Column Names | ||
| </Button> | ||
| <Button | ||
| variant={Variant.Secondary} | ||
| onClick={() => downloadConfig(formData)} | ||
| > | ||
| Download Config | ||
| </Button> | ||
| <label className="mx-2 flex cursor-pointer flex-row justify-center rounded bg-gray-500 py-2 text-center font-bold text-white shadow-sm hover:bg-gray-600"> | ||
| <span className="text-base leading-normal">Upload Config</span> | ||
| <input | ||
| type="file" | ||
| className="hidden" | ||
| accept=".json" | ||
| onChange={e => uploadConfig(e)} | ||
| /> | ||
| </label> | ||
| <ThemeSelector /> | ||
| const [showModal, setShowModal] = useState(false); | ||
|
|
||
| <Button variant={Variant.Danger} onClick={() => resetToDefaultConfig()}> | ||
| Reset Config to Default | ||
| </Button> | ||
| </div> | ||
| return ( | ||
| <Section> | ||
| <div className="flex flex-col items-center justify-center pt-4"> | ||
| <SettingsModal show={showModal} onDismiss={() => setShowModal(false)} /> | ||
| <Button | ||
| icon={<Cog6ToothIcon className="h-5 w-5" />} | ||
| variant={Variant.Transparent} | ||
| onClick={() => setShowModal(true)} | ||
| > | ||
| Settings | ||
| </Button> | ||
| </div> | ||
| </Section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { | ||
| resetToDefaultConfig, | ||
| uploadConfig, | ||
| useQRScoutState, | ||
| } from '../../../store/store'; | ||
| import Button, { Variant } from '../../core/Button'; | ||
| import { Modal } from '../../core/Modal'; | ||
| import { Config } from '../../inputs/BaseInputProps'; | ||
| import { ThemeSelector } from './ThemeSelector'; | ||
|
|
||
| export interface ModalProps { | ||
| show: boolean; | ||
| onDismiss?: () => void; | ||
| } | ||
|
|
||
| /** | ||
| * Download a text file | ||
| * @param filename The name of the file | ||
| * @param text The text to put in the file | ||
| */ | ||
| function download(filename: string, text: string) { | ||
| var element = document.createElement('a'); | ||
| element.setAttribute( | ||
| 'href', | ||
| 'data:text/plain;charset=utf-8,' + encodeURIComponent(text), | ||
| ); | ||
| element.setAttribute('download', filename); | ||
|
|
||
| element.style.display = 'none'; | ||
| document.body.appendChild(element); | ||
|
|
||
| element.click(); | ||
|
|
||
| document.body.removeChild(element); | ||
| } | ||
|
|
||
| /** | ||
| * Download the current form data as a json file | ||
| * @param formData The form data to download | ||
| */ | ||
| function downloadConfig(formData: Config) { | ||
| const configDownload = { ...formData }; | ||
|
|
||
| configDownload.sections.forEach(s => | ||
| s.fields.forEach(f => (f.value = undefined)), | ||
| ); | ||
| download('QRScout_config.json', JSON.stringify(configDownload)); | ||
| } | ||
|
|
||
| export function SettingsModal(props: ModalProps) { | ||
| const formData = useQRScoutState(state => state.formData); | ||
| return ( | ||
| <Modal show={props.show} onDismiss={props.onDismiss}> | ||
| <div className="flex flex-col justify-start rounded bg-white dark:bg-gray-600 gap-2 p-2"> | ||
| <Button | ||
| variant={Variant.Secondary} | ||
| onClick={() => | ||
| navigator.clipboard.writeText( | ||
| formData.sections | ||
| .map(s => s.fields) | ||
| .flat() | ||
| .map(f => f.title) | ||
| .join('\t'), | ||
| ) | ||
| } | ||
| > | ||
| Copy Column Names | ||
| </Button> | ||
| <Button | ||
| variant={Variant.Secondary} | ||
| onClick={() => downloadConfig(formData)} | ||
| > | ||
| Download Config | ||
| </Button> | ||
| <label className="mx-2 flex cursor-pointer flex-row justify-center rounded bg-gray-500 py-2 text-center font-bold text-white shadow-sm hover:bg-gray-600"> | ||
| <span className="text-base leading-normal">Upload Config</span> | ||
| <input | ||
| type="file" | ||
| className="hidden" | ||
| accept=".json" | ||
| onChange={e => uploadConfig(e)} | ||
| /> | ||
| </label> | ||
|
|
||
| <ThemeSelector /> | ||
| <Button variant={Variant.Danger} onClick={() => resetToDefaultConfig()}> | ||
| Reset Config to Default | ||
| </Button> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.