diff --git a/src/assets/delete.svg b/src/assets/delete.svg new file mode 100644 index 0000000..c812bb0 --- /dev/null +++ b/src/assets/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/load.svg b/src/assets/load.svg new file mode 100644 index 0000000..fbefe9a --- /dev/null +++ b/src/assets/load.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/save.svg b/src/assets/save.svg new file mode 100644 index 0000000..a5d1616 --- /dev/null +++ b/src/assets/save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/show.svg b/src/assets/show.svg new file mode 100644 index 0000000..243648e --- /dev/null +++ b/src/assets/show.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Manage/Options.tsx b/src/components/Manage/Options.tsx index 7da0352..fb3e65f 100644 --- a/src/components/Manage/Options.tsx +++ b/src/components/Manage/Options.tsx @@ -3,14 +3,15 @@ import { route } from 'preact-router'; import { getAuth } from 'firebase/auth'; import styled from 'styled-components'; import { - useContext, useEffect, useMemo, useRef, useState, + useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'preact/hooks'; import { - ref, getDatabase, onValue, DatabaseReference, set, + ref, getDatabase, onValue, DatabaseReference, update, } from 'firebase/database'; import AppContext from '@/AppContext'; import { CGConfig } from '@/types'; import ErrorMessage from '../ErrorMessage'; +import SavedLowerThirds, { SavedLowerThirdRecord } from './SavedLowerThirds'; const OptionsPage = styled.div` font-size: 18px; @@ -170,7 +171,7 @@ const Options = () => { if (cgConfigDbRef.current === undefined) { throw new Error('DB Reference not defined'); } - await set(cgConfigDbRef.current, { + await update(cgConfigDbRef.current, { pageBg: pageBg ?? null, showBranding: showBranding ?? null, showTicker: showTicker ?? null, @@ -191,6 +192,11 @@ const Options = () => { } }; + const onLoadLowerThird = useCallback((rec: SavedLowerThirdRecord) => { + setLowerThirdTitle(rec.title); + setLowerThirdSubtitle(rec.subtitle); + }, []); + const onClickLogout = async () => { await getAuth().signOut(); route('/login'); @@ -309,6 +315,12 @@ const Options = () => { Subtitle setLowerThirdSubtitle((e.target as HTMLInputElement).value)} value={lowerThirdSubtitle ?? undefined} type="text" /> +