You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
3.5 KiB
JavaScript
79 lines
3.5 KiB
JavaScript
import Note from './Note.js';
|
|
import {
|
|
new_note_handler,
|
|
new_note_by_dblclick_handler,
|
|
search_term_change_handler,
|
|
sorting_change_handler,
|
|
load_notes,
|
|
new_bin_handler,
|
|
bin_name_change_handler,
|
|
bin_name_editing_toggle_button_handler,
|
|
bin_name_commit_handler,
|
|
login_request_handler,
|
|
logout_request_handler,
|
|
username_change_handler,
|
|
password_change_handler,
|
|
choose_bin_handler
|
|
} from './handlers/App.js';
|
|
|
|
|
|
function App(vnode_init){
|
|
const {dispatch} = vnode_init.attrs;
|
|
//load_notes(state, dispatch);
|
|
return {
|
|
view: function(vnode){
|
|
const s = vnode.attrs.state;
|
|
const o = function(handler){ return handler.bind(null, s, dispatch); }
|
|
const o1 = function(handler, p1){ return handler.bind(null, s, dispatch, p1); }
|
|
return m('.app', {key: 'app'}, [
|
|
m('.top', {key: 'top'}, [
|
|
m('.top-left', {key: 'top-left'}, [
|
|
m('button', {key: 'button', onclick: o(new_note_handler)}, 'New Note...'),
|
|
m('input.search', {key: 'search', value: s.search_term, onkeyup: o(search_term_change_handler)}),
|
|
m('select.sorting', {key: 'sorting', value: s.sorting, onchange: o(sorting_change_handler)}, [
|
|
m('option', {key: 'new->old', value: 'new->old'}, 'Newest -> Oldest'),
|
|
m('option', {key: 'old->new', value: 'old->new'}, 'Oldest -> Newest')
|
|
])
|
|
]),
|
|
m('.top-right', {key: 'top-right'}, [
|
|
(s.login.showing
|
|
? (s.login.is_logged_in
|
|
? m('.login-info', {key:'login-info'}, [
|
|
m('.text', 'Logged in as '+s.db[s.login.user_id].model.username),
|
|
m('button', {onclick: o(logout_request_handler)}, 'Logout')
|
|
])
|
|
: m('.login-form', {key:'login-form'}, [
|
|
m('input.username', {key:'username', value: s.login.username, onchange: o(username_change_handler)}),
|
|
m('input.password[type=password]', {key:'password', value: s.login.password, onchange: o(password_change_handler)}),
|
|
m('button', {key:'login-button', onclick: o(login_request_handler)}, 'Login/Auto-Register')
|
|
])
|
|
)
|
|
: m('.empty', {key:'empty'})
|
|
),
|
|
m('.buttons', {key:'buttons'}, [
|
|
(s.is_editing_bin_name
|
|
? m('input.bin-name-textbox', {key: 'bin-name-textbox', value: s.temp_bin_name, onchange: o(bin_name_change_handler)})
|
|
: m('.bin-name', {key: 'bin-name'}, s.db[s.bin_id].model.name)
|
|
),
|
|
m('button', {key: 'new-bin-button', onclick: o(new_bin_handler)}, 'New Bin...'),
|
|
(s.is_editing_bin_name
|
|
? m('button', {key:'save-bin-name-button', onclick: o(bin_name_commit_handler)}, 'Save')
|
|
: m('button', {key:'rename-bin-button', onclick: o(bin_name_editing_toggle_button_handler)}, 'Rename')
|
|
)
|
|
]),
|
|
m('ul.bin-list', {key:'bin-list'}, s.login.bin_ids.map(bin_id=>
|
|
m('li.bin', {key:bin_id, onclick:o1(choose_bin_handler, bin_id)}, s.db[bin_id].model.name)
|
|
))
|
|
])
|
|
]),
|
|
m('.main', {key: 'main'}, [
|
|
m('.notes', {ondblclick: o(new_note_by_dblclick_handler)}, s.notes.map(note_state =>
|
|
m(Note, {state:s, note_state, dispatch, key: note_state.note_id})
|
|
))
|
|
])
|
|
]);
|
|
}
|
|
};
|
|
}
|
|
|
|
export default App; |