frontend: design prototype

1 files changed, 91 insertions, 1 deletions

diff --git a/static/index.js b/static/index.js
index 8764baf..870e3bb 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1 +1,91 @@
-console.log('hello, world!');
+import * as sfw from 'sfw';
+
+import * as api from './api/index.js';
+
+import { literal as m } from './month.js';
+
+import LoginView from './pages/login/index.js';
+import MainView from './pages/main/index.js';
+import ImageViewer from './pages/image-viewer/index.js';
+import Search from './widgets/search/index.js';
+import MonthSelect from './widgets/month-select/index.js';
+import SettingsView from './pages/settings/index.js';
+import ShuffleView from './pages/shuffle/index.js';
+
+sfw.theme.add_css(await sfw.css(import.meta.url, './index.css'));
+
+const image_viewer = ImageViewer.new();
+
+[
+	'/images/0001.jpg',
+	'/images/0002.jpg',
+	'/images/0003.jpg',
+	'/images/0004.jpg',
+	'/images/0005.jpg',
+	'/images/0006.jpg',
+	'/images/0007.jpg',
+	'/images/0008.jpg',
+	'/images/0009.jpg',
+	'/images/0010.jpg',
+].forEach(url => image_viewer.add(url))
+
+const login = LoginView.new({
+	onlogin: () => {
+		document.body.innerHTML = '';
+		document.body.append(
+			main,
+			search,
+			month_select,
+		)
+	}
+});
+
+const search = Search.new({
+	onsubmit: (content) => console.log(content),
+	onhide: () => main.show(),
+});
+const month_select = MonthSelect.new({
+	months: m`2019-08`.to(m`2025-11`),
+});
+
+const settings = SettingsView.new({
+	onlogout: () => {
+		document.body.innerHTML = '';
+		document.body.append(login)
+		main.active_view = image_viewer;
+	},
+});
+
+const shuffle = ShuffleView.new({
+});
+
+const main = MainView.new({
+	active_view: image_viewer,
+	active_kind: MainView.Kind.upload,
+	onsearch: () => {
+		main.active_kind = MainView.Kind.upload;
+		main.active_view = image_viewer;
+		search.toggle();
+		main.hide();
+	},
+	onmonth: () => {
+		main.active_kind = MainView.Kind.upload;
+		main.active_view = image_viewer;
+		month_select.show();
+	},
+	onupload: () => api.upload_images(),
+	onshuffle: () => {
+		main.active_kind = MainView.Kind.home;
+		main.active_view = shuffle;
+	},
+	onsettings: () => {
+		main.active_kind = MainView.Kind.home;
+		main.active_view = settings;
+	},
+	onhome: () => {
+		main.active_kind = MainView.Kind.upload;
+		main.active_view = image_viewer;
+	},
+});
+
+document.body.append(login);