diff options
Diffstat (limited to 'frontend/app')
85 files changed, 7402 insertions, 0 deletions
diff --git a/frontend/app/actions.js b/frontend/app/actions.js new file mode 100644 index 0000000..0fba6d1 --- /dev/null +++ b/frontend/app/actions.js @@ -0,0 +1,18 @@ +import { bindActionCreators } from 'redux' +import { actions as crudActions } from './api' + +import * as siteActions from 'app/views/site/site.actions' + +import { store } from 'app/store' + +export default + Object.keys(crudActions) + .map(a => [a, crudActions[a]]) + .concat([ + ['site', siteActions], + ]) + .map(p => [p[0], bindActionCreators(p[1], store.dispatch)]) + .concat([ + // ['socket', socketActions], + ]) + .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
\ No newline at end of file diff --git a/frontend/app/api/crud.actions.js b/frontend/app/api/crud.actions.js new file mode 100644 index 0000000..86c2948 --- /dev/null +++ b/frontend/app/api/crud.actions.js @@ -0,0 +1,51 @@ +import { crud_fetch } from 'app/api/crud.fetch' +import { as_type } from 'app/api/crud.types' +import { upload_action } from 'app/api/crud.upload' +import { store } from 'app/store' + +export function crud_actions(type) { + const fetch_type = crud_fetch(type) + return [ + 'index', + 'show', + 'create', + 'update', + 'destroy', + ].reduce((lookup, param) => { + lookup[param] = crud_action(type, param, (q) => fetch_type[param](q)) + return lookup + }, { + action: (method, fn) => crud_action(type, method, fn), + upload: (fd) => upload_action(type, fd), + updateOption: (key, value) => dispatch => { + dispatch({ type: as_type(type, 'update_option'), key, value }) + }, + updateOptions: opt => dispatch => { + dispatch({ type: as_type(type, 'update_options'), opt }) + }, + }) +} + +export const crud_action = (type, method, fn) => (q, load_more) => dispatch => { + return new Promise ((resolve, reject) => { + if (method === 'index') { + if (store.getState()[type].index.loading) { + return resolve({}) + } + } + dispatch({ type: as_type(type, method + '_loading'), load_more }) + fn(q).then(data => { + if (data.status === 'ok') { + dispatch({ type: as_type(type, method), data, load_more }) + resolve(data) + } else { + dispatch({ type: as_type(type, method + '_error'), error: data.error }) + reject(data) + } + }).catch(e => { + console.log(e) + dispatch({ type: as_type(type, method + '_error') }) + reject(e) + }) + }) +} diff --git a/frontend/app/api/crud.fetch.js b/frontend/app/api/crud.fetch.js new file mode 100644 index 0000000..c88225e --- /dev/null +++ b/frontend/app/api/crud.fetch.js @@ -0,0 +1,105 @@ +import fetch from 'node-fetch' + +export function crud_fetch(type, tag) { + const uri = '/api/v1/' + type + '/' + (tag || '') + return { + index: q => { + return fetch(_get_url(uri, q), _get_headers()) + .then(req => req.json()) + .catch(error) + }, + + show: id => { + let url; + if (typeof id === 'object') { + url = _get_url(uri + id[0] + '/', id[1]) + } else { + url = _get_url(uri + id + '/') + } + return fetch(url, _get_headers()) + .then(req => req.json()) + .catch(error) + }, + + create: data => { + return fetch(uri, post(data)) + .then(req => req.json()) + .catch(error) + }, + + update: data => { + return fetch(uri + data.id + '/', put(data)) + .then(req => req.json()) + .catch(error) + }, + + destroy: data => { + return fetch(uri + data.id + '/', destroy(data)) + .then(req => req.json()) + .catch(error) + }, + } +} + +function _get_url(_url, data) { + const url = new URL(window.location.origin + _url) + if (data) { + Object.keys(data).forEach(key => url.searchParams.append(key, data[key])) + } + return url +} +export function _get_headers() { + return { + method: 'GET', + credentials: 'same-origin', + headers: { + 'Accept': 'application/json', + }, + } +} +export function post(data) { + return { + method: 'POST', + body: JSON.stringify(data), + credentials: 'same-origin', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + } +} +export function postBody(data) { + return { + method: 'POST', + body: data, + credentials: 'same-origin', + headers: { + 'Accept': 'application/json', + }, + } +} +export function put(data) { + return { + method: 'PUT', + body: JSON.stringify(data), + credentials: 'same-origin', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + } +} +export function destroy(data) { + return { + method: 'DELETE', + body: JSON.stringify(data), + credentials: 'same-origin', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + } +} +function error(err) { + console.warn(err) +} diff --git a/frontend/app/api/crud.reducer.js b/frontend/app/api/crud.reducer.js new file mode 100644 index 0000000..2a7e4c4 --- /dev/null +++ b/frontend/app/api/crud.reducer.js @@ -0,0 +1,196 @@ +import * as types from 'app/types' +import { getOrderedIds, getOrderedIdsFromLookup } from 'app/utils' +import { session } from 'app/session' + +export const crudState = (type, options) => ({ + index: {}, + show: {}, + create: {}, + update: {}, + destroy: {}, + lookup: [], + ...options, +}) + +export const crudReducer = (type) => { + const crud_type = types[type] + return (state, action) => { + switch (action.type) { + // index + case crud_type.index_loading: + return { + ...state, + index: action.load_more + ? { ...state.index, loading: true } + : { loading: true }, + } + case crud_type.index: + if (action.data.res.length) { + return { + ...state, + index: { + lookup: action.data.res.reduce((a, b) => { a[b.id] = b; return a }, action.load_more ? state.index.lookup : {}), + order: getOrderedIds(action.data.res, state.options.sort, action.load_more ? state.index.order : []), + }, + } + } else { + Object.keys(action.data.res).forEach(key => { + const el = action.data.res[key] + el.key = key + el.id = el.id || key + }) + return { + ...state, + index: { + lookup: action.data.res, + order: getOrderedIdsFromLookup(action.data.res, state.options.sort), + }, + } + } + case crud_type.index_error: + return { + ...state, + index: { loading: false, error: true }, + } + case crud_type.index_sort: + return { + ...state, + index: { + ...state.index, + order: action.data.res.map(b => b.id), + }, + } + + // show + case crud_type.show_loading: + return { + ...state, + show: { loading: true }, + } + case crud_type.show: + if (!action.data) { + return { + ...state, + show: { not_found: true }, + } + } + return { + ...state, + show: action.data, + } + case crud_type.show_error: + return { + ...state, + show: { loading: false, error: true }, + } + + // + // create + case crud_type.create_loading: + return { + ...state, + create: { loading: true }, + } + case crud_type.create: + return { + ...state, + create: action.data, + index: addToIndex(state.index, action.data.res, state.options.sort), + } + case crud_type.create_error: + return { + ...state, + create: action.data, + } + + // + // update + case crud_type.update_loading: + return { + ...state, + update: { loading: true }, + } + case crud_type.update: + return { + ...state, + update: action.data, + index: addToIndex(state.index, action.data.res, state.options.sort), + show: (state.show.res && state.show.res.id === action.data.res.id) ? { + res: { + ...state.show.res, + ...action.data.res, + } + } : state.show + } + case crud_type.update_error: + return { + ...state, + update: { loading: false, error: true }, + } + + // + // destroy + case crud_type.destroy_loading: + return { + ...state, + destroy: { loading: true }, + } + case crud_type.destroy: + return { + ...state, + index: { + ...(() => { + if (!state.index.lookup) { + return {} + } + delete state.index.lookup[action.data.id] + const _id = parseInt(action.data.id) + state.index.order = state.index.order.filter(id => id !== _id) + return { ...state.index } + })() + }, + destroy: { loading: false }, + } + case crud_type.destroy_error: + return { + ...state, + destroy: { error: true }, + } + + // + // options + case crud_type.update_option: + session.set(type + "." + action.key, action.value) + return { + ...state, + options: { + ...state.options, + [action.key]: action.value, + } + } + + case crud_type.update_options: + session.setAll( + Object.keys(action.opt).reduce((a,b) => { a[type + '.' + b] = action.opt[b]; return a }, {}) + ) + return { + ...state, + options: { + ...action.opt, + } + } + + default: + return state + } + } +} + +const addToIndex = (index, data, sort) => { + const lookup = (index && index.lookup) ? { + ...index.lookup, + } : {} + lookup[data.id] = data + const order = getOrderedIdsFromLookup(lookup, sort) + return { lookup, order } +} diff --git a/frontend/app/api/crud.types.js b/frontend/app/api/crud.types.js new file mode 100644 index 0000000..7b24811 --- /dev/null +++ b/frontend/app/api/crud.types.js @@ -0,0 +1,36 @@ + +export const as_type = (a, b) => [a, b].join('_').toUpperCase() + +export const with_type = (type, actions) => + actions.reduce((a, b) => (a[b] = as_type(type, b)) && a, {}) + +export const crud_type = (type, actions=[]) => + with_type(type, actions.concat([ + 'index_loading', + 'index', + 'index_error', + 'index_sort', + 'show_loading', + 'show', + 'show_error', + 'create_loading', + 'create', + 'create_error', + 'update_loading', + 'update', + 'update_error', + 'destroy_loading', + 'destroy', + 'destroy_error', + 'upload_loading', + 'upload_progress', + 'upload_waiting', + 'upload_complete', + 'upload_error', + 'sort', + 'update_option', + 'update_options', + 'loading', + 'loaded', + 'error', + ])) diff --git a/frontend/app/api/crud.upload.js b/frontend/app/api/crud.upload.js new file mode 100644 index 0000000..8c1b265 --- /dev/null +++ b/frontend/app/api/crud.upload.js @@ -0,0 +1,107 @@ +import { as_type } from 'app/api/crud.types' + +export function crud_upload(type, data, dispatch) { + return new Promise( (resolve, reject) => { + // console.log(type, data) + const { id } = data + + const fd = new FormData() + + Object.keys(data).forEach(key => { + if (key !== 'id') { + fd.append(key, data[key]) + } + }) + + let url = id ? '/api/v1/' + type + '/' + id + '/' + : '/api/v1/' + type + '/' + // console.log(url) + + const xhr = new XMLHttpRequest() + xhr.upload.addEventListener("progress", uploadProgress, false) + xhr.addEventListener("load", uploadComplete, false) + xhr.addEventListener("error", uploadFailed, false) + xhr.addEventListener("abort", uploadCancelled, false) + xhr.open("POST", url) + xhr.send(fd) + + dispatch && dispatch({ type: as_type(type, 'upload_loading')}) + + let complete = false + + function uploadProgress (e) { + if (e.lengthComputable) { + const percent = Math.round(e.loaded * 100 / e.total) || 0 + if (percent > 99) { + dispatch && dispatch({ + type: as_type(type, 'upload_waiting'), + percent, + [type]: id, + }) + } else { + dispatch && dispatch({ + type: as_type(type, 'upload_progress'), + percent, + [type]: id, + }) + } + } + else { + dispatch && dispatch({ + type: as_type(type, 'upload_error'), + error: 'unable to compute upload progress', + [type]: id, + }) + } + } + + function uploadComplete (e) { + let parsed; + try { + parsed = JSON.parse(e.target.responseText) + } catch (e) { + dispatch && dispatch({ + type: as_type(type, 'upload_error'), + error: 'upload failed', + [type]: id, + }) + reject(e) + return + } + dispatch && dispatch({ + type: as_type(type, 'upload_complete'), + data: parsed, + [type]: id, + }) + if (parsed.res) { + (parsed.res.length ? parsed.res : [parsed.res]).forEach(file => { + dispatch && dispatch({ + type: as_type('upload', 'create'), + data: { res: file }, + }) + }) + } + resolve(parsed) + } + + function uploadFailed (evt) { + dispatch && dispatch({ + type: as_type(type, 'upload_error'), + error: 'upload failed', + [type]: id, + }) + reject(evt) + } + + function uploadCancelled (evt) { + dispatch && dispatch({ + type: as_type(type, 'upload_error'), + error: 'upload cancelled', + [type]: id, + }) + reject(evt) + } + }) +} + +export const upload_action = (type, data) => dispatch => crud_upload(type, data, dispatch) diff --git a/frontend/app/api/index.js b/frontend/app/api/index.js new file mode 100644 index 0000000..c3d0aa4 --- /dev/null +++ b/frontend/app/api/index.js @@ -0,0 +1,24 @@ +import { crud_actions } from 'app/api/crud.actions' +import * as util from 'app/api/utils' + +/* +for our crud events, create corresponding actions +the actions fire a 'loading' event, call the underlying api method, and then resolve. +so you can do ... + import { folderActions } from 'app/api' + folderActions.index({ module: 'samplernn' }) + folderActions.show(12) + folderActions.create({ module: 'samplernn', name: 'foo' }) + folderActions.update(12, { module: 'pix2pix' }) + folderActions.destroy(12, { confirm: true }) + folderActions.upload(12, form_data) +*/ + +export { util } + +export const actions = [ + 'graph', + 'page', + 'tile', + 'upload', +].reduce((a,b) => (a[b] = crud_actions(b)) && a, {}) diff --git a/frontend/app/app.js b/frontend/app/app.js new file mode 100644 index 0000000..8dbbd0f --- /dev/null +++ b/frontend/app/app.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import { ConnectedRouter } from 'connected-react-router' +import { Route } from 'react-router' + +// import actions from 'app/actions' + +import * as views from 'app/views' + +const viewList = Object.keys(views).map(name => { + const view = views[name] + let path, exact = false + if (name === 'graph') { + path = '/:graph_name' + exact = true + } else if (name === 'page') { + path = '/:graph_name/:page_name' + exact = true + } else { + path = '/' + name + } + return ( + <Route key={name} path={path} component={view} exact={exact} /> + ) +}) + +export default class App extends Component { + componentDidMount() { + // actions.modelzoo.index() + } + render() { + return ( + <ConnectedRouter history={this.props.history}> + <div className='app'> + {viewList} + <Route exact key='root' path='/' render={() => { + // redirect to index!! + setTimeout(() => this.props.history.push('/index'), 10) + return null + }} /> + </div> + </ConnectedRouter> + ) + } +} diff --git a/frontend/app/common/app.css b/frontend/app/common/app.css new file mode 100644 index 0000000..d9f9946 --- /dev/null +++ b/frontend/app/common/app.css @@ -0,0 +1,428 @@ +* { box-sizing: border-box; } +html, body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} +body { + background: #000; + color: #ddd; + overflow: hidden; + font-family: 'Roboto', sans-serif; + font-size: 0.875rem; + height: 100%; + width: 100%; +} +.gray { + color: #888; +} + +/* layout */ + +.container { + height: 100%; + width: 100%; +} +.app { + /*display: flex;*/ + height: 100%; + width: 100%; +} +.app > div { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} +.app .body { + display: flex; + flex-direction: column; + flex-grow: 1; + position: relative; + height: 100%; + width: 100%; +} + +.row { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; +} +.row > div { + margin-right: 1.5rem; +} +.row > div:last-child { + margin-right: 0; +} + + +.row.menubar { + justify-content: flex-end; +} +.menubar > :first-child { + flex: 1; +} + +/* lists */ + +ul { + margin: 0.75rem 0; +} +li { + line-height: 1.5; +} + +/* header */ + +header { + height: 3.125rem; + font-size: 0.875rem; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background: rgba(16,32,64,0.5); + color: white; + z-index: 50; +} +header b { + font-weight: 900; +} +header a { + color: rgba(255,255,255,0.95); + text-decoration: none; + font-size: 0.875rem; + font-weight: 500; +} +header > div:first-child { + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 1.5rem; +} +header > div:last-child { + padding-right: 1.5rem; +} +header > div > button { + padding: 0.25rem; + margin: 0 0 0 0.5rem; + background: #000; + border-color: #888; + color: #888; +} +header > div > button:hover { + border-color: #fff; + color: #fff; +} +header .vcat-btn { + font-size: 0.875rem; + padding-left: 0.5rem; + letter-spacing: 0.0625rem; +} +header > div:last-child a { + padding: 0.5rem; +} +header .btn-link:focus, +header .btn-link:hover, +header .btn-link:active, +header a:focus, +header a:hover, +header a:active { + text-decoration: none; + color: white; +} +header a:focus, +header a:hover, +header a:active { + color: white; +} +.menuToggle { + width: 1.625rem; + height: 1.625rem; + cursor: pointer; + line-height: 1; +} +header a.navbar-brand { + font-size: .8rem; +} + +header .username { + cursor: pointer; +} + +/* headings */ + +h1 { + color: #eee; + margin-bottom: 1.25rem; + font-size: 1.5rem; + font-weight: normal; +} +div:first-child > h1:first-child, +.menuButtons + div > h1:first-child { + margin-top: 0; +} +h2 { + color: #eee; + font-size: 1.25rem; + font-weight: normal; +} +h3 { + color: #eee; + margin-top: 0; + margin-bottom: 1.25rem; + font-size: 1.0rem; + font-weight: normal; +} +p { + margin: 1.25rem 0; + line-height: 1.5; +} +.byline { + color: #888; + font-size: 0.75rem; + margin-top: 0.25rem; + margin-bottom: 1.25rem; +} + +/* links */ + +b { + color: #fff; +} +a { + text-decoration: underline; + color: #8df; +} + +/* menu button */ + +.menuButtons { + width: 2.5rem; + min-height: 18rem; +} +.menuButton { + position: relative; + text-align: center; + text-transform: uppercase; + font-size: 0.625rem; + color: #333; + text-decoration: none; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 2.5rem; + margin-bottom: 0.75rem; +} +.menuButton .icon { + background-color: #fff; + width: 2.5rem; + height: 2.5rem; + border: 1px solid; + border-color: #888; + margin-bottom: 0.3rem; + display: flex; + justify-content: center; + align-items: center; + transition: border-color 0.1s; + border-radius: 0.125rem; +} +.menuButton svg { + width: 80%; + fill: #888; +} +.menuButton:hover .icon { + background-color: #eef; + border-color: #000; +} +.menuButton:hover svg { + fill: #000; +} + +.menuButton.small { + width: 2.0rem; + margin-bottom: 0; + margin-right: 0.1875rem; +} +.menuButton.small .icon { + border: 0; + border-color: #888; + margin-bottom: 0; + width: 2.0rem; + height: 2.0rem; + border-radius: 0.0625rem; +} +.menuButton.small svg { + fill: #888; + width: 1.75rem; + height: 1.75rem; +} +.menuButton.small .icon:hover { + border-color: #11f; + background-color: #11f; +} +.menuButton.small:hover svg { + fill: #fff; +} +.results.th .menuButton.small { + width: 1.5rem; +} +.results.th .menuButton.small .icon { + width: 1.5rem; + height: 1.5rem; +} +.results.th .menuButton.small svg { + width: 1.25rem; + height: 1.25rem; +} + +.menuButton.small.active .icon { + border-color: #11f; + background-color: #11f; +} +.menuButton.small.active svg { + fill: #fff; +} +.menuButton.small.active:hover .icon { + border-color: #fff; + background-color: #11f; +} +.menuButton.small.active:hover svg { + fill: #fff; +} + +/* rows - like a table */ + +.rows { + width: 100%; +} +.rows .row { + width: 100%; +} +.rows .row:nth-of-type(2n+1) { + background: #f8f8f8; +} +.rows .row:nth-of-type(2n+2) { + background: #eeeeee; +} +.rows .row:hover { + background: #d8d8d8; +} +.rows .row > div, +.rows .row a > div { + padding: 0.75rem; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; +} +.rows .row div.title { + width: 10rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.rows .row div.string, +.rows .row div.str { + min-width: 6rem; +} +.rows .row div.bool { + width: 4rem; + overflow: visible; + text-align: center; +} +.rows .row div.color { + width: 4rem; + overflow: visible; + text-align: center; +} +.rows .row div.date { + min-width: 10rem; +} +.rows .row div.int, +.rows .row div.float { + text-align: right; + min-width: 6rem; +} +.rows .row.heading div.int, +.rows .row.heading div.float { + text-align: center; +} +.rows .row div.text { + flex: 1; + max-width: 20rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.rows .row.heading div { + text-transform: capitalize; + font-weight: bold; + background: #f8f8f8; +} +.rows .row.heading:hover { + background: #f8f8f8; +} + +/* misc ui */ + +pre, code, .license { + font-family: Menlo, monospace; + font-size: 0.75rem; + line-height: 2; +} +.swatch { + display: inline-block; + width: 0.75rem; + height: 0.75rem; + border: 1px solid #333; +} +.dot { + display: inline-block; + width: 0.5rem; + height: 0.5rem; + border-radius: 50%; +} +.light { + color: #888; +} +.pill { + display: inline-block; + padding: 0.125rem; + width: 2.5rem; + text-align: center; + border-radius: 0.5rem; + font-size: 0.75rem; + text-transform: uppercase; + font-weight: bold; +} +.pill.yes { + background: #11f; + color: #fff; +} +.pill.no { + color: #ccc; + border: 1px solid; +} + +/* columns (of tags) */ + +.form .columnCells { + padding-top: 0.25rem +} +.columnCells .column { + margin-top: 0.25rem; +} +.columnCells .column > div { + max-width: 100%; + padding: 0 0.375rem 0.375rem 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.columnCells .selected { + color: #11f; +}
\ No newline at end of file diff --git a/frontend/app/common/copyToClipboardButton.component.js b/frontend/app/common/copyToClipboardButton.component.js new file mode 100644 index 0000000..0defba5 --- /dev/null +++ b/frontend/app/common/copyToClipboardButton.component.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react' +import { writeToClipboard } from 'app/utils' + +export default class CopyToClipboardButton extends Component { + state = { + copied: false, + } + + handleClick() { + writeToClipboard(this.props.data) + this.setState({ copied: true }) + } + + render() { + return ( + <button + className={this.state.copied ? 'copyButton copied' : 'copyButton'} + onClick={this.handleClick.bind(this)} + > + {this.state.copied ? 'Copied!' : 'Copy'} + </button> + ) + } +} diff --git a/frontend/app/common/fonts.css b/frontend/app/common/fonts.css new file mode 100644 index 0000000..c782885 --- /dev/null +++ b/frontend/app/common/fonts.css @@ -0,0 +1,55 @@ +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-Bold.ttf') format('truetype'); + font-weight: bold; +} +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-BoldItalic.ttf') format('truetype'); + font-weight: bold; + font-style: italic; +} +/* +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-Light.ttf') format('truetype'); + font-weight: 100; +} +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-LightItalic.ttf') format('truetype'); + font-weight: 100; +} +*/ +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-Medium.ttf') format('truetype'); + font-weight: 300; +} +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-MediumItalic.ttf') format('truetype'); + font-style: italic; + font-weight: 300; +} +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-Regular.ttf') format('truetype'); +} +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-Italic.ttf') format('truetype'); + font-style: italic; +} +/* +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-Thin.ttf') format('truetype'); + font-weight: 100; +} +@font-face { + font-family: 'Roboto'; + src: url('/static/fonts/Roboto-ThinItalic.ttf') format('truetype'); + font-weight: 100; +} +*/
\ No newline at end of file diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js new file mode 100644 index 0000000..cf3e466 --- /dev/null +++ b/frontend/app/common/form.component.js @@ -0,0 +1,220 @@ +import React, { Component } from 'react'; +import { courtesyS } from 'app/utils' + +export const TextInput = props => ( + <label className={props.error ? 'error' : 'text'}> + {props.title && <span>{props.title}</span>} + <input + type="text" + required={props.required} + onChange={props.onChange} + name={props.name} + value={props.data[props.name]} + placeholder={props.placeholder} + autoComplete={props.autoComplete} + /> + </label> +) + +export const LabelDescription = props => ( + <label className={'text description'}> + <span>{props.title}</span> + <span>{props.children}</span> + </label> +) + +export const NumberInput = props => ( + <label className={props.error ? 'error' : 'text'}> + <span>{props.title}</span> + <input + type="number" + required={props.required} + onChange={props.onChange} + name={props.name} + value={props.data[props.name]} + min={props.min} + max={props.max} + step={props.step || 1} + /> + </label> +) + +export const ColorInput = props => ( + <label className={props.error ? 'error color' : 'text color'}> + <span>{props.title}</span> + <input + type="color" + required={props.required} + onChange={props.onChange} + name={props.name} + value={props.data[props.name]} + /> + <input + type="text" + required={props.required} + onChange={props.onChange} + name={props.name} + value={props.data[props.name]} + /> + </label> +) + +export const TextArea = props => ( + <label className={props.error ? 'textarea error' : 'textarea'}> + {props.title && <span>{props.title}</span>} + <textarea + onChange={props.onChange} + name={props.name} + value={props.data[props.name]} + /> + </label> +) + +export const Checkbox = props => ( + <label className="checkbox"> + <input + type="checkbox" + name={props.name} + value={1} + checked={props.checked} + onChange={(e) => props.onChange(props.name, e.target.checked)} + /> + <span>{props.label}</span> + </label> +) + +export const Radio = props => { + return ( + <label className="radio"> + <input + type="radio" + name={props.name} + value={props.value} + checked={props.value === props.currentValue} + onChange={() => props.onChange(props.name, props.value)} + /> + <span>{props.label}</span> + </label> + ) +} + +export class Select extends Component { + state = { + focused: false, + } + + render() { + const { name, selected, options, defaultOption, title, loading, onChange, className } = this.props + if (loading) { + return <label className='select'><div>Loading...</div></label> + } + const { focused } = this.state + return ( + <label> + {title && <span>{title}</span>} + <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}> + <div>{(options.find(opt => opt.name === selected) || {label: defaultOption}).label}</div> + <select + onFocus={() => this.setState({ focused: true })} + onBlur={() => this.setState({ focused: false })} + onChange={e => { + onChange(name, e.target.value) + // this.setState({ focused: false }) + }} + value={selected || "__default__"} + > + {!selected && defaultOption && <option value="__default__">{defaultOption}</option>} + {options.map((option, i) => ( + <option + key={option.name} + value={option.name} + disabled={option.disabled} + >{option.label}</option> + ))} + </select> + </div> + </label> + ) + } +} + +export class FileInputField extends Component { + state = { + count: 0, + } + + handleChange(files) { + const { multiple, onChange } = this.props + if (!files) { + this.setState({ count: 0 }) + } else { + this.setState({ count: multiple ? files.length : 0 }) + } + onChange(files) + } + + render() { + const { error, title, label, required, multiple, mime, name } = this.props + return ( + <label className={error ? 'error' : 'text fileInput'}> + <span>{title}</span> + <div className="row"> + <button> + {label || "Choose files"} + <FileInput + mime={mime} + multiple={multiple} + onChange={this.handleChange.bind(this)} + /> + </button> + {!!this.state.count && <span>{courtesyS(this.state.count, "file")}{" selected"}</span>} + </div> + </label> + ) + } +} + +export class FileInput extends Component { + handleChange(e) { + let { multiple, mime } = this.props + if (!mime) { + mime = "image/" + } + const files = e.dataTransfer ? e.dataTransfer.files : e.target.files + let i + let file, selectedFiles = [] + for (i = 0; i < files.length; i++) { + file = files[i] + if (file && file.type.indexOf(mime) === 0) { + if (multiple) { + selectedFiles.push(file) + } else { + break + } + } + } + if (multiple && selectedFiles.length) { + this.props.onChange(selectedFiles) + } else if (!multiple && file) { + this.props.onChange(file) + } else { + this.props.onChange() + } + } + + render() { + return ( + <input type="file" multiple={!!this.props.multiple} onChange={this.handleChange.bind(this)} /> + ) + } +} + +export const SubmitButton = (props) => ( + <label> + <span></span> + <button + className={props.className ? "submit " + props.className : "submit"} + onClick={props.onClick} + >{props.title}</button> + </label> +) diff --git a/frontend/app/common/form.css b/frontend/app/common/form.css new file mode 100644 index 0000000..dbfa01f --- /dev/null +++ b/frontend/app/common/form.css @@ -0,0 +1,323 @@ +/* label */ + +label { + display: flex; + min-width: 10rem; + flex-direction: row; + justify-content: flex-start; + align-items: center; + cursor: pointer; +} + +.label { + display: flex; + min-width: 10rem; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; +} + +/* form (stock forms) */ + +form label, +form .label { + width: 100%; + margin-bottom: 0.5rem; +} +form label span, +form .label > span { + display: inline-block; + min-width: 8rem; + padding: 0.5rem 0; +} +form label.textarea { + align-items: flex-start; +} +form input[type="checkbox"] { + margin: -0.0625rem 0.625rem 0 8rem; +} + +/* form errors */ + +form .error span { + color: #f11; +} +form .error input[type=text], +form .error input[type=number], +form .error input[type=password] { + border-color: #f11; +} + +/* form field descriptions */ + +form label.description { + cursor: normal; + font-size: small; + color: #ddd; +} +form label.description span { + padding-top: 0; +} + +/* text input */ + +input[type=text], +input[type=number], +input[type=password] { + padding: 0.5rem; + border: 1px solid #ddd; + color: #fff; + background: #111; + font-family: 'Roboto', sans-serif; + font-size: 0.875rem; + width: 15rem; + border-radius: 0.125rem; +} + +input[type=text]:focus, +input[type=number]:focus, +input[type=password]:focus { + border: 1px solid #84f; + background: #000; +} + +textarea { + width: 20rem; + height: 10rem; + padding: 0.5rem; + border: 1px solid #ddd; + font-family: 'Roboto', sans-serif; + background: #111; + color: #fff; + font-size: 0.875rem; + border-radius: 0.125rem; +} +textarea:focus { + border: 1px solid #84f; + background: #000; +} + +/* checkbox */ + +input[type=checkbox] { + position: relative; + display: block; + width: 0.75rem; + height: 0.75rem; + margin-right: 0.625rem; + cursor: pointer; + outline: 0; +} +input[type=checkbox] + span { + font-size: 0.825rem; + text-transform: uppercase; + color: #444; +} +input[type=checkbox]:hover + span { + color: #000; +} +input[type=checkbox]:focus + span { + color: #84f; +} +input[type="checkbox"]:checked + span { + color: #000; +} +input[type="checkbox"]:focus:checked + span { + color: #84f; +} + +input[type="checkbox"]:after { + position: relative; + display: block; + left: 0; + width: 0.75rem; + height: 0.75rem; + border: 0.0625rem solid #ddd; + content: ""; + background-color: #fff; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + transition: background-color 0.1s; + border-radius: 0.125rem; +} +input[type=checkbox]:focus:after { + border-color: #84f; +} +input[type="checkbox"]:checked:after { + border-color: #84f; + background-color: #84f; + background-image: url(/static/img/check.svg); + background-size: cover; +} + +/* select */ + +.select { + position: relative; + width: 9rem; + min-width: auto; + background: #111; + border-radius: 0.125rem; + border: 1px solid #ddd; + padding: 0.5rem; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 1.25rem; + cursor: pointer; +} +.select select { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + opacity: 0; + cursor: pointer; +} +.select:after { + content: ''; + position: absolute; + top: 50%; + right: 0.375rem; + transform: translateY(-0.125rem); + width: 0; + height: 0; + border-left: 0.375rem solid transparent; + border-right: 0.375rem solid transparent; + border-top: 0.375rem solid #ddd; +} +.select.focus { + border-color: #84f; + background: #000; +} +.select.focus:after { + border-top-color: #84f; +} +.select:hover { + background-color: #000; +} +.select div { + width: calc(100% - 1.025rem); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.select.wide { + width: 20rem; +} + +/* button */ + +button { + position: relative; + background: #333; + border-radius: 0.125rem; + color: #ddd; + border: 1px solid; + padding: 0.5rem; + overflow: hidden; + text-overflow: ellipsis; + font-family: 'Roboto', sans-serif; + font-size: 0.875rem; + cursor: pointer; + /*text-transform: uppercase;*/ + transition: all 0.1s; +} +button:hover { + background-color: #000; + border-color: #fff; +} +button.process { + padding-left: 1.5rem; +} +button.process:after { + content: ''; + position: absolute; + top: 50%; + left: 0.625rem; + transform: translateY(-0.375rem); + width: 0; + height: 0; + border-top: 0.375rem solid transparent; + border-bottom: 0.375rem solid transparent; + border-left: 0.375rem solid #888; +} +button.process:focus:after { + border-left-color: #84f; +} +button:focus { + background: #000; + border-color: #fff; + color: #fff; + outline: 0; +} +button:disabled { + background: #eee; + color: #888; + border-color: #bbb; + pointer-events: none; +} +button:disabled:after { + border-left-color: #aaa; +} +.buttons button { + margin-right: 0.75rem; +} +button.submit { + border-color: #d8f; + color: #fff; + background: #111; +} +button.submit:focus, +button.submit:hover { + border-color: #fff; + color: #fff; + background: #222; +} +button.submit.destroy { + background-color: rgba(16,16,16,0.5); + border-color: #b11; + color: #d11; +} +button.submit.destroy:focus, +button.submit.destroy:hover { + background: #000; + border-color: #f33; + color: #f33; +} + +/* file upload, should always be inside a container */ + +input[type=file] { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; +} +::-webkit-file-upload-button { cursor: pointer; } +.fileInput > .row { + align-items: center; +} +.fileInput > .row > span { + padding-left: 1rem; +} + +/* copy button */ + +.copyButton { + border-color: transparent; + color: #84f; + font-size: 0.675rem; + padding: 0.25rem; + margin-left: 0.25rem; +} +.desktop .copyButton:hover { + border-color: #84f; +} +.copyButton.copied { + color: #84f; +}
\ No newline at end of file diff --git a/frontend/app/common/header.component.js b/frontend/app/common/header.component.js new file mode 100644 index 0000000..115c9b4 --- /dev/null +++ b/frontend/app/common/header.component.js @@ -0,0 +1,41 @@ +import React from 'react' +// import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' +import { session } from 'app/session' + +function Header(props) { + return ( + <header> + <div> + <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link> + </div> + <div> + <span className='username' onClick={() => changeUsername()}> + {' → '}{props.username} + </span> + </div> + </header> + ) +} + +const changeUsername = () => { + const username = prompt("Please enter your username:", session('username')) + if (username && username.length) { + session.set('username', username) + document.querySelector('Header div span').innerText = ' → ' + username // very naughty + } +} + + +const mapStateToProps = (state) => ({ + // auth: state.auth, + site: state.site, + username: session.get('username'), + // isAuthenticated: state.auth.isAuthenticated, +}) + +const mapDispatchToProps = (dispatch) => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Header) diff --git a/frontend/app/common/imageCrop.component.js b/frontend/app/common/imageCrop.component.js new file mode 100644 index 0000000..f687d90 --- /dev/null +++ b/frontend/app/common/imageCrop.component.js @@ -0,0 +1,41 @@ +import React, { Component } from 'react'; +import { cropImage } from 'app/utils' + +export default class ImageCrop extends Component { + state = { + cropURL: null + } + + componentDidMount() { + const { url, crop } = this.props + this.crop(url, crop) + } + + componentDidUpdate(prevProps) { + const { url, crop } = this.props + if (this.props.crop !== prevProps.crop) { + cropImage(url, crop).then(canvas =>{ + const cropURL = canvas.toDataURL('image/jpeg', 0.8) + this.setState({ cropURL }) + }) + } + } + + crop(url, crop) { + cropImage(url, crop).then(canvas =>{ + const cropURL = canvas.toDataURL('image/jpeg', 0.8) + this.setState({ cropURL }) + }) + } + + + render() { + const { cropURL } = this.state + if (!cropURL) { + return null + } + return ( + <img src={cropURL} className='preview' /> + ) + } +} diff --git a/frontend/app/common/index.js b/frontend/app/common/index.js new file mode 100644 index 0000000..5c0dc50 --- /dev/null +++ b/frontend/app/common/index.js @@ -0,0 +1,32 @@ +export { default as Header } from './header.component' +export { + MenuButton, SmallMenuButton, MenuRoute, +} from './menubutton.component' +export { + Select, Checkbox, Radio, FileInput, FileInputField, + TextInput, NumberInput, TextArea, SubmitButton, + LabelDescription, ColorInput, +} from './form.component' +export { + Swatch, Dot, Columns, Statistic, Detections, Progress +} from './miscellaneous.component' +export { default as TableIndex } from './tableIndex.component' +export { Loader } from './loader.component' +export { + TableObject, TableArray, TableTuples, + TableRow, TableCell +} from './table.component' +export { default as CopyToClipboardButton } from './copyToClipboardButton.component' +export { default as ImageCrop } from './imageCrop.component' +export { Modal } from './modal.component' +export { default as UploadImage } from './uploadImage.component' +export { default as Slider } from './slider.component' + +import './fonts.css' +import './app.css' +import './form.css' +import './loader.css' +import './table.css' +import './modal.css' +import './miscellaneous.css' +import './upload.css' diff --git a/frontend/app/common/loader.component.js b/frontend/app/common/loader.component.js new file mode 100644 index 0000000..f0a0c69 --- /dev/null +++ b/frontend/app/common/loader.component.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; + +import './loader.css' + +const Loader = () => ( + <div> + <div className='circular-loader color'> + <div className="stroke"> + <div className="stroke-left"></div> + <div className="stroke-right"></div> + </div> + </div> + </div> +) + +export { Loader } diff --git a/frontend/app/common/loader.css b/frontend/app/common/loader.css new file mode 100644 index 0000000..f047e8e --- /dev/null +++ b/frontend/app/common/loader.css @@ -0,0 +1,125 @@ + +@keyframes L_circle_rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes L_stroke_rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(1080deg); + } +} +@keyframes L_stroke_fix { + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(135deg); + } + 100% { + transform: rotate(270deg); + } +} +@keyframes L_stroke_left_grow { + 0% { + transform: rotate(-5deg); + } + 50% { + transform: rotate(-140deg); + } + 100% { + transform: rotate(-5deg); + } +} +@keyframes L_stroke_right_grow { + 0% { + transform: rotate(5deg); + } + 50% { + transform: rotate(140deg); + } + 100% { + transform: rotate(5deg); + } +} +.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before { + content: ""; + display: block; +} + +.circular-loader, .circular-loader .stroke, .circular-loader .stroke::before, .circular-loader .stroke-right, .circular-loader .stroke-right::before, .circular-loader .stroke-left, .circular-loader .stroke-left::before { + width: 2em; + height: 2em; + box-sizing: border-box; + border-radius: 50%; +} + +.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before { + border-style: solid; + border-width: 0.21429em; + border-color: #778; +} + +.circular-loader .stroke-right, .circular-loader .stroke-left::before { + position: absolute; + clip: rect(0 2em 2em 1em); +} +.circular-loader .stroke-right::before, .circular-loader .stroke-left { + position: absolute; + clip: rect(0 1em 2em 0); +} +.circular-loader .stroke::before { + position: absolute; + clip: rect(0 1.05em 1em 0.95em); +} + +/**/ +.circular-loader { + animation: L_circle_rotate 1568.23529ms linear infinite both; +} +.circular-loader .stroke::before, +.circular-loader .stroke-right, .circular-loader .stroke-left { + animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} +.circular-loader .stroke { + animation: L_stroke_rotate 5332ms steps(4) infinite both; +} +.circular-loader .stroke-right::before { + animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} +.circular-loader .stroke-left::before { + animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; +} +@keyframes color_K { + 0%, 15% { + border-color: #44444f; + } + 25%, 40% { + border-color: #bbbbc7; + } + 50%, 65% { + border-color: #66666f; + } + 75%, 90% { + border-color: #ccccd4; + } + 100% { + border-color: #44444f; + } +} +.circular-loader.color .stroke::before { + animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both; +} +.circular-loader.color .stroke-right::before { + animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both; +} +.circular-loader.color .stroke-left::before { + animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both; +} + diff --git a/frontend/app/common/menubutton.component.js b/frontend/app/common/menubutton.component.js new file mode 100644 index 0000000..5fd8e2f --- /dev/null +++ b/frontend/app/common/menubutton.component.js @@ -0,0 +1,128 @@ +import React, { Component } from 'react' +import { Route, Link } from 'react-router-dom' +import { history } from 'app/store' + +const icons = { + upload: { + title: 'Upload', + image: '/static/img/add.svg', + // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>, + // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg> + // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg> + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>, + }, + new: { + title: 'New', + image: '/static/img/add.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>, + // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>, + // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg> + }, + save: { + title: 'Export', + image: '/static/img/save.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z"/></svg>, + }, + saved: { + title: 'Saved', + image: '/static/img/folder.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>, + }, + recent: { + title: 'Recent', + image: '/static/img/history.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z"/></svg>, + }, + random: { + title: 'Random', + image: '/static/img/random.svg', + // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>, + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><circle cx="7.5" cy="16.5" r="1.5"/><circle cx="7.5" cy="7.5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="16.5" cy="16.5" r="1.5"/><circle cx="16.5" cy="7.5" r="1.5"/></svg> + }, + menu: { + title: 'Menu', + image: '/static/img/menu.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>, + }, + list: { + title: 'List', + image: '/static/img/view_list.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M3 5v14h17V5H3zm4 2v2H5V7h2zm-2 6v-2h2v2H5zm0 2h2v2H5v-2zm13 2H9v-2h9v2zm0-4H9v-2h9v2zm0-4H9V7h9v2z"/></svg>, + }, + edit: { + title: 'Edit', + image: '/static/img/edit.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg> + }, + delete: { + title: 'Delete', + image: '/static/img/delete.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg> + }, + back: { + title: 'Back', + image: '/static/img/back.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/></svg>, + }, + image_search: { + title: 'Search', + image: '/static/img/image_search.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z"/><path fill="none" d="M0 0h24v24H0z"/></svg>, + }, + search: { + title: 'Search', + image: '/static/img/search.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>, + }, + open_in_new: { + title: 'Open', + image: '/static/img/open_in_new.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>, + }, + test: { + title: 'Test', + image: '/static/img/fastfood.svg', + svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.06 22.99h1.66c.84 0 1.53-.64 1.63-1.46L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.05zM1 21.99V21h15.03v.99c0 .55-.45 1-1.01 1H2.01c-.56 0-1.01-.45-1.01-1zm15.03-7c0-8-15.03-8-15.03 0h15.03zM1.02 17h15v2h-15z"/><path fill="none" d="M0 0h24v24H0z"/></svg> + }, + // export: { + // title: 'Export', + // image: '/static/img/export.svg', + // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>, + // }, +} + +const goBack = () => history.goBack() + +export const MenuButton = ({ name, href, onClick, label, children, className }) => { + const { svg, title } = icons[name] + if (name === 'back') { + onClick = goBack + } + if (href) { + return ( + <Link to={href} className={className || 'menuButton'}> + <div className='icon'>{svg}</div> + {label === false ? "" : title} + {children} + </Link> + ) + } else { + return ( + <div className={className || 'menuButton'} onClick={onClick}> + <div className='icon'>{svg}</div> + {label === false ? "" : title} + {children} + </div> + ) + } +} + +export const SmallMenuButton = (props) => ( + <MenuButton {...props} label={false} className={props.active ? 'menuButton small active' : 'menuButton small'} /> +) + +export const MenuRoute = ({ component: Component, props, ...rest }) => ( + <Route {...rest} render={routeProps => ( + <Component {...routeProps} {...props} /> + )}/> +) diff --git a/frontend/app/common/miscellaneous.component.js b/frontend/app/common/miscellaneous.component.js new file mode 100644 index 0000000..bf2c266 --- /dev/null +++ b/frontend/app/common/miscellaneous.component.js @@ -0,0 +1,71 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { clamp, percent } from 'app/utils' + +export const Swatch = ({ color }) => ( + <div + className='swatch' + style={{ backgroundColor: color ? 'rgb(' + color.join(',') + ')' : 'transparent' }} + /> +) + +export const Dot = ({ color }) => ( + <div + className='dot' + style={{ backgroundColor: color }} + /> +) + +export const Columns = ({ count, margin, width, object, children, className }) => { + if (!object || !object.length) object = children + if (!object || !object.length) return null + margin = margin || 380 + width = width || 250 + count = count || Math.floor((window.innerWidth - margin) / width) + let columns = [] + let len = object.length + let j = 0 + for (let i = 0; i < count; i++) { + let column_len = len * (i + 1) / count + let column = [] + for (; j < column_len; j++) { + column.push(<div key={j}>{object[j]}</div>) + } + columns.push(<div key={"col_" + i + "_" + j} className='column' style={{ width }}>{column}</div>) + if (j >= len) break + } + return ( + <div className={'row columnCells ' + className}> + {columns} + </div> + ) +} + +export const Statistic = ({ name, value, link }) => ( + <div className='statistic row'> + <div className='title'>{link ? <Link to={link}>{name}</Link> : name}</div> + <div className='int'>{value}</div> + </div> +) + +export const Detections = ({ detections, labels }) => ( + (detections || []).map(({ label, rect }, i) => ( + <div + className='rect' + key={i} + style={{ + left: percent(clamp(rect.x1)), + width: percent(clamp(rect.x2 - rect.x1, 0, Math.min(1.0, 1.0 - rect.x1))), + top: percent(clamp(rect.y1)), + height: percent(clamp(rect.y2 - rect.y1, 0, Math.min(1.0, 1.0 - rect.y1))), + }}> + {labels && <span>{label.replace(/_/g, ' ')}</span>} + </div> + ) +)) + +export const Progress = ({ current, total }) => ( + <div className='progress'> + <div className='bar' style={{ width: Math.round(100 * current / total) + '%' }} /> + </div> +) diff --git a/frontend/app/common/miscellaneous.css b/frontend/app/common/miscellaneous.css new file mode 100644 index 0000000..32c3e7b --- /dev/null +++ b/frontend/app/common/miscellaneous.css @@ -0,0 +1,18 @@ + +/* Progress bar */ + +.progress { + background: #f8f8f8; + margin: 0.25rem 0; + height: 0.25rem; + width: 20rem; + position: relative; + box-shadow: 0 1px 3px rgba(0,0,0,0.2); + margin-bottom: 0.2rem; +} +.progress .bar { + position: absolute; + top: 0; left: 0; + height: 100%; + background: #11f; +} diff --git a/frontend/app/common/modal.component.js b/frontend/app/common/modal.component.js new file mode 100644 index 0000000..75c479c --- /dev/null +++ b/frontend/app/common/modal.component.js @@ -0,0 +1,9 @@ +import React, { Component } from 'react' + +export const Modal = ({ visible, children }) => ( + <div className={visible ? "modal visible" : "modal"}> + <div> + {children} + </div> + </div> +) diff --git a/frontend/app/common/modal.css b/frontend/app/common/modal.css new file mode 100644 index 0000000..5e95a09 --- /dev/null +++ b/frontend/app/common/modal.css @@ -0,0 +1,20 @@ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + background: rgba(0,0,0,0.2); + display: none; +} +.modal.visible { + display: flex; + justify-content: center; + align-items: center; +} +.modal > div { + background: #fff; + padding: 1rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.5); +} diff --git a/frontend/app/common/slider.component.js b/frontend/app/common/slider.component.js new file mode 100644 index 0000000..9d96b1e --- /dev/null +++ b/frontend/app/common/slider.component.js @@ -0,0 +1,120 @@ +import React, { Component } from 'react' +import { default as throttle } from 'lodash.throttle' + +const SLIDER_THROTTLE_TIME = 1000 / 30 + +export default class Slider extends Component { + state = { + value: 0 + } + + constructor(props){ + super(props) + this.timeout = 0 + this.handleInput = this.handleInput.bind(this) + this.handleRange = this.handleRange.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME) + } + componentDidMount() { + let { value } = this.props + if (this.props.type === 'int') { + value = parseInt(value) + } + this.setState({ value }) + } + componentDidUpdate(prevProps) { + let { value } = this.props + if (prevProps.value !== value) { + if (this.props.type === 'int') { + value = parseInt(value) + } + this.setState({ value }) + } + } + handleInput(e){ + let { name } = this.props + let new_value = e.target.value + if (new_value === '') { + new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2 + } + else if (this.props.type === 'int') { + new_value = parseInt(new_value) + } + else if (this.props.type === 'odd') { + new_value = parseInt(Math.floor(new_value / 2) * 2 + 1) + } + else { + new_value = parseFloat(new_value) + } + if (this.state.value !== new_value) { + this.setState({ value: new_value }) + this.props.onChange(this.props.name, new_value) + } + } + handleKeyDown(e) { + console.log(e.keyCode) + } + handleRange(e){ + let { value: new_value } = e.target + if (this.props.type === 'int') { + new_value = parseInt(new_value) + } + else if (this.props.type === 'odd') { + new_value = parseInt(Math.floor(new_value / 2) * 2 + 1) + } + else if (this.props.type === 'list') { + new_value = this.props.options[new_value] || this.props.options[0] + } + else { + new_value = parseFloat(new_value) + } + this.setState({ value: new_value }) + this.onChange(this.props.name, new_value) + } + render(){ + let { name, title } = this.props + let value = this.state.value + if (typeof value === 'undefined') { + value = this.props.min + } + let text_value = value + let step; + let min = this.props.min || 0 + let max = this.props.max || 0 + if (this.props.type === 'int') { + step = 1 + } else if (this.props.type === 'list') { + min = 0 + max = this.props.options.length - 1 + step = 1 + value = this.props.options.indexOf(value) + } else { + step = (this.props.max - this.props.min) / 100 + text_value = parseFloat(value).toFixed(2) + } + return ( + <label className={this.props.error ? 'slider error' : 'slider'}> + <span>{title}</span> + <input + type='number' + min={min} + max={max} + step={step} + value={text_value} + onKeyDown={this.handleKeyDown} + onChange={this.handleInput} + onBlur={this.handleInput} + /> + <input + type='range' + min={min} + max={max} + step={step} + value={value} + onChange={this.handleRange} + /> + </label> + ) + } +} diff --git a/frontend/app/common/table.component.js b/frontend/app/common/table.component.js new file mode 100644 index 0000000..b26dcba --- /dev/null +++ b/frontend/app/common/table.component.js @@ -0,0 +1,128 @@ +import React from 'react' + +import { formatName } from 'app/utils' + +const __HR__ = '__HR__' + +export function TableObject({ tag, object, order, summary }) { + if (!object) return null + if (object === 'loading') { + return <div className='tableObject loading'>{tag}{': Loading'}</div> + } + if (object.err) { + return <div className='tableObject error'>{tag}{' Error: '}{object.err}</div> + } + let objects = Object.keys(object) + if (order) { + const grouped = objects.reduce((a, b) => { + const index = order.indexOf(b) + if (index !== -1) { + a.order.push([index, b]) + } else { + a.alpha.push(b) + } + return a + }, { order: [], alpha: [] }) + objects = grouped.order + .sort((a, b) => a[0] - b[0]) + .map(([i, s]) => s) + if (!summary) { + objects = objects + // .concat([__HR__]) + .concat(grouped.alpha.sort()) + } + } else { + objects = objects.sort() + } + return ( + <div> + {tag && <h3 className='tt'>{tag}</h3>} + <table className={'tableObject ' + tag}> + <tbody> + {objects.map((key, i) => ( + <TableRow key={key + '_' + i} name={key} value={object[key]} /> + ))} + </tbody> + </table> + </div> + ) +} + +export function TableArray({ tag, list }) { + if (!list) return null + return ( + <div> + {tag && <h3>{tag}</h3>} + <table className={'tableArray ' + tag}> + <tbody> + {list.map((value, i) => ( + <tr key={tag + '_' + i}> + <TableCell value={value} /> + </tr> + ))} + </tbody> + </table> + </div> + ) +} + +export function TableTuples({ tag, list }) { + if (!list) return null + return ( + <div> + {tag && <h3>{tag}</h3>} + <table className={'tableTuples ' + tag}> + <tbody> + {list.map(([key, ...values], i) => ( + <tr key={tag + '_' + i}> + <th>{formatName(key)}</th> + {values.map((value, j) => ( + <TableCell key={i + '_' + j} value={value} /> + ))} + </tr> + ))} + </tbody> + </table> + </div> + ) +} + +export function TableRow({ name, value }) { + if (name === __HR__) { + return ( + <tr> + <th className='tr'> + <hr /> + </th> + </tr> + ) + } + return ( + <tr> + <th>{formatName(name)}</th> + <TableCell name={name} value={value} /> + </tr> + ) +} + +export function TableCell({ value }) { + if (value && typeof value === 'object') { + if (value._raw) { + value = value.value + } else if (value.length) { + value = <TableArray nested tag={''} list={value} /> + } else { + value = <TableObject nested tag={''} object={value} /> + } + } + if (typeof value === 'boolean') { + return <td>{value ? <Pill type='yes' /> : <Pill type='no' />}</td> + } + return ( + <td>{value}</td> + ) +} + +export const Pill = ({ color, type }) => ( + <div className={'pill ' + type} style={{ backgroundColor: color }}>{type}</div> +)
\ No newline at end of file diff --git a/frontend/app/common/table.css b/frontend/app/common/table.css new file mode 100644 index 0000000..4752e21 --- /dev/null +++ b/frontend/app/common/table.css @@ -0,0 +1,96 @@ +/* tables on metadata pages */ + +h3.tt { + margin: 1.5rem 0 0.25rem 0; + font-size: 1.25rem; +} +table { + border: 0; + margin: 0; + padding: 0; + border-spacing: 0; + line-height: 1.5; + color: #666; +} +.tableObject td, +.tableObject th { + padding: 0.1875rem; + vertical-align: top; +} +.tableObject hr { + width: 100%; + color: transparent; + border: 0; + border-bottom: 1px solid #bbb; + align: left; + margin: 3px 0; + padding: 0; +} +.tableObject th, +.tableTuples th { + min-width: 8rem; + text-align: left; + text-transform: capitalize; + padding-left: 0; + padding-right: 0.625rem; + font-weight: 300; + color: #333; +} +.tableTuples td { + text-align: right; +} +.tableObject td { + font-weight: normal; + color: #000; +} +.tableObject .tableObject { + border: 0.0625rem solid #ddd; +} +.tableArray { + border: 0.0625rem solid #ddd; + border-spacing: 0; +} +.tableArray td { + border-bottom: 0.0625rem solid #ddd; +} + +.rows .tableRow { + flex-wrap: wrap; +} +.rows .row > div.galleryRow { + padding: 0 0.75rem 0.75rem 0.75rem; +} +.rows .row > div.galleryRow > div { + display: flex; + flex-direction: row; + max-height: 100px; + flex-wrap: wrap; + max-width: 100%; + overflow: hidden; +} +.galleryRow .thumbnail { + height: 100px; + margin-right: 0.75rem; +} +/* +.gray { + font-size: 12px; + color: #888; + display: block; +} +.sha256.heading { + margin: 20px 0 0px; +} +.gray span { + padding-right: 5px; +} +.gray { + margin-bottom: 10px; +} +.gray a { + color: #666; +} +*/ +.tableIndex { + width: 100%; +}
\ No newline at end of file diff --git a/frontend/app/common/tableIndex.component.js b/frontend/app/common/tableIndex.component.js new file mode 100644 index 0000000..c58fc35 --- /dev/null +++ b/frontend/app/common/tableIndex.component.js @@ -0,0 +1,129 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { formatDateTime } from 'app/utils' +import { Loader, Swatch, Dot } from 'app/common' + +/* + <TableIndex + title="Collections" + actions={actions.collection} + data={data.collection.index} + fields={[ + { name: 'title', type: 'title', link: row => '/collection/' + row.id + '/show/' }, + { name: 'username', type: 'string' }, + { name: 'date', type: 'date' }, + { name: 'notes', type: 'text' }, + ]} + /> +*/ + +export default class TableIndex extends Component { + componentDidMount() { + this.props.actions && this.props.actions.index() + } + + render() { + const { data, els, title, fields, noHeadings, notFoundMessage } = this.props + if (data.loading) { + return <Loader /> + } + if (!els && (!data.lookup || !data.order.length)) { + return ( + <div> + <h1>{title}</h1> + <p className='gray'> + {notFoundMessage || ("No " + title)} + </p> + </div> + ) + } + return ( + <div className='tableIndex'> + <h1>{title}</h1> + <div className='rows'> + {!noHeadings && <RowHeadings fields={fields} />} + {els + ? els.map(el => <Row key={el.id} row={el} fields={fields} />) + : data.order.map(id => <Row key={id} row={data.lookup[id]} fields={fields} />) + } + </div> + </div> + ) + } +} + +const RowHeadings = ({fields}) => { + return ( + <div className='row heading'> + {fields.map(field => { + if (field.type === 'gallery') return + let css = {} + if (field.width) { + css = { width: field.width, maxWidth: 'none', flex: 'none', } + } + if (field.flex) { + css.flex = field.flex + } + return <div key={field.name} className={field.type} style={css}>{(field.title || field.name).replace(/_/g, ' ')}</div> + })} + </div> + ) +} + +const Row = ({ row, fields }) => { + return ( + <div className='row tableRow'> + {fields.map(field => { + let value = field.valueFn ? field.valueFn(row) : row[field.name] + let css = {} + if (field.type === 'date' && (row.updated_at || row.created_at || value)) { + // value = (value || "").split('.')[0] + value = formatDateTime(row.updated_at || row.created_at || value) + } else if (field.type === 'text') { + value = String(value || "").trim().split('\n')[0].replace(/^#+/, '').substr(0, 100) + } else if (field.type === 'color') { + value = <Swatch color={value} /> + } else if (field.type === 'bool') { + value = <Dot color={value ? '#11f' : '#fff'} /> + } else if (field.type === 'str') { + value = String(value || "").replace(/_/g, ' ') + } else if (field.type === 'gallery') { + return <GalleryRow key={field.name} media={value} /> + } + if (field.width) { + css = { width: field.width, maxWidth: 'none', flex: 'none', } + } + if (field.flex) { + css.flex = field.flex + } + let className + if (field.style) { + className = field.type + ' ' + field.style + } else { + className = field.type + } + value = <div title={value} key={field.name} className={className} style={css}>{value}</div> + if (field.link) { + return <Link key={field.name} to={field.link(row)}>{value}</Link> + } + return value + })} + </div> + ) +} + +const GalleryRow = ({ media }) => { + return ( + <div className='galleryRow'> + <div> + {media.map(img => ( + <Link to={"/media/id/" + img.id + "/"} key={img.url}> + <img src={img.url} className='thumbnail' /> + </Link> + ))} + </div> + </div> + ) +} diff --git a/frontend/app/common/upload.css b/frontend/app/common/upload.css new file mode 100644 index 0000000..719f98c --- /dev/null +++ b/frontend/app/common/upload.css @@ -0,0 +1,26 @@ +/* drag-and-drop */ + +.dragCurtain { + display: none; + pointer-events: none; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); + z-index: 1; +} +.dragCurtain div { + color: #11f; + background: white; + border: 2px solid #11f; + padding: 2rem; + font-size: 1.5rem; + font-weight: bold; +} +.dragging .dragCurtain { + display: flex; +} diff --git a/frontend/app/common/upload.helpers.js b/frontend/app/common/upload.helpers.js new file mode 100644 index 0000000..f26e2cc --- /dev/null +++ b/frontend/app/common/upload.helpers.js @@ -0,0 +1,174 @@ +import ExifReader from 'exifreader' + +function base64ToUint8Array(string, start, finish) { + start = start || 0 + finish = finish || string.length + // atob that shit + const binary = atob(string) + const buffer = new Uint8Array(binary.length) + for (let i = start; i < finish; i++) { + buffer[i] = binary.charCodeAt(i) + } + return buffer +} + +function getOrientation(uri) { + // Split off the base64 data + const base64String = uri.split(',')[1] + // Read off first 128KB, which is all we need to + // get the EXIF data + const arr = base64ToUint8Array(base64String, 0, 2 ** 17) + try { + const tags = ExifReader.load(arr.buffer) + // console.log(tags) + if (typeof tags.Orientation == 'number') { + return tags.Orientation + } + return tags.Orientation.value + } catch (err) { + return 1 + } +} + +function applyRotation(canvas, ctx, deg) { + const radians = deg * (Math.PI / 180) + if (deg === 90) { + ctx.translate(canvas.width, 0) + } else if (deg === 180) { + ctx.translate(canvas.width, canvas.height) + } else if (deg === 270) { + ctx.translate(0, canvas.height) + } + ctx.rotate(radians) +} + +/** + * Mapping from EXIF orientation values to data + * regarding the rotation and mirroring necessary to + * render the canvas correctly + * Derived from: + * http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/ + */ +const orientationToTransform = { + 1: { rotation: 0, mirror: false }, + 2: { rotation: 0, mirror: true }, + 3: { rotation: 180, mirror: false }, + 4: { rotation: 180, mirror: true }, + 5: { rotation: 90, mirror: true }, + 6: { rotation: 90, mirror: false }, + 7: { rotation: 270, mirror: true }, + 8: { rotation: 270, mirror: false } +} + +function applyOrientationCorrection(canvas, ctx, uri) { + const orientation = getOrientation(uri) + // Only apply transform if there is some non-normal orientation + if (orientation && orientation !== 1) { + console.log(orientation) + const transform = orientationToTransform[orientation] + const { rotation } = transform + const flipAspect = rotation === 90 || rotation === 270 + if (flipAspect) { + // Fancy schmancy swap algo + canvas.width = canvas.height + canvas.width + canvas.height = canvas.width - canvas.height + canvas.width -= canvas.height + } + if (rotation > 0) { + applyRotation(canvas, ctx, rotation) + } + } +} + +function getScale(width, height, viewportWidth, viewportHeight, fillViewport) { + function fitHorizontal() { + return viewportWidth / width + } + function fitVertical() { + return viewportHeight / height + } + fillViewport = !!fillViewport + const landscape = (width / height) > (viewportWidth / viewportHeight) + if (landscape) { + if (fillViewport) { + return fitVertical() + } + if (width > viewportWidth) { + return fitHorizontal() + } + } else { + if (fillViewport) { + return fitHorizontal() + } + if (height > viewportHeight) { + return fitVertical() + } + } + return 1 +} + +export function renderToCanvas(img, options) { + if (!img) return null + options = options || {} + + // Canvas max size for any side + const maxSide = options.maxSide || 0 + const canvas = document.createElement('canvas') + const ctx = canvas.getContext('2d') + const initialScale = options.scale || 1 + /* + // constrain + // Scale to needed to constrain canvas to max size + let scale = getScale(img.naturalWidth * initialScale, img.naturalHeight * initialScale, maxSide, maxSide, true) + // console.log(scale) + // Still need to apply the user defined scale + scale *= initialScale + canvas.width = Math.round(img.naturalWidth * scale) + canvas.height = Math.round(img.naturalHeight * scale) + */ + const { naturalWidth, naturalHeight } = img + if (maxSide > 0) { + if (naturalWidth > naturalHeight) { + canvas.width = Math.min(maxSide, naturalWidth) + canvas.height = naturalHeight * canvas.width / naturalWidth + } else { + canvas.height = Math.min(maxSide, naturalHeight) + canvas.width = naturalWidth * canvas.height / naturalHeight + } + } else { + canvas.width = naturalWidth + canvas.height = naturalHeight + } + const { correctOrientation } = options + const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i) + const hasDataURI = !!img.src.match(/^data:/) + + ctx.save() + + // Can only correct orientation on JPEGs represented as dataURIs + // for the time being + if (correctOrientation && jpeg && hasDataURI) { + applyOrientationCorrection(canvas, ctx, img.src) + } + // Resize image if too large + // if (scale !== 1) { + // ctx.scale(scale, scale) + // } + + ctx.drawImage(img, 0, 0, canvas.width, canvas.height) + ctx.restore() + + return canvas +} + +export function renderThumbnail(img) { + const resized = renderToCanvas(img, { correctOrientation: true }) + // const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas') + // const ctx = canvas.getContext('2d') + // ctx.fillStyle = 'black' + // ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE) + // const xOffset = (MAX_SIDE - resized.width) / 2 + // const yOffset = (MAX_SIDE - resized.height) / 2 + // ctx.drawImage(resized, xOffset, yOffset, resized.width, resized.height) + return resized +} diff --git a/frontend/app/common/uploadImage.component.js b/frontend/app/common/uploadImage.component.js new file mode 100644 index 0000000..3ae41c8 --- /dev/null +++ b/frontend/app/common/uploadImage.component.js @@ -0,0 +1,74 @@ +import React, { Component } from 'react' + +import { renderThumbnail } from './upload.helpers' + +export default class UploadImageComponent extends Component { + constructor(props) { + super(props) + document.body.addEventListener("dragover", this.dragOver.bind(this)) + document.body.addEventListener("dragleave", this.dragLeave.bind(this)) + document.body.addEventListener("drop", this.upload.bind(this)) + } + + dragOver(e) { + e.stopPropagation() + e.preventDefault() + document.body.className = 'dragging' + } + + dragLeave(e) { + e.stopPropagation() + e.preventDefault() + document.body.className = '' + } + + upload(e) { + e.preventDefault() + document.body.className = '' + const files = e.dataTransfer ? e.dataTransfer.files : e.target.files + let i + let file + for (i = 0; i < files.length; i++) { + file = files[i] + if (file && file.type.match('image.*')) break + } + if (!file) { + console.log('No file specified') + return + } + const fr = new FileReader() + fr.onload = fileReaderEvent => { + fr.onload = null + const img = new Image() + img.onload = () => { + img.onload = null + this.resizeAndUpload(file, img) + } + img.src = fileReaderEvent.target.result + } + fr.readAsDataURL(file) + } + + resizeAndUpload(file, img) { + const canvas = renderThumbnail(img, this.props) + canvas.toBlob(blob => { + this.props.onUpload({ file, img, canvas, blob, freshen: true }) + }, 'image/jpeg', this.props.quality || 80) + } + + render() { + return ( + <div className='uploadButton'> + <input + type="file" + accept="image/*" + onChange={this.upload.bind(this)} + required + /> + <div className='dragCurtain'> + <div className='dragLabel'>Drop image here</div> + </div> + </div> + ) + } +} diff --git a/frontend/app/session.js b/frontend/app/session.js new file mode 100644 index 0000000..cdce686 --- /dev/null +++ b/frontend/app/session.js @@ -0,0 +1,19 @@ +import Storage from 'store2' + +export const session = Storage.namespace('swimmer') + +export const getDefault = (key, def) => { + const val = session.get(key); + return (val === null) ? def : val +} +export const getDefaultInt = (key, def) => { + return parseInt(getDefault(key, def), 10) +} +export const getDefaultFloat = (key, def) => { + return parseFloat(getDefault(key, def), 10) +} + +const username = session.get('username') +if (!username) { + session.set('username', 'anonymous') +} diff --git a/frontend/app/site/actions.js b/frontend/app/site/actions.js new file mode 100644 index 0000000..e672028 --- /dev/null +++ b/frontend/app/site/actions.js @@ -0,0 +1,19 @@ +import { bindActionCreators } from 'redux' +// import { actions as crudActions } from './api' + +import * as siteActions from './site/site.actions' + +import { store } from './store' + +export default + // Object.keys(crudActions) + // .map(a => [a, crudActions[a]]) + // .concat( + [ + ['site', siteActions], + ] //) + .map(p => [p[0], bindActionCreators(p[1], store.dispatch)]) + .concat([ + // ['socket', socketActions], + ]) + .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
\ No newline at end of file diff --git a/frontend/app/site/app.js b/frontend/app/site/app.js new file mode 100644 index 0000000..cf52460 --- /dev/null +++ b/frontend/app/site/app.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react' +import { ConnectedRouter } from 'connected-react-router' +import { Route } from 'react-router' + +import ViewerContainer from './viewer/viewer.container' +import actions from './actions' + +export default class App extends Component { + componentDidMount() { + const path_partz = window.location.pathname.split('/') + const graph_name = path_partz[1] + let path_name = null + if (path_partz.length > 2) { + path_name = path_partz[2] + } + // console.log('loading', graph_name, path_name) + actions.site.loadSite(graph_name, path_name) + } + + render() { + return ( + <ConnectedRouter history={this.props.history}> + <div className='app'> + <Route path={'/:graph_name/:page_name'} component={ViewerContainer} exact /> + <Route exact key='root' path='/' render={() => { + // setTimeout(() => this.props.history.push('/'), 10) + return null + }} /> + </div> + </ConnectedRouter> + ) + } +} diff --git a/frontend/app/site/index.js b/frontend/app/site/index.js new file mode 100644 index 0000000..6f1a0a5 --- /dev/null +++ b/frontend/app/site/index.js @@ -0,0 +1,17 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import { Provider } from 'react-redux' + +import App from './app' + +import { store, history } from './store' + +const container = document.createElement('div') +container.classList.add('container') +document.body.appendChild(container) + +ReactDOM.render( + <Provider store={store}> + <App history={history} /> + </Provider>, container +) diff --git a/frontend/app/site/site/site.actions.js b/frontend/app/site/site/site.actions.js new file mode 100644 index 0000000..2eea442 --- /dev/null +++ b/frontend/app/site/site/site.actions.js @@ -0,0 +1,11 @@ +import * as types from 'app/types' +import { api } from 'app/utils' + +export const setSiteTitle = title => dispatch => { + document.querySelector('title').innerText = title + dispatch({ type: types.site.set_site_title, payload: title }) +} + +export const loadSite = (graph_name, path_name) => dispatch => ( + api(dispatch, types.site, 'site', '/' + graph_name + '/index.json') +) diff --git a/frontend/app/site/site/site.reducer.js b/frontend/app/site/site/site.reducer.js new file mode 100644 index 0000000..85c3486 --- /dev/null +++ b/frontend/app/site/site/site.reducer.js @@ -0,0 +1,36 @@ +import * as types from '../types' + +const initialState = { + siteTitle: 'swimmer', + graph: { + loading: true, + } +} + +export default function siteReducer(state = initialState, action) { + console.log(action.type, action) + switch (action.type) { + case types.site.set_site_title: + return { + ...state, + siteTitle: action.payload, + } + + case types.site.loaded: + return { + ...state, + graph: action.data.graph, + } + + case '@@router/LOCATION_CHANGE': + return { + ...state, + graph: { + ...state.graph, + } + } + + default: + return state + } +} diff --git a/frontend/app/site/store.js b/frontend/app/site/store.js new file mode 100644 index 0000000..a228e2b --- /dev/null +++ b/frontend/app/site/store.js @@ -0,0 +1,37 @@ +import { applyMiddleware, compose, combineReducers, createStore } from 'redux' +import { connectRouter, routerMiddleware } from 'connected-react-router' +import { createBrowserHistory } from 'history' +import thunk from 'redux-thunk' + +import siteReducer from './site/site.reducer' + +const createRootReducer = history => ( + combineReducers({ + auth: (state = {}) => state, + router: connectRouter(history), + site: siteReducer, + }) +) + +const configureStore = (initialState = {}, history) => { + const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose + + const store = createStore( + createRootReducer(history), + initialState, + composeEnhancers( + applyMiddleware( + thunk, + routerMiddleware(history) + ), + ), + ) + + return store +} + +const history = createBrowserHistory() +const store = configureStore({}, history) +const { dispatch } = store + +export { store, history, dispatch } diff --git a/frontend/app/site/types.js b/frontend/app/site/types.js new file mode 100644 index 0000000..23bed98 --- /dev/null +++ b/frontend/app/site/types.js @@ -0,0 +1,11 @@ +import { with_type, crud_type } from 'app/api/crud.types' + +export const site = with_type('site', [ + 'set_site_title', 'loading', 'loaded', 'error', +]) + +export const system = with_type('system', [ + 'load_site', +]) + +export const init = '@@INIT' diff --git a/frontend/app/site/viewer/viewer.container.js b/frontend/app/site/viewer/viewer.container.js new file mode 100644 index 0000000..42ce6c2 --- /dev/null +++ b/frontend/app/site/viewer/viewer.container.js @@ -0,0 +1,96 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import actions from '../actions' +import { Loader } from 'app/common/loader.component' +import TileHandle from 'app/views/page/components/tile.handle' + +import '../../views/page/page.css' + +class ViewerContainer extends Component { + state = { + page: {}, + } + + constructor(props) { + super(props) + this.pageRef = React.createRef() + this.handleMouseDown = this.handleMouseDown.bind(this) + } + + componentDidUpdate(prevProps) { + // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname) + if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) { + this.load() + } + } + + load() { + const { graph_name, page_name } = this.props.match.params + const page_path = ["", graph_name, page_name].join('/') + const { pages, home_page } = this.props.graph + const page = pages[page_path] + if (!page) { + // console.log('-> home page') + console.log(page_path) + const { home_page } = this.props.graph + this.setState({ page: pages[home_page] }) + } else { + // console.log(page) + console.log(page_path) + this.setState({ page }) + } + } + + handleMouseDown(e, tile) { + // console.log(tile) + } + + render() { + const { page } = this.state + if (this.props.graph.loading || !page.id) { + return ( + <div> + <div className='body'> + <div className='page loading'> + <Loader /> + </div> + </div> + </div> + ) + } + const { settings } = page + const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' } + // console.log(page) + return ( + <div className='body'> + <div className='page' ref={this.pageRef} style={pageStyle}> + {page.tiles.map(tile => { + return ( + <TileHandle + viewing + key={tile.id} + tile={tile} + bounds={this.state.bounds} + onMouseDown={e => this.handleMouseDown(e, tile)} + onDoubleClick={e => {}} + /> + ) + })} + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ + site: state.site, + graph: state.site.graph, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(ViewerContainer) diff --git a/frontend/app/store.js b/frontend/app/store.js new file mode 100644 index 0000000..9cf1dbe --- /dev/null +++ b/frontend/app/store.js @@ -0,0 +1,45 @@ +import { applyMiddleware, compose, combineReducers, createStore } from 'redux' +import { connectRouter, routerMiddleware } from 'connected-react-router' +import { createBrowserHistory } from 'history' +import thunk from 'redux-thunk' + +import uploadReducer from 'app/views/upload/upload.reducer' +import graphReducer from 'app/views/graph/graph.reducer' +import pageReducer from 'app/views/page/page.reducer' +import tileReducer from 'app/views/tile/tile.reducer' +import siteReducer from './views/site/site.reducer' + +const createRootReducer = history => ( + combineReducers({ + auth: (state = {}) => state, + router: connectRouter(history), + site: siteReducer, + graph: graphReducer, + page: pageReducer, + tile: tileReducer, + upload: uploadReducer, + }) +) + +const configureStore = (initialState = {}, history) => { + const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose + + const store = createStore( + createRootReducer(history), + initialState, + composeEnhancers( + applyMiddleware( + thunk, + routerMiddleware(history) + ), + ), + ) + + return store +} + +const history = createBrowserHistory() +const store = configureStore({}, history) +const { dispatch } = store + +export { store, history, dispatch } diff --git a/frontend/app/types.js b/frontend/app/types.js new file mode 100644 index 0000000..7120a91 --- /dev/null +++ b/frontend/app/types.js @@ -0,0 +1,33 @@ +import { with_type, crud_type } from 'app/api/crud.types' + +export const api = crud_type('api', []) + +export const graph = crud_type('graph', [ + 'show_add_page_form', 'hide_add_page_form', 'toggle_add_page_form', + 'show_edit_page_form', 'hide_edit_page_form', 'toggle_edit_page_form', + 'update_graph_page', +]) + +export const page = crud_type('page', [ + 'show_add_tile_form', 'hide_add_tile_form', 'toggle_add_tile_form', + 'show_edit_tile_form', 'hide_edit_tile_form', 'toggle_edit_tile_form', + 'update_page_tile', + 'set_tile_sort_order', 'update_tile_sort_order', + 'show_tile_list', 'hide_tile_list', 'toggle_tile_list', +]) + +export const tile = crud_type('tile', [ + 'update_temporary_tile', 'clear_temporary_tile', +]) + +export const upload = crud_type('upload', []) + +export const site = with_type('site', [ + 'set_site_title', +]) + +export const system = with_type('system', [ + 'load_site', +]) + +export const init = '@@INIT' diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js new file mode 100644 index 0000000..bb5e01d --- /dev/null +++ b/frontend/app/utils/index.js @@ -0,0 +1,331 @@ +import { api as api_type } from 'app/types' + +// import { format, formatDistance } from 'date-fns' +import format from 'date-fns/format' +import formatDistance from 'date-fns/formatDistance' + +export const formatDateTime = dateStr => format(new Date(dateStr), 'd MMM yyyy H:mm') +export const formatDate = dateStr => format(new Date(dateStr), 'd MMM yyyy') +export const formatTime = dateStr => format(new Date(dateStr), 'H:mm') +export const formatAge = dateStr => formatDistance(new Date(), new Date(dateStr)) + ' ago.' + +/* Mobile check */ + +export const isiPhone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) +export const isiPad = !!(navigator.userAgent.match(/iPad/i)) +export const isAndroid = !!(navigator.userAgent.match(/Android/i)) +export const isMobile = isiPhone || isiPad || isAndroid +export const isDesktop = !isMobile + +const htmlClassList = document.body.parentNode.classList +htmlClassList.add(isDesktop ? 'desktop' : 'mobile') + +/* Default image dimensions */ + +export const widths = { + th: 160, + sm: 320, + md: 640, + lg: 1280, +} + +/* Formatting functions */ + +const acronyms = 'id url cc sa fp md5 sha256'.split(' ').map(s => '_' + s) +const acronymsUpperCase = acronyms.map(s => s.toUpperCase()) + +export const formatName = s => { + acronyms.forEach((acronym, i) => s = s.replace(acronym, acronymsUpperCase[i])) + return s.replace(/_/g, ' ') +} + +// Use to pad frame numbers with zeroes +export const pad = (n, m) => { + let s = String(n || 0) + while (s.length < m) { + s = '0' + s + } + return s +} + +export const courtesyS = (n, s) => n + ' ' + (n === 1 ? s : s + 's') + +export const padSeconds = n => n < 10 ? '0' + n : n + +export const timestamp = (n = 0, fps = 25) => { + n /= fps + let s = padSeconds(Math.round(n) % 60) + n = Math.floor(n / 60) + if (n > 60) { + return Math.floor(n / 60) + ':' + padSeconds(n % 60) + ':' + s + } + return (n % 60) + ':' + s +} + +export const percent = n => (n * 100).toFixed(1) + '%' + +export const px = (n, w) => Math.round(n * w) + 'px' + +export const clamp = (n, a=0, b=1) => n < a ? a : n < b ? n : b +export const dist = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) +export const mod = (n, m) => n - (m * Math.floor(n / m)) +export const angle = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1) + +/* URLs */ + +export const sha256_tree = (sha256, branch_size=2, tree_depth=2) => { + const tree_size = tree_depth * branch_size + let tree = "" + for (var i = 0; i < tree_size; i += branch_size) { + tree += '/' + sha256.substr(i, branch_size) + } + return tree +} + +export const imageUrl = (sha256, frame, size = 'th') => [ + 'https://' + process.env.S3_HOST + '/v1/media/keyframes', + sha256_tree(sha256), + pad(frame, 6), + size, + 'index.jpg' +].filter(s => !!s).join('/') + +export const uploadUri = ({ sha256, ext }) => '/static/data/uploads' + sha256_tree(sha256) + '/' + sha256 + ext +export const metadataUri = (sha256, tag) => '/metadata/' + sha256 + '/' + tag + '/' +export const keyframeUri = (sha256, frame) => '/metadata/' + sha256 + '/keyframe/' + pad(frame, 6) + '/' + +export const preloadImage = url => ( + new Promise((resolve, reject) => { + const image = new Image() + let loaded = false + image.onload = () => { + if (loaded) return + loaded = true + image.onload = null + image.onerror = null + resolve(image) + } + image.onerror = () => { + if (loaded) return + image.onload = null + image.onerror = null + resolve(image) + } + // console.log(img.src) + // image.crossOrigin = 'anonymous' + image.src = url + if (image.complete) { + image.onload() + } + }) +) + +export const cropImage = (url, crop) => { + return new Promise((resolve, reject) => { + let { x, y, w, h } = crop + const image = new Image() + let loaded = false + x = parseFloat(x) + y = parseFloat(y) + w = parseFloat(w) + h = parseFloat(h) + image.onload = () => { + if (loaded) return + loaded = true + image.onload = null + const canvas = document.createElement('canvas') + const ctx = canvas.getContext('2d') + const width = image.naturalWidth + const height = image.naturalHeight + canvas.width = w * width + canvas.height = h * height + ctx.drawImage( + image, + Math.round(x * width), + Math.round(y * height), + Math.round(w * width), + Math.round(h * height), + 0, 0, canvas.width, canvas.height + ) + resolve(canvas) + } + image.onerror = () => { + console.log('image error') + reject() + } + // console.log(img.src) + image.crossOrigin = 'anonymous' + image.src = url + if (image.complete) { + image.onload() + } + }) +} +export const urlSearchParamsToDict = search => { + const params = new URLSearchParams(search) + const dict = {} + params.forEach((value, key) => { // ??? + dict[key] = value + }) + return dict +} + +/* AJAX */ + +let cachedAuth = null +let token = '' +let username = '' + +export const post = (dispatch, type=api_type, tag, url, data) => { + let headers + if (data instanceof FormData) { + headers = { + Accept: 'application/json', + } + } else if (data) { + headers = { + Accept: 'application/json', + 'Content-Type': 'application/json; charset=utf-8', + } + data = JSON.stringify(data) + } + + dispatch({ + type: type.loading, + tag, + }) + return fetch(url, { + method: 'POST', + body: data, + headers, + }) + .then(res => res.json()) + .then(res => dispatch({ + type: type.loaded, + tag, + data: res, + })) + .catch(err => dispatch({ + type: type.error, + tag, + err, + })) +} + +export const api = (dispatch, type=api_type, tag, url, data) => { + dispatch({ + type: type.loading, + tag, + }) + if (url.indexOf('http') !== 0) { + url = window.location.origin + url + } + url = new URL(url) + if (data) { + url.search = new URLSearchParams(data).toString() + } + return fetch(url, { + method: 'GET', + // mode: 'cors', + }) + .then(res => res.json()) + .then(res => dispatch({ + type: type.loaded, + tag, + data: res, + })) + .catch(err => dispatch({ + type: type.error, + tag, + err, + })) +} + +/* sorting */ + +export const numericSort = { + asc: (a,b) => a[0] - b[0], + desc: (a,b) => b[0] - a[0], +} +export const stringSort = { + asc: (a,b) => a[0].localeCompare(b[0]), + desc: (a,b) => b[0].localeCompare(a[0]), +} +export const orderByFn = (s='name asc') => { + const [field='name', direction='asc'] = s.split(' ') + let mapFn, sortFn + switch (field) { + case 'id': + mapFn = a => [parseInt(a.id) || 0, a] + sortFn = numericSort[direction] + break + case 'epoch': + mapFn = a => [parseInt(a.epoch || a.epochs) || 0, a] + sortFn = numericSort[direction] + break + case 'size': + mapFn = a => [parseInt(a.size) || 0, a] + sortFn = numericSort[direction] + break + case 'date': + mapFn = a => [+new Date(a.date || a.created_at), a] + sortFn = numericSort[direction] + break + case 'updated_at': + mapFn = a => [+new Date(a.updated_at), a] + sortFn = numericSort[direction] + break + case 'priority': + mapFn = a => [parseInt(a.priority) || parseInt(a.id) || 1000, a] + sortFn = numericSort[direction] + case 'name': + default: + mapFn = a => [a.name || "", a] + sortFn = stringSort[direction] + break + } + return { mapFn, sortFn } +} +export const getOrderedIds = (objects, sort, prepend=[]) => { + const { mapFn, sortFn } = orderByFn(sort) + return prepend.concat(objects.map(mapFn).sort(sortFn).map(a => a[1].id)) +} +export const getOrderedIdsFromLookup = (lookup, sort) => { + return getOrderedIds(Object.keys(lookup).map(key => lookup[key]), sort) +} + +/* parallel promises */ + +export const allProgress = (promises, progress_cb) => { + let d = 0 + progress_cb(0, 0, promises.length) + promises.forEach((p) => { + p.then((s) => { + d += 1 + progress_cb(Math.floor((d * 100) / promises.length), d, promises.length) + return s + }) + }) + return Promise.all(promises) +} + +/* Clipboard */ + +export function writeToClipboard(str) { + return new Promise((resolve, reject) => { + let success = false + function listener(e) { + e.clipboardData.setData("text/plain", str) + e.preventDefault() + success = true + } + document.addEventListener("copy", listener) + document.execCommand("copy") + document.removeEventListener("copy", listener) + if (success) { + resolve() + } else { + reject() + } + }) +}
\ No newline at end of file diff --git a/frontend/app/views/graph/components/graph.canvas.js b/frontend/app/views/graph/components/graph.canvas.js new file mode 100644 index 0000000..2896c6b --- /dev/null +++ b/frontend/app/views/graph/components/graph.canvas.js @@ -0,0 +1,138 @@ +import React, { Component } from 'react' + +import { mod, angle } from 'app/utils' + +const DEFAULT_MEASUREMENT = { width: 16, height: 16 } +const BACKLINK_SPACING = 10 +const ARROWHEAD_LENGTH = 10 +const GRAPH_LINK_COLOR = "#ff88ff" +const GRAPH_BACKLINK_COLOR = "#88ffff" +const GRAPH_UNHOVER_LINK_COLOR = "#884488" +const GRAPH_UNHOVER_BACKLINK_COLOR = "#448888" + +export default class GraphCanvas extends Component { + constructor(props) { + super(props) + this.canvasRef = React.createRef() + } + + componentDidMount() { + if (this.props.bounds) { + this.draw({}) + } + } + + componentDidUpdate(prevProps) { + this.draw(prevProps) + } + + draw(prevProps) { + const { current: canvas } = this.canvasRef + const { bounds, pages, currentPage, box, measurements, highlightedPageId } = this.props + const { width, height } = bounds + if (prevProps.bounds !== bounds) { + canvas.width = width + canvas.height = height + } + const ctx = canvas.getContext('2d') + ctx.clearRect(0, 0, width, height) + ctx.lineWidth = 2 + const coordsLookup = pages.reduce((a,b) => { + if (currentPage && box && b.id === currentPage.id) { + a[b.id] = { + x: box.x, + y: box.y, + backlinks: new Set([]), + } + } else { + a[b.id] = { + x: b.settings.x, + y: b.settings.y, + backlinks: new Set([]), + } + } + return a + }, {}) + pages.map(page => { + const sourceCoord = coordsLookup[page.id] + page.backlinks.map(tile => { + if (tile.target_page_id <= 0) return + const targetCoord = coordsLookup[tile.page_id] + const isHighlightedPage = !highlightedPageId || highlightedPageId === page.id || highlightedPageId === tile.page_id + let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT + let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT + let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y) + let x1_offset = tile_measurement.width / 2 // * (0.5 - Math.cos(theta)) + let y1_offset = tile_measurement.height / 2 + let x2_offset = target_measurement.width / 2 // (0.5 - Math.cos(theta)) + let y2_offset = target_measurement.height / 2 + // skip duplicate links + if (sourceCoord.backlinks.has(tile.page_id)) { + return + } + /* + if it's pointing right, cos(t) is 1 + if it's pointing left, cos(t) is -1 + */ + // if (Math.abs(Math.cos(theta)) > 0.5) { + // x1_offset += target_measurement.width / 3 * (- Math.cos(theta)) + // x1_offset += target_measurement.height / 4 * (- Math.sin(theta)) + x2_offset += target_measurement.width / 3 * (- Math.cos(theta)) + y2_offset += target_measurement.height / 6 * (- Math.sin(theta)) + // } + // if this is the first time encountering this link... + if (!targetCoord.backlinks.has(tile.target_page_id)) { + sourceCoord.backlinks.add(tile.page_id) + ctx.strokeStyle = isHighlightedPage + ? GRAPH_LINK_COLOR + : GRAPH_UNHOVER_LINK_COLOR + } else { // otherwise this is a two-way link + x1_offset += BACKLINK_SPACING * Math.sin(theta) + y1_offset += BACKLINK_SPACING * Math.cos(theta) + x2_offset += BACKLINK_SPACING * Math.sin(theta) + y2_offset += BACKLINK_SPACING * Math.cos(theta) + // x1_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2) + // y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2) + // x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2) + // y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2) + ctx.strokeStyle = isHighlightedPage + ? GRAPH_BACKLINK_COLOR + : GRAPH_UNHOVER_BACKLINK_COLOR + } + ctx.beginPath() + const x1 = targetCoord.x * width + x1_offset + const y1 = targetCoord.y * height + y1_offset + const x2 = sourceCoord.x * width + x2_offset + const y2 = sourceCoord.y * height + y2_offset + this.arrow(ctx, x1, y1, x2, y2) + ctx.stroke() + }) + }) + } + + arrow(ctx, x1, y1, x2, y2) { + const farOffset = 20 + const endOffset = 1 + const theta = angle(x1, y1, x2, y2) + x1 += Math.cos(theta) * 0 + x2 -= Math.cos(theta) * farOffset + y1 += Math.sin(theta) * 0 + y2 -= Math.sin(theta) * farOffset + const xEnd = x2 - Math.cos(theta) * endOffset + const yEnd = y2 - Math.sin(theta) * endOffset + const leftAngle = mod(theta - Math.PI / 6, Math.PI * 2) + const rightAngle = mod(theta + Math.PI / 6, Math.PI * 2) + ctx.moveTo(x1, y1) + ctx.lineTo(xEnd, yEnd) + ctx.moveTo(x2, y2) + ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(leftAngle), y2 - ARROWHEAD_LENGTH * Math.sin(leftAngle)) + ctx.moveTo(x2, y2) + ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(rightAngle), y2 - ARROWHEAD_LENGTH * Math.sin(rightAngle)) + } + + render() { + return ( + <canvas ref={this.canvasRef} /> + ) + } +} diff --git a/frontend/app/views/graph/components/graph.editor.js b/frontend/app/views/graph/components/graph.editor.js new file mode 100644 index 0000000..61f26b7 --- /dev/null +++ b/frontend/app/views/graph/components/graph.editor.js @@ -0,0 +1,212 @@ +import React, { Component } from 'react' +import { Route, Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { session } from 'app/session' +import actions from 'app/actions' +import * as graphActions from '../graph.actions' + +import { Loader } from 'app/common' +import { clamp, dist, mod, angle } from 'app/utils' + +import GraphCanvas from './graph.canvas' +import PageHandle from './page.handle' + +const defaultState = { + dragging: false, + bounds: null, + mouseX: 0, + mouseY: 0, + box: { + x: 0, y: 0, + w: 0, h: 0, + }, + page: null, + highlightedPageId: null, + measurements: {}, +} + +class GraphEditor extends Component { + state = { + ...defaultState, + } + + constructor() { + super() + // bind these events in the constructor, so we can remove event listeners later + this.handleMouseDown = this.handleMouseDown.bind(this) + this.handleMouseMove = this.handleMouseMove.bind(this) + this.handleMouseUp = this.handleMouseUp.bind(this) + this.handleWindowResize = this.handleWindowResize.bind(this) + this.handleMouseEnter = this.handleMouseEnter.bind(this) + this.handleMouseLeave = this.handleMouseLeave.bind(this) + this.graphRef = React.createRef() + this.measurements = {} + } + + getBoundingClientRect() { + if (!this.graphRef.current) return null + const rect = this.graphRef.current.getBoundingClientRect() + const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop + const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft + const bounds = { + top: rect.top + scrollTop, + left: rect.left + scrollLeft, + width: rect.width, + height: rect.height, + } + // console.log(bounds) + return bounds + } + + componentDidMount() { + document.body.addEventListener('mousemove', this.handleMouseMove) + document.body.addEventListener('mouseup', this.handleMouseUp) + window.addEventListener('resize', this.handleWindowResize) + this.setState({ bounds: this.getBoundingClientRect() }) + } + + componentDidUpdate(prevProps) { + if (!this.state.bounds) { + this.setState({ bounds: this.getBoundingClientRect() }) + } + } + + addMeasurement({ id, width, height }) { + this.measurements[id] = { width, height } + this.setState({ + measurements: { ...this.measurements }, + }) + } + + handleWindowResize() { + this.setState({ bounds: this.getBoundingClientRect() }) + } + + handleMouseDown(e, page) { + if (e.shiftKey) { + e.preventDefault() + this.props.graphActions.setHomePageId(this.props.graph.show.res, page) + return + } + const bounds = this.getBoundingClientRect() + const mouseX = e.pageX + const mouseY = e.pageY + let w = 128 / bounds.width + let h = 16 / bounds.height + let { x, y } = page.settings + x = clamp(x, 0, 1) + y = clamp(y, 0, 1) + this.setState({ + page, + dragging: true, + bounds, + mouseX, + mouseY, + box: { + x, y, + w, h, + }, + initialBox: { + x, y, + w, h, + } + }) + } + + handleMouseMove(e) { + const { + dragging, + bounds, mouseX, mouseY, initialBox, box + } = this.state + if (dragging) { + e.preventDefault() + let { x, y, w, h } = initialBox + let dx = (e.pageX - mouseX) / bounds.width + let dy = (e.pageY - mouseY) / bounds.height + this.setState({ + box: { + x: clamp(x + dx, 0, 1.0 - w), + y: clamp(y + dy, 0, 1.0 - h), + w, h, + } + }) + } + } + + handleMouseUp(e) { + // const { actions } = this.props + const { dragging, bounds, initialBox, box, page } = this.state + if (!dragging) return + e.preventDefault() + const { width, height } = bounds + const { x, y, w, h } = box + let url = window.location.pathname + this.setState({ + page: null, + box: null, + initialBox: null, + dragging: false, + }) + if (dist(width * x, height * y, width * initialBox.x, height * initialBox.y) < 3) return + const updatedPage = { + ...page, + settings: { + ...page.settings, + x, y, + } + } + this.props.graphActions.updateGraphPage(updatedPage) + actions.page.update(updatedPage) + } + + handleMouseEnter(e, page) { + this.setState({ highlightedPageId: page.id }) + } + handleMouseLeave(e, page) { + this.setState({ highlightedPageId: null }) + } + + render(){ + // console.log(this.props.graph.show.res) + const { page: currentPage, box, measurements, highlightedPageId } = this.state + const { res: graph } = this.props.graph.show + // console.log(res.pages) + return ( + <div className='graph' ref={this.graphRef}> + <GraphCanvas + bounds={this.state.bounds} + pages={graph.pages} + currentPage={currentPage} + highlightedPageId={highlightedPageId} + measurements={measurements} + box={box} + /> + {this.state.bounds && graph.pages.map(page => ( + <PageHandle + key={page.id} + graph={graph} + page={page} + bounds={this.state.bounds} + box={currentPage && page.id === currentPage.id && box} + onMouseDown={e => this.handleMouseDown(e, page)} + onMouseEnter={e => this.handleMouseEnter(e, page)} + onMouseLeave={e => this.handleMouseLeave(e, page)} + onMeasure={measurement => this.addMeasurement(measurement)} + /> + ))} + </div> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, +}) + +const mapDispatchToProps = dispatch => ({ + graphActions: bindActionCreators({ ...graphActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphEditor) diff --git a/frontend/app/views/graph/components/graph.header.js b/frontend/app/views/graph/components/graph.header.js new file mode 100644 index 0000000..46ad962 --- /dev/null +++ b/frontend/app/views/graph/components/graph.header.js @@ -0,0 +1,31 @@ +import React from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' + +import * as graphActions from '../graph.actions' + +function GraphHeader(props) { + return ( + <header> + <div> + <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link> + </div> + <div> + <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button> + </div> + </header> + ) +} + +const mapStateToProps = (state) => ({ + // auth: state.auth, + site: state.site, + // isAuthenticated: state.auth.isAuthenticated, +}) + +const mapDispatchToProps = (dispatch) => ({ + graphActions: bindActionCreators({ ...graphActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphHeader) diff --git a/frontend/app/views/graph/components/page.edit.js b/frontend/app/views/graph/components/page.edit.js new file mode 100644 index 0000000..4025726 --- /dev/null +++ b/frontend/app/views/graph/components/page.edit.js @@ -0,0 +1,65 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' + +import { history } from 'app/store' +import actions from 'app/actions' +import * as siteActions from 'app/views/site/site.actions' +import * as graphActions from 'app/views/graph/graph.actions' + +import { Loader } from 'app/common' + +import PageForm from '../components/page.form' + +class PageEdit extends Component { + componentDidMount() { + // actions.page.show(this.props.match.params.id) + } + + handleSubmit(data) { + const { path: graphPath } = this.props.graph.show.res + const { path: oldPagePath } = this.props.page.show.res + const { path: newPagePath } = data + actions.page.update(data) + .then(response => { + // console.log(response) + actions.site.setSiteTitle(response.res.title) + this.props.graphActions.hideEditPageForm() + if (oldPagePath !== newPagePath) { + const newPath = '/' + graphPath + '/' + newPagePath + history.push(newPath) + } + }) + } + + render() { + const { show } = this.props.page + if (show.loading || !show.res) { + return ( + <div className='form'> + <Loader /> + </div> + ) + } + return ( + <PageForm + data={show.res} + graph={this.props.graph.show.res} + onSubmit={this.handleSubmit.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, +}) + +const mapDispatchToProps = dispatch => ({ + siteActions: bindActionCreators({ ...siteActions }, dispatch), + graphActions: bindActionCreators({ ...graphActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageEdit) diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js new file mode 100644 index 0000000..8fc00b0 --- /dev/null +++ b/frontend/app/views/graph/components/page.form.js @@ -0,0 +1,185 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { session } from 'app/session' + +import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' + +const newPage = (data) => ({ + path: '', + title: '', + username: session('username'), + description: '', + settings: { + x: 0.05, + y: 0.05, + background_color: '#000000', + }, + ...data, +}) + +export default class PageForm extends Component { + state = { + title: "", + submitTitle: "", + data: { ...newPage() }, + errorFields: new Set([]), + } + + componentDidMount() { + const { graph, data, isNew } = this.props + const title = isNew ? 'new page' : 'editing ' + data.title + const submitTitle = isNew ? "Create Page" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + data: { + ...newPage({ graph_id: graph.id }), + ...data, + }, + }) + } + + handleChange(e) { + const { errorFields } = this.state + const { name, value } = e.target + if (errorFields.has(name)) { + errorFields.delete(name) + } + let sanitizedValue = value + if (name === 'path') { + sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-') + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: sanitizedValue, + } + }) + } + + handleSelect(name, value) { + const { errorFields } = this.state + if (errorFields.has(name)) { + errorFields.delete(name) + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: value, + } + }) + } + + handleSettingsChange(e) { + const { name, value } = e.target + this.setState({ + data: { + ...this.state.data, + settings: { + ...this.state.data.settings, + [name]: value, + } + } + }) + } + + handleSubmit(e) { + e.preventDefault() + const { isNew, onSubmit } = this.props + const { data } = this.state + const requiredKeys = "path title".split(" ") + const validKeys = "graph_id path title username description settings".split(" ") + const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) + const errorFields = requiredKeys.filter(key => !validData[key]) + if (errorFields.length) { + console.log('error', errorFields, validData) + this.setState({ errorFields: new Set(errorFields) }) + } else { + if (isNew) { + // side effect: set username if we're creating a new page + // session.set('username', data.username) + } else { + validData.id = data.id + } + console.log('submit', validData) + onSubmit(validData) + } + } + + handleDelete() { + const { data } = this.state + console.log(data) + if (confirm('Really delete this page?')) { + actions.page.delete(page_id) + } + } + + render() { + const { graph, isNew } = this.props + const { title, submitTitle, errorFields, data } = this.state + return ( + <div className='box'> + <h1>{title}</h1> + <form onSubmit={this.handleSubmit.bind(this)}> + <TextInput + title="Path" + name="path" + required + data={data} + error={errorFields.has('path')} + onChange={this.handleChange.bind(this)} + autoComplete="off" + /> + <LabelDescription> + {'Page URL: /' + graph.path + '/'}<b>{data.path}</b> + </LabelDescription> + <TextInput + title="Title" + name="title" + required + data={data} + error={errorFields.has('title')} + onChange={this.handleChange.bind(this)} + autoComplete="off" + /> + <ColorInput + title='BG' + name='background_color' + data={data.settings} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + <TextArea + title="Description" + name="description" + data={data} + onChange={this.handleChange.bind(this)} + /> + <div className='row buttons'> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit.bind(this)} + /> + {!isNew && + <SubmitButton + title={'Delete'} + className='destroy' + onClick={this.handleDelete.bind(this)} + /> + } + </div> + {!!errorFields.size && + <label> + <span></span> + <span>Please complete the required fields =)</span> + </label> + } + </form> + </div> + ) + } +} diff --git a/frontend/app/views/graph/components/page.handle.js b/frontend/app/views/graph/components/page.handle.js new file mode 100644 index 0000000..c024f1e --- /dev/null +++ b/frontend/app/views/graph/components/page.handle.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { history } from 'app/store' + +export default class PageHandle extends Component { + constructor(props){ + super(props) + this.ref = React.createRef() + } + componentDidMount(){ + this.measure() + } + componentDidUpdate(prevProps){ + if (this.props.page.title !== prevProps.page.title) { + this.measure() + } + } + measure() { + const { offsetWidth: width, offsetHeight: height } = this.ref.current + const { id } = this.props.page + // console.log(id, width, height) + this.props.onMeasure({ id, width, height }) + } + render() { + const { graph, page, bounds, box, onMouseDown, onMouseEnter, onMouseLeave } = this.props + let style; + if (box) { + style = { + top: (bounds.height) * box.y, + left: (bounds.width) * box.x, + } + } else { + style = { + top: (bounds.height) * Math.min(page.settings.y, 0.95), + left: (bounds.width) * Math.min(page.settings.x, 0.95), + } + } + const className = (graph.home_page_id === page.id) + ? 'handle homepage' + : 'handle' + const url = '/' + graph.path + '/' + page.path + // console.log(style) + return ( + <div + className={className} + ref={this.ref} + onMouseDown={onMouseDown} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} + onDoubleClick={() => history.push(url)} + style={style} + > + {page.path} + <Link to={url}>{'>'}</Link> + </div> + ) + } +} diff --git a/frontend/app/views/graph/components/page.new.js b/frontend/app/views/graph/components/page.new.js new file mode 100644 index 0000000..e7c3609 --- /dev/null +++ b/frontend/app/views/graph/components/page.new.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +import PageForm from '../components/page.form' + +class PageNew extends Component { + handleSubmit(data) { + console.log(data) + actions.page.create(data) + .then(res => { + console.log(res) + const graph = this.props.graph.show.res + if (res.res && res.res.id) { + history.push('/' + graph.path + '/' + res.res.path) + } + }) + .catch(err => { + console.error('error', err) + }) + } + + render() { + return ( + <PageForm + isNew + graph={this.props.graph.show.res} + data={{}} + onSubmit={this.handleSubmit.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageNew) diff --git a/frontend/app/views/graph/graph.actions.js b/frontend/app/views/graph/graph.actions.js new file mode 100644 index 0000000..a24ccc2 --- /dev/null +++ b/frontend/app/views/graph/graph.actions.js @@ -0,0 +1,37 @@ +import * as types from 'app/types' +import actions from 'app/actions' + +export const showAddPageForm = () => dispatch => { + dispatch({ type: types.graph.show_add_page_form }) +} + +export const hideAddPageForm = () => dispatch => { + dispatch({ type: types.graph.hide_add_page_form }) +} + +export const toggleAddPageForm = () => dispatch => { + dispatch({ type: types.graph.toggle_add_page_form }) +} + +export const showEditPageForm = () => dispatch => { + dispatch({ type: types.graph.show_edit_page_form }) +} + +export const hideEditPageForm = () => dispatch => { + dispatch({ type: types.graph.hide_edit_page_form }) +} + +export const toggleEditPageForm = () => dispatch => { + dispatch({ type: types.graph.toggle_edit_page_form }) +} + +export const updateGraphPage = page => dispatch => { + dispatch({ type: types.graph.update_graph_page, page }) +} + +export const setHomePageId = (graph, page) => dispatch => { + let updated_graph = { ...graph } + delete updated_graph.pages + updated_graph.home_page_id = page.id + actions.graph.update(updated_graph) +}
\ No newline at end of file diff --git a/frontend/app/views/graph/graph.container.js b/frontend/app/views/graph/graph.container.js new file mode 100644 index 0000000..9e354fc --- /dev/null +++ b/frontend/app/views/graph/graph.container.js @@ -0,0 +1,82 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import './graph.css' + +import actions from 'app/actions' +import { Loader } from 'app/common' + +// import * as uploadActions from './upload.actions' + +import PageNew from './components/page.new' +import PageEdit from './components/page.edit' + +import GraphHeader from './components/graph.header' +import GraphEditor from './components/graph.editor' + +class GraphContainer extends Component { + componentDidMount() { + if (this.shouldShowGraph()) this.load() + } + componentDidUpdate(prevProps) { + if (this.shouldLoadGraph(prevProps)) this.load() + } + shouldShowGraph() { + const { graph_name, page_name } = this.props.match.params + return (graph_name && !page_name && graph_name !== 'index') + } + shouldLoadGraph(prevProps) { + const { graph, location } = this.props + const { key } = location + if (key === prevProps.location.key) return false + if (!this.shouldShowGraph()) return false + return (graph.show.name === prevProps.graph.show.name) + } + load() { + actions.site.setSiteTitle("loading " + this.props.match.params.graph_name + "...") + actions.graph.show('name/' + this.props.match.params.graph_name) + .then(data => { + actions.site.setSiteTitle(data.res.title) + }) + } + render() { + if (!this.shouldShowGraph()) return <div /> + if (!this.props.graph.show.res || this.props.graph.show.loading) { + return ( + <div> + <GraphHeader /> + <div className='body'> + <div className='graph loading'> + <Loader /> + </div> + </div> + </div> + ) + } + return ( + <div> + <GraphHeader /> + <div className='body'> + <GraphEditor /> + <div className='sidebar'> + {this.props.graph.editor.addingPage && <PageNew />} + {this.props.graph.editor.editingPage && <PageEdit />} + </div> + </div> + </div> + ) + } +} + +// <Route exact path='/:graph_name' component={GraphView} /> +const mapStateToProps = state => ({ + graph: state.graph, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphContainer) diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css new file mode 100644 index 0000000..389a55d --- /dev/null +++ b/frontend/app/views/graph/graph.css @@ -0,0 +1,172 @@ +.graph.loading { + padding: 1rem; +} +.graph { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + background: linear-gradient( + 0deg, + rgba(128, 0, 64, 0.5), + rgba(0, 0, 64, 0.5) + ); +} +.graph canvas { + position: absolute; + top: 0; + left: 0; +} + +/* Sidebar boxes */ + +.sidebar { + position: absolute; + top: 0; + right: 0; + padding: 1rem; + overflow: auto; + max-height: 100%; + z-index: 20; +} +.box { + width: 15rem; + padding: 0.5rem; + background: rgba(64,12,64,0.9); + border: 2px solid #000; + box-shadow: 2px 2px 4px rgba(0,0,0,0.5); +} +.box h1, +.box h2 { + font-size: 1rem; + margin: 0 0 0.5rem 0; +} +.box form label { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 0.25rem; +} +.box form .buttons { + justify-content: space-between; +} +.box form .buttons label { + width: auto; + min-width: auto; +} +.box form .buttons label span { + display: none; +} +.box form .buttons button:last-child { + margin-right: 0; +} +.box form label.checkbox { + flex-direction: row; + justify-content: flex-start; + align-items: center; +} +.box form input[type="checkbox"] { + margin-left: 0rem; +} +.box form input[type=checkbox] + span { + color: #ddd; +} +.box form input[type=checkbox]:hover + span { + color: #fff; +} +.box form input[type="checkbox"]:after { + border-color: #84f; +} +.box form input[type="checkbox"]:checked:after { + border-color: #84f; + background-color: #84f; +} +.box form input[type=checkbox]:hover + span { + color: #84f; +} +.box input[type=text], +.box input[type=number], +.box input[type=password] { + padding: 0.25rem; + max-width: 100%; + border-color: #888; +} +.box textarea { + max-width: 100%; + height: 5rem; + border-color: #888; +} +.box .select { + padding: 0.25rem; + margin-right: 0; +} +.box .selects label { + flex-direction: row; + width: 6.5rem; + margin-right: 0.5rem; + min-width: auto; +} +.box form textarea { + padding: 0.25rem; +} + +.box form .pair label span { + min-width: 3rem; + padding: 0.25rem 0; +} +.box .pair label { + flex-direction: row; + width: 6.5rem; + margin-right: 0.5px; + min-width: auto; +} +.box .pair input[type=text] { + width: 3rem; +} +.box .position { + font-size: smaller; + margin-bottom: 0.25rem; +} + +.box .slider { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.box .slider span { + min-width: 4rem; + width: 4rem; + padding: 0.125rem 0; +} +.box .slider input[type='number'] { + width: 3.5rem; +} +.box .slider input[type='range'] { + width: 5.5rem; +} + +/* Graph handles */ + +.handle { + position: absolute; + border: 2px solid #888; + background: #8833dd; + padding: 0.25rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 8rem; + user-select: none; + cursor: arrow; +} +.handle.homepage { + background: #533854; + border-color: #edc40e; +} +.handle a { + margin-left: 0.25rem; + color: #fff; + font-weight: bold; + text-decoration: none; +} diff --git a/frontend/app/views/graph/graph.reducer.js b/frontend/app/views/graph/graph.reducer.js new file mode 100644 index 0000000..6be5089 --- /dev/null +++ b/frontend/app/views/graph/graph.reducer.js @@ -0,0 +1,100 @@ +import * as types from 'app/types' +// import { session, getDefault, getDefaultInt } from 'app/session' + +import { crudState, crudReducer } from 'app/api/crud.reducer' + +const initialState = crudState('graph', { + editor: { + addingPage: false, + editingPage: false, + }, + options: { + } +}) + +const reducer = crudReducer('graph') + +export default function graphReducer(state = initialState, action) { + // console.log(action.type, action) + state = reducer(state, action) + switch (action.type) { + case types.graph.update_graph_page: + return { + ...state, + show: { + ...state.show, + res: { + ...state.show.res, + pages: state.show.res.pages.map(page => { + if (page.id === action.page.id) { + return { ...action.page } + } else { + return page + } + }), + } + } + } + + case types.graph.show_add_page_form: + return { + ...state, + editor: { + ...state.editor, + addingPage: true, + editingPage: false, + } + } + + case types.graph.hide_add_page_form: + return { + ...state, + editor: { + ...state.editor, + addingPage: false, + } + } + + case types.graph.toggle_add_page_form: + return { + ...state, + editor: { + ...state.editor, + addingPage: !state.editor.addingPage, + editingPage: false, + } + } + + case types.graph.show_edit_page_form: + return { + ...state, + editor: { + ...state.editor, + addingPage: false, + editingPage: true, + } + } + + case types.graph.hide_edit_page_form: + return { + ...state, + editor: { + ...state.editor, + editingPage: false, + } + } + + case types.graph.toggle_edit_page_form: + return { + ...state, + editor: { + ...state.editor, + addingPage: false, + editingPage: !state.editor.editingPage, + } + } + + default: + return state + } +} diff --git a/frontend/app/views/index.js b/frontend/app/views/index.js new file mode 100644 index 0000000..c50ab80 --- /dev/null +++ b/frontend/app/views/index.js @@ -0,0 +1,4 @@ +export { default as index } from './index/index.container' +export { default as graph } from './graph/graph.container' +export { default as page } from './page/page.container' +export { default as upload } from './upload/upload.container' diff --git a/frontend/app/views/index/components/graph.form.js b/frontend/app/views/index/components/graph.form.js new file mode 100644 index 0000000..4b3a7af --- /dev/null +++ b/frontend/app/views/index/components/graph.form.js @@ -0,0 +1,153 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { session } from 'app/session' + +import { TextInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common' + +const newGraph = () => ({ + path: '', + title: '', + username: session('username'), + description: '', +}) + +export default class GraphForm extends Component { + state = { + title: "", + submitTitle: "", + data: { ...newGraph() }, + errorFields: new Set([]), + } + + componentDidMount() { + const { data, isNew } = this.props + const title = isNew ? 'new project' : 'editing ' + data.title + const submitTitle = isNew ? "Create Graph" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + data: { + ...newGraph(), + ...data + }, + }) + } + + handleChange(e) { + const { errorFields } = this.state + const { name, value } = e.target + if (errorFields.has(name)) { + errorFields.delete(name) + } + let sanitizedValue = value + if (name === 'path') { + sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-') + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: sanitizedValue, + } + }) + } + + handleSelect(name, value) { + const { errorFields } = this.state + if (errorFields.has(name)) { + errorFields.delete(name) + } + this.setState({ + errorFields, + data: { + ...this.state.data, + [name]: value, + } + }) + } + + handleSubmit(e) { + e.preventDefault() + const { isNew, onSubmit } = this.props + const { data } = this.state + const requiredKeys = "title username path description".split(" ") + const validKeys = "title username path description".split(" ") + const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) + const errorFields = requiredKeys.filter(key => !validData[key]) + if (errorFields.length) { + console.log('error', errorFields, validData) + this.setState({ errorFields: new Set(errorFields) }) + } else { + if (isNew) { + // side effect: set username if we're creating a new graph + session.set('username', data.username) + } else { + validData.id = data.id + } + console.log('submit', validData) + onSubmit(validData) + } + } + + render() { + const { isNew } = this.props + const { title, submitTitle, errorFields, data } = this.state + return ( + <div className='form'> + <h1>{title}</h1> + <form onSubmit={this.handleSubmit.bind(this)}> + <TextInput + title="Path" + name="path" + required + data={data} + error={errorFields.has('path')} + onChange={this.handleChange.bind(this)} + autoComplete="off" + /> + <LabelDescription> + {data.path + ? 'Project URLs will be: /' + data.path + '/example' + : 'Enter the base path for this project.'} + </LabelDescription> + <TextInput + title="Title" + name="title" + required + data={data} + error={errorFields.has('title')} + onChange={this.handleChange.bind(this)} + autoComplete="off" + /> + <TextInput + title="Author" + name="username" + required + data={data} + error={errorFields.has('username')} + onChange={this.handleChange.bind(this)} + autoComplete="off" + /> + <TextArea + title="Description" + name="description" + data={data} + onChange={this.handleChange.bind(this)} + /> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit.bind(this)} + /> + {!!errorFields.size && + <label> + <span></span> + <span>Please complete the required fields =)</span> + </label> + } + </form> + </div> + ) + } +} diff --git a/frontend/app/views/index/containers/graph.edit.js b/frontend/app/views/index/containers/graph.edit.js new file mode 100644 index 0000000..b459cd8 --- /dev/null +++ b/frontend/app/views/index/containers/graph.edit.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +import { Loader } from 'app/common' + +import GraphForm from '../components/graph.form' + +class GraphEdit extends Component { + componentDidMount() { + console.log(this.props.match.params.id) + actions.graph.show(this.props.match.params.id) + } + + handleSubmit(data) { + actions.graph.update(data) + .then(response => { + // response + console.log(response) + history.push('/' + data.path) + }) + } + + render() { + const { show } = this.props.graph + if (show.loading || !show.res) { + return ( + <div className='form'> + <Loader /> + </div> + ) + } + return ( + <GraphForm + data={show.res} + onSubmit={this.handleSubmit.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphEdit) diff --git a/frontend/app/views/index/containers/graph.index.js b/frontend/app/views/index/containers/graph.index.js new file mode 100644 index 0000000..91098a7 --- /dev/null +++ b/frontend/app/views/index/containers/graph.index.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { Loader } from 'app/common' +import actions from 'app/actions' +// import * as uploadActions from './upload.actions' + +class GraphIndex extends Component { + componentDidMount() { + actions.graph.index() + } + render() { + const { index } = this.props + // console.log(this.props) + if (!index.order) { + return ( + <div className='graphIndex'> + <Loader /> + </div> + ) + } + // console.log(state) + return ( + <div className='graphIndex'> + <div> + <b>welcome, swimmer</b> + <Link to='/index/new'>+ new project</Link> + </div> + {index.order.map(id => { + const graph = index.lookup[id] + return ( + <div key={id}> + <Link to={'/' + graph.path}>{graph.title}</Link> + <Link to={'/index/' + id + '/edit'}>{'edit project'}</Link> + </div> + ) + })} + </div> + ) + } +} + +const mapStateToProps = state => ({ + index: state.graph.index, +}) + +const mapDispatchToProps = dispatch => ({ + // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphIndex) diff --git a/frontend/app/views/index/containers/graph.new.js b/frontend/app/views/index/containers/graph.new.js new file mode 100644 index 0000000..28d2f73 --- /dev/null +++ b/frontend/app/views/index/containers/graph.new.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +import GraphForm from '../components/graph.form' + +class GraphNew extends Component { + handleSubmit(data) { + console.log(data) + actions.graph.create(data) + .then(res => { + console.log(res) + if (res.res && res.res.id) { + history.push('/' + res.res.path) + } + }) + .catch(err => { + console.error('error') + }) + } + + render() { + return ( + <GraphForm + isNew + data={{}} + onSubmit={this.handleSubmit.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(GraphNew) diff --git a/frontend/app/views/index/index.container.js b/frontend/app/views/index/index.container.js new file mode 100644 index 0000000..b1fa59f --- /dev/null +++ b/frontend/app/views/index/index.container.js @@ -0,0 +1,36 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import './index.css' + +import actions from 'app/actions' +import { Header } from 'app/common' +// import * as uploadActions from './upload.actions' + +import GraphIndex from './containers/graph.index' +import GraphNew from './containers/graph.new' +import GraphEdit from './containers/graph.edit' + +class Container extends Component { + componentDidMount() { + actions.site.setSiteTitle("swimmer") + } + render() { + return ( + <div> + <Header /> + <div className='body'> + <div className='index'> + <Route exact path='/index/new' component={GraphNew} /> + <Route exact path='/index/:id/edit' component={GraphEdit} /> + <Route exact path='/index' component={GraphIndex} /> + </div> + </div> + </div> + ) + } +} + +export default Container diff --git a/frontend/app/views/index/index.css b/frontend/app/views/index/index.css new file mode 100644 index 0000000..028f6c2 --- /dev/null +++ b/frontend/app/views/index/index.css @@ -0,0 +1,38 @@ +* { + +} +.index { + width: 100%; + height: 100%; + background: linear-gradient( + -45deg, + rgba(0, 0, 64, 0.5), + rgba(128, 0, 64, 0.5) + ); + padding: 1rem; +} +.index > div { + display: inline-block; + padding: 1rem; + max-height: calc(100% - 2rem); + overflow: scroll; + background: rgba(64,12,64,0.9); + box-shadow: 3px 3px 6px rgba(0,0,0,0.4), + inset 0 0 60px rgba(128,255,255,0.1); +} +.graphIndex { + min-width: 20rem; + display: flex; + flex-direction: column; +} +.graphIndex > * { + margin-bottom: 0.5rem; +} +.graphIndex > div { + display: flex; + flex-direction: row; + justify-content: space-between +} +.graphIndex > div > a:first-child { + color: #fff; +}
\ No newline at end of file diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js new file mode 100644 index 0000000..d324874 --- /dev/null +++ b/frontend/app/views/page/components/page.editor.js @@ -0,0 +1,215 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { session } from 'app/session' +import actions from 'app/actions' +import * as pageActions from '../page.actions' +import * as tileActions from '../../tile/tile.actions' + +import { Loader } from 'app/common' +import { clamp, dist } from 'app/utils' + +import TileHandle from './tile.handle' + +const defaultState = { + dragging: false, + bounds: null, + mouseX: 0, + mouseY: 0, + box: { + x: 0, y: 0, + w: 0, h: 0, + }, + tile: null, +} + +class PageEditor extends Component { + state = { + ...defaultState, + } + + constructor() { + super() + // bind these events in the constructor, so we can remove event listeners later + this.handleMouseDown = this.handleMouseDown.bind(this) + this.handleMouseMove = this.handleMouseMove.bind(this) + this.handleMouseUp = this.handleMouseUp.bind(this) + this.handleWindowResize = this.handleWindowResize.bind(this) + this.pageRef = React.createRef() + } + + getBoundingClientRect() { + if (!this.pageRef.current) return null + const rect = this.pageRef.current.getBoundingClientRect() + const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop + const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft + const bounds = { + top: rect.top + scrollTop, + left: rect.left + scrollLeft, + width: rect.width, + height: rect.height, + } + // console.log(bounds) + return bounds + } + + componentDidMount() { + document.body.addEventListener('mousemove', this.handleMouseMove) + document.body.addEventListener('mouseup', this.handleMouseUp) + window.addEventListener('resize', this.handleWindowResize) + this.setState({ bounds: this.getBoundingClientRect() }) + } + + componentDidUpdate(prevProps) { + if (!this.state.bounds) { + this.setState({ bounds: this.getBoundingClientRect() }) + } + } + + handleWindowResize() { + this.setState({ bounds: this.getBoundingClientRect() }) + } + + handleMouseDown(e, tile) { + const bounds = this.getBoundingClientRect() + const mouseX = e.pageX + const mouseY = e.pageY + // let w = 128 / bounds.width + // let h = 16 / bounds.height + let { x, y } = tile.settings + // x = clamp(x, 0, 1) + // y = clamp(y, 0, 1) + this.setState({ + tile, + draggingBox: true, + bounds, + mouseX, + mouseY, + box: { + dx: 0, dy: 0, + // x, y, + // w, h, + }, + initialBox: { + // x, y, + // w, h, + } + }) + } + + handleMouseMove(e) { + const { + dragging, draggingBox, + bounds, mouseX, mouseY, initialBox, box + } = this.state + if (draggingBox) { + e.preventDefault() + let { x, y, w, h } = initialBox + let dx = (e.pageX - mouseX) + let dy = (e.pageY - mouseY) + this.setState({ + box: { + dx, dy, + // x: clamp(x + (dx / bounds.width), 0, 1.0 - w), + // y: clamp(y + (dy / bounds.height), 0, 1.0 - h), + // w, h, + } + }) + } + } + + handleMouseUp(e) { + // const { actions } = this.props + const { temporaryTile } = this.props + const { dragging, draggingBox, bounds, box, tile } = this.state + if (!dragging && !draggingBox) return + e.preventDefault() + // const { x, y, w, h } = box + const { dx, dy } = box + let url = window.location.pathname + this.setState({ + page: null, + box: null, + initialBox: null, + dragging: false, + draggingBox: false, + }) + // console.log(page) + if (dist(0, 0, dx, dy) < 2) { + return + } + const updatedTile = { + ...tile, + settings: { + ...tile.settings, + x: tile.settings.x + dx, + y: tile.settings.y + dy, + } + } + if (temporaryTile && tile.id === temporaryTile.id) { + this.props.tileActions.updateTemporaryTile(updatedTile) + } + if (tile.id !== 'new') { + console.log(updatedTile) + this.props.pageActions.updatePageTile(updatedTile) + actions.tile.update(updatedTile) + } + } + + render(){ + if (!this.state.bounds || (!this.props.page.show.res && !this.props.page.show.res.tiles)) { + return ( + <div className='page' ref={this.pageRef} /> + ) + } + const { temporaryTile } = this.props + const currentTile = this.state.tile + const currentBox = this.state.box + const { res } = this.props.page.show + const { settings } = res + const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' } + return ( + <div className='page' ref={this.pageRef} style={pageStyle}> + {res.tiles.map(tile => { + if (temporaryTile && temporaryTile.id === tile.id) { + tile = temporaryTile + } + return ( + <TileHandle + key={tile.id} + tile={tile} + bounds={this.state.bounds} + box={currentTile && tile.id === currentTile.id && currentBox} + onMouseDown={e => this.handleMouseDown(e, tile)} + onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)} + /> + ) + })} + {!!(temporaryTile && temporaryTile.id === 'new') && ( + <TileHandle + key={temporaryTile.id} + tile={temporaryTile} + bounds={this.state.bounds} + box={currentTile && temporaryTile.id === currentTile.id && currentBox} + onMouseDown={e => this.handleMouseDown(e, temporaryTile)} + /> + )} + </div> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, + temporaryTile: state.tile.temporaryTile, +}) + +const mapDispatchToProps = dispatch => ({ + pageActions: bindActionCreators({ ...pageActions }, dispatch), + tileActions: bindActionCreators({ ...tileActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageEditor) diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js new file mode 100644 index 0000000..eb1c3b9 --- /dev/null +++ b/frontend/app/views/page/components/page.header.js @@ -0,0 +1,36 @@ +import React from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' + +import * as graphActions from '../../graph/graph.actions' +import * as pageActions from '../page.actions' + +function PageHeader(props) { + return ( + <header> + <div> + <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo"><b>{props.site.siteTitle}</b></Link> + </div> + <div> + <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button> + <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button> + <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button> + </div> + </header> + ) +} + +const mapStateToProps = (state) => ({ + // auth: state.auth, + site: state.site, + graph: state.graph, + // isAuthenticated: state.auth.isAuthenticated, +}) + +const mapDispatchToProps = (dispatch) => ({ + graphActions: bindActionCreators({ ...graphActions }, dispatch), + pageActions: bindActionCreators({ ...pageActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageHeader) diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/page/components/tile.edit.js new file mode 100644 index 0000000..2ea09d1 --- /dev/null +++ b/frontend/app/views/page/components/tile.edit.js @@ -0,0 +1,84 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +// import { history } from 'app/store' +import actions from 'app/actions' +import * as pageActions from '../../page/page.actions' +import * as tileActions from '../../tile/tile.actions' + +import { Loader } from 'app/common' + +import TileForm from '../components/tile.form' + +class TileEdit extends Component { + state = { + tile: null + } + + componentDidMount() { + this.load() + } + + componentDidUpdate(prevProps) { + if (prevProps.page.editor.currentEditTileId !== this.props.page.editor.currentEditTileId) { + this.load() + } + } + + load() { + const { currentEditTileId } = this.props.page.editor + const tile = this.props.page.show.res.tiles.filter(tile => tile.id === currentEditTileId)[0] + console.log('edit', currentEditTileId) + this.setState({ tile }) + } + + handleSubmit(data) { + actions.tile.update(data) + .then(response => { + // console.log(response) + if (response.status === 'ok') { + this.props.pageActions.updatePageTile(response.res) + } + }) + } + + handleClose() { + this.props.pageActions.hideEditTileForm() + this.props.tileActions.clearTemporaryTile() + } + + render() { + const { tile } = this.state + if (!tile) { + return ( + <div className='form'> + <Loader /> + </div> + ) + } + return ( + <TileForm + initialData={tile} + graph={this.props.graph.show.res} + page={this.props.page.show.res} + onSubmit={this.handleSubmit.bind(this)} + onClose={this.handleClose.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, + tile: state.tile, +}) + +const mapDispatchToProps = dispatch => ({ + pageActions: bindActionCreators({ ...pageActions }, dispatch), + tileActions: bindActionCreators({ ...tileActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(TileEdit) diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js new file mode 100644 index 0000000..5b25f13 --- /dev/null +++ b/frontend/app/views/page/components/tile.form.js @@ -0,0 +1,645 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import { Link } from 'react-router-dom' + +import actions from 'app/actions' +import { session } from 'app/session' + +import { + TextInput, NumberInput, ColorInput, Slider, + Select, LabelDescription, TextArea, Checkbox, + SubmitButton, Loader } from 'app/common' +import { preloadImage } from 'app/utils' + +import * as tileActions from '../../tile/tile.actions' + +const SELECT_TYPES = [ + "image", "text", "link" +].map(s => ({ name: s, label: s })) + +const ALIGNMENTS = [ + "top_left", "top_center", "top_right", + "center_left", "center_center", "center_right", + "bottom_left", "bottom_center", "bottom_right", +].map(align => ({ + name: align, + label: align === 'center_center' + ? 'center' + : align.replace('_', ' ') + })) + +const REQUIRED_KEYS = { + image: ['url'], + text: ['content'], + link: [], +} + +const IMAGE_TILE_STYLES = [ + 'tile', 'cover', 'contain', 'contain no-repeat' +].map(style => ({ name: style, label: style })) + +const TEXT_FONT_FAMILIES = [ + 'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive', +].map(style => ({ name: style, label: style })) + +const TEXT_FONT_STYLES = [ + 'normal', 'bold', 'italic', 'bold-italic', +].map(style => ({ name: style, label: style })) + +const CURSORS = [ + { name: 'hand_up', label: 'Up', }, + { name: 'hand_down', label: 'Down', }, + { name: 'hand_left', label: 'Left', }, + { name: 'hand_right', label: 'Right', }, +] + +const NO_LINK = 0 +const EXTERNAL_LINK = -1 +const PAGE_LIST_TOP_OPTIONS = [ + { name: NO_LINK, label: 'No link' }, + { name: EXTERNAL_LINK, label: 'External link' }, + { name: -2, label: '──────────', disabled: true }, +] + +// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True) +// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg + +const newImage = (data) => ({ + settings: { + ...newPosition(), + is_tiled: false, + tile_style: 'tile', + url: "", + external_link_url: "", + cursor: 'hand_up', + }, + type: 'image', + target_page_id: null, + ...data, +}) + +const newText = (data) => ({ + settings: { + ...newPosition(), + content: "", + font_family: 'sans-serif', + font_size: 16, + font_style: 'normal', + font_color: '#dddddd', + background_color: 'transparent', + width: 0, + height: 0, + external_link_url: "", + cursor: 'hand_up', + }, + type: 'text', + target_page_id: null, + ...data, +}) + +const newLink = (data) => ({ + settings: { + ...newPosition({ width: 100, height: 100, }), + external_link_url: "", + cursor: 'hand_up', + }, + type: 'link', + target_page_id: null, + ...data, +}) + +const newPosition = (data) => ({ + x: 0, y: 0, + width: 0, height: 0, + rotation: 0, scale: 1, + opacity: 1, + align: "center_center", + ...data, +}) + +const TYPE_CONSTRUCTORS = { + image: newImage, + text: newText, + link: newLink, +} + +class TileForm extends Component { + state = { + title: "", + submitTitle: "", + errorFields: new Set([]), + modified: false, + pageList: [], + } + + componentDidMount() { + const { graph, page, isNew, initialData, sortOrder } = this.props + const title = isNew ? 'new tile' : 'editing tile' + const submitTitle = isNew ? "Create Tile" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + }) + const { pages } = graph.show.res + const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages + let pageList = [ + ...PAGE_LIST_TOP_OPTIONS, + ...linkPages.map(page => ({ name: page.id, label: page.path })) + ] + this.setState({ pageList }) + if (isNew) { + const newTile = newImage({ + id: "new", + graph_id: graph.show.res.id, + page_id: page.show.res.id, + sort_order: sortOrder, + }) + this.props.tileActions.updateTemporaryTile(newTile) + } else { + this.props.tileActions.updateTemporaryTile({ ...initialData }) + } + } + + componentDidUpdate(prevProps) { + if (!this.props.isNew && this.props.initialData !== prevProps.initialData) { + this.handleSubmit() + this.props.tileActions.updateTemporaryTile({ ...this.props.initialData }) + this.setState({ + errorFields: new Set([]), + }) + } + } + + componentWillUnmount() { + // if the item has changed, save before we close the form! + if (!this.props.isNew && this.state.modified) { + this.handleSubmit() + } + } + + handleChange(e) { + const { name, value } = e.target + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + [name]: value, + }) + } + + handleTypeChange(type) { + const { graph, page, temporaryTile } = this.props + let newTile = TYPE_CONSTRUCTORS[type]({ + id: temporaryTile.id, + graph_id: temporaryTile.graph_id, + page_id: temporaryTile.page_id, + }) + newTile.settings.align = temporaryTile.settings.align + this.clearErrorField('type') + this.props.tileActions.updateTemporaryTile(newTile) + } + + handleSettingsChange(e) { + const { name, value } = e.target + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + } + }) + } + + handleSelect(name, value) { + this.clearErrorField(name) + if (name === 'type') { + return this.handleTypeChange(value) + } + if (name === 'target_page_id') { + value = parseInt(value) + } + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + [name]: value, + }) + } + + handleSettingsSelect(name, value) { + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + } + }) + } + + handleAlignment(name, value) { + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + x: 0, y: 0, + } + }) + } + + handleImageChange(e) { + const { name, value } = e.target + this.handleSettingsSelect(name, value) + preloadImage(value).then(img => { + // console.log(img) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + width: img.naturalWidth, + height: img.naturalHeight, + x: 0, y: 0, + } + }) + }) + } + + clearErrorField(name) { + const { errorFields } = this.state + if (errorFields.has(name)) { + errorFields.delete(name) + this.setState({ + errorFields, + modified: true, + }) + } else if (!this.state.modified) { + this.setState({ + errorFields, + modified: true, + }) + } + } + + handleSubmit(e) { + if (e) e.preventDefault() + const { isNew, temporaryTile, onSubmit, onClose } = this.props + const requiredSettings = REQUIRED_KEYS[temporaryTile.type] + const validKeys = "id graph_id page_id target_page_id type settings".split(" ") + const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {}) + const errorFields = requiredSettings.filter(key => !validData.settings[key]) + if (errorFields.length) { + console.log('error', errorFields, validData) + if (e) { + this.setState({ errorFields: new Set(errorFields) }) + } + } else { + if (isNew) { + // side effect: set username if we're creating a new tile + // session.set('username', data.username) + delete validData.id + } else { + validData.id = temporaryTile.id + } + this.setState({ modified: false }) + console.log('submit', validData) + onSubmit(validData) + // if submitting after switching elements, don't close the form + if (e && onClose) { + onClose() + } + } + } + + handleDelete() { + const { temporaryTile, isNew, onClose } = this.props + if (confirm('Really delete this tile?')) { + actions.tile.destroy(temporaryTile) + .then(() => { + onClose() + }) + } + } + + render() { + const { temporaryTile, isNew } = this.props + const { title, submitTitle, errorFields } = this.state + if (!temporaryTile || !temporaryTile.settings) return <div className='box' /> + return ( + <div className='box'> + <h1>{title}</h1> + <form onSubmit={this.handleSubmit.bind(this)}> + <div className="row selects"> + <Select + name='type' + selected={temporaryTile.type} + options={SELECT_TYPES} + title='' + onChange={this.handleSelect.bind(this)} + /> + <Select + name='align' + selected={temporaryTile.settings.align} + options={ALIGNMENTS} + title='' + onChange={this.handleAlignment.bind(this)} + /> + </div> + + {this.renderPositionInfo()} + + {temporaryTile.type === 'image' + ? this.renderImageForm() + : temporaryTile.type === 'text' + ? this.renderTextForm() + : temporaryTile.type === 'link' + ? this.renderLinkForm() + : ""} + + {this.renderHyperlinkForm()} + {this.renderMiscForm()} + + <div className='row buttons'> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit.bind(this)} + /> + {!isNew && + <SubmitButton + title={'Delete'} + className='destroy' + onClick={this.handleDelete.bind(this)} + /> + } + </div> + {!!errorFields.size && + <label> + <span></span> + <span>Please add the required fields =)</span> + </label> + } + </form> + </div> + ) + } + + renderPositionInfo() { + const { temporaryTile } = this.props + const { x, y, width, height, rotation, scale } = temporaryTile.settings + return ( + <div className='position'> + {parseInt(x)}{', '} + {parseInt(y)}{' '} + {parseInt(width)}{'x'}{parseInt(height)}{' '} + {rotation === 0 || <span>{parseInt(rotation)}{'\u00B0 '}</span>} + {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>} + </div> + ) + } + + renderImageForm() { + // const { isNew } = this.props + const { temporaryTile } = this.props + const { errorFields } = this.state + // console.log(temporaryTile.settings) + return ( + <div> + <div className='row imageUrl'> + {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>} + <TextInput + title="" + placeholder='http://' + name="url" + required + data={temporaryTile.settings} + error={errorFields.has('url')} + onChange={this.handleImageChange.bind(this)} + autoComplete="off" + /> + </div> + <div className='row pair'> + <Checkbox + label="Tiled" + name="is_tiled" + checked={temporaryTile.settings.is_tiled} + onChange={this.handleSettingsSelect.bind(this)} + autoComplete="off" + /> + {temporaryTile.settings.is_tiled && + <Select + name='tile_style' + selected={temporaryTile.settings.tile_style || 'tile'} + options={IMAGE_TILE_STYLES} + title='' + onChange={this.handleSettingsSelect.bind(this)} + /> + } + </div> + </div> + ) + } + + renderTextForm() { + const { temporaryTile } = this.props + const { errorFields } = this.state + return ( + <div> + <TextArea + title="" + name="content" + required + data={temporaryTile.settings} + error={errorFields.has('content')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + <div className='row font'> + <Select + title="Font" + name='font_family' + selected={temporaryTile.settings.font_family || 'sans-serif'} + options={TEXT_FONT_FAMILIES} + title='' + onChange={this.handleSettingsSelect.bind(this)} + /> + <NumberInput + title='' + name='font_size' + data={temporaryTile.settings} + min={1} + max={1200} + error={errorFields.has('font_size')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + <Select + name='font_style' + selected={temporaryTile.settings.font_style || 'normal'} + options={TEXT_FONT_STYLES} + title='' + onChange={this.handleSettingsSelect.bind(this)} + /> + </div> + <ColorInput + title='Text' + name='font_color' + data={temporaryTile.settings} + error={errorFields.has('font_color')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + <ColorInput + title='BG' + name='background_color' + data={temporaryTile.settings} + error={errorFields.has('background_color')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + <div className='row pair'> + <NumberInput + title="Width" + name="width" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('width')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + <NumberInput + title="Height" + name="height" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('height')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + </div> + </div> + ) + } + + renderLinkForm() { + const { temporaryTile } = this.props + const { errorFields } = this.state + return ( + <div> + <div className='row pair'> + <NumberInput + title="Width" + name="width" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('width')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + <NumberInput + title="Height" + name="height" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('height')} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + </div> + </div> + ) + } + + renderHyperlinkForm() { + const { temporaryTile } = this.props + const { pageList } = this.state + const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK + return ( + <div> + <div className={'row selects'}> + <Select + title='' + name='target_page_id' + selected={temporaryTile.target_page_id || NO_LINK} + options={pageList} + onChange={this.handleSelect.bind(this)} + /> + <Select + title='' + name='cursor' + selected={temporaryTile.settings.cursor} + options={CURSORS} + defaultOption="Cursor" + onChange={this.handleSettingsSelect.bind(this)} + /> + </div> + <div> + {isExternalLink && + <TextInput + title="" + placeholder='http://' + name="external_link_url" + data={temporaryTile.settings} + onChange={this.handleSettingsChange.bind(this)} + autoComplete="off" + /> + } + </div> + </div> + ) + } + + renderMiscForm() { + const { temporaryTile } = this.props + return ( + <div> + <Slider + title='Opacity' + name='opacity' + value={temporaryTile.settings.opacity} + onChange={this.handleSettingsSelect.bind(this)} + min={0.0} + max={1.0} + step={0.01} + /> + <Slider + title='Scale' + name='scale' + value={temporaryTile.settings.scale} + onChange={this.handleSettingsSelect.bind(this)} + min={0.01} + max={10.0} + step={0.01} + /> + <Slider + title='Rotation' + name='rotation' + value={temporaryTile.settings.rotation} + onChange={this.handleSettingsSelect.bind(this)} + min={-180.0} + max={180.0} + step={1} + type='int' + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, + tile: state.tile, + temporaryTile: state.tile.temporaryTile, +}) + +const mapDispatchToProps = dispatch => ({ + tileActions: bindActionCreators({ ...tileActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(TileForm) diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js new file mode 100644 index 0000000..e91f0b1 --- /dev/null +++ b/frontend/app/views/page/components/tile.handle.js @@ -0,0 +1,139 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick }) => { + // console.log(tile) + const { width, height } = tile.settings + const style = { + transform: generateTransform(tile, box), + opacity: tile.settings.opacity, + } + // console.log(generateTransform(tile)) + let content; + let className = ['tile', tile.type].join(' ') + if (tile.target_page_id || (viewing && tile.href)) { + className += ' ' + (tile.settings.cursor || 'hand_up') + } + // console.log(tile.settings) + switch (tile.type) { + case 'image': + if (!tile.settings.url) { + return null + } + if (tile.settings.is_tiled) { + style.backgroundImage = 'url(' + tile.settings.url + ')' + style.backgroundPosition = tile.settings.align.replace('_', ' ') + switch (tile.settings.tile_style) { + default: + case 'tile': + break + case 'cover': + style.backgroundSize = 'cover' + break + case 'contain': + style.backgroundSize = 'contain' + break + case 'contain no-repeat': + style.backgroundSize = 'contain' + style.backgroundRepeat = 'no-repeat' + break + } + className += ' is_tiled' + } else { + className += ' ' + tile.settings.align + content = <img src={tile.settings.url} /> + } + break + case 'text': + if (!tile.settings.content) { + return null + } + content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} /> + className += ' ' + tile.settings.align + style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto' + style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto' + style.fontFamily = tile.settings.font_family + style.fontSize = tile.settings.font_size + 'px' + style.lineHeight = 1.5 + style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal' + style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal' + style.backgroundColor = tile.settings.background_color || 'transparent' + style.color = tile.settings.font_color || '#dddddd!important' + break + case 'link': + content = "" + className += ' ' + tile.settings.align + style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto' + style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto' + break + } + if (viewing && tile.href) { + if (tile.href.indexOf('http') === 0) { + return ( + <a href={tile.href} rel='noopener'> + <div + className={className} + style={style} + > + {content} + </div> + </a> + ) + } else { + return ( + <Link to={tile.href}> + <div + className={className} + onMouseDown={onMouseDown} + style={style} + > + {content} + </div> + </Link> + ) + } + } else { + return ( + <div + className={className} + onMouseDown={onMouseDown} + onDoubleClick={onDoubleClick} + style={style} + > + {content} + </div> + ) + } +} + +const generateTransform = (tile, box) => { + let { x, y, align, rotation, scale, is_tiled } = tile.settings + if (is_tiled) { + return 'translateZ(0)' + } + if (box) { + x += box.dx + y += box.dy + } + const [yalign, xalign] = align.split('_') + let transform = ['translateZ(0)'] + if (yalign === 'center') { + transform.push('translateY(-50%)') + } + if (xalign === 'center') { + transform.push('translateX(-50%)') + } + // if (x % 2 == 1) x += 0.5 + // if (y % 2 == 1) y += 0.5 + transform.push('translateX(' + x + 'px)') + transform.push('translateY(' + y + 'px)') + if (scale !== 1) { + transform.push('scale(' + scale + ')') + } + if (rotation !== 0) { + transform.push('rotateZ(' + rotation + 'deg)') + } + return transform.join(' ') +} + +export default TileHandle diff --git a/frontend/app/views/page/components/tile.list.js b/frontend/app/views/page/components/tile.list.js new file mode 100644 index 0000000..c455489 --- /dev/null +++ b/frontend/app/views/page/components/tile.list.js @@ -0,0 +1,142 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { ReactSortable } from "react-sortablejs" + +// import actions from 'app/actions' +import * as tileActions from '../../tile/tile.actions' +import * as pageActions from '../../page/page.actions' + +const DOUBLE_CLICK_THRESHOLD = 250 + +class TileList extends Component { + state = { + tiles: [], + lastTargetId: 0, + lastTimeStamp: 0, + } + + // store doubleclick state as a class property because ReactSortable calls setState promiscuously + didDoubleClick = false + + componentDidMount(prevProps) { + const { tiles } = this.props.page.show.res + const { pages } = this.props.graph.show.res + const pageTitles = pages.reduce((a,b) => { + a[b.id] = b.title + return a + }, {}) + this.setState({ tiles: tiles.slice(0).reverse(), pageTitles }) + } + + componentDidUpdate(prevProps, prevState) { + if (this.didDoubleClick) return + const { tiles } = this.state + if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) { + this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse()) + } + // since we store the full tiles here (reversed!), they might change from under us + // potentially later refactor to only use a sort order / lookup + else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) { + const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => { + a[b.id] = b + return a + }, {}) + const newTiles = this.state.tiles.map(tile => { + return tileLookup[tile.id] + }) + this.setState({ tiles: newTiles }) + } + } + + handleChoose(e) { + const { lastTargetId, lastTimeStamp } = this.state + if (lastTimeStamp + && parseInt(e.item.dataset.id) === lastTargetId + && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD + ) { + // console.log('selected', lastTargetId) + this.didDoubleClick = true + this.props.pageActions.showEditTileForm(lastTargetId) + } else { + this.setState({ + lastTargetId: parseInt(e.item.dataset.id), + lastTimeStamp: e.timeStamp, + }) + } + } + + handleUpdate(newTiles) { + if (this.didDoubleClick) return + this.setState({ tiles: newTiles }) + } + + render() { + const { tiles, pageTitles } = this.state + return ( + <div className='box tileList'> + <ReactSortable + list={tiles} + setList={newTiles => this.handleUpdate(newTiles)} + onChoose={e => this.handleChoose(e)} + > + {tiles.map(tile => ( + tile.type === 'image' + ? <TileListImage key={tile.id} tile={tile} /> + : tile.type === 'text' + ? <TileListText key={tile.id} tile={tile} /> + : tile.type === 'link' + ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} /> + : <TileListMisc key={tile.id} tile={tile} /> + ))} + </ReactSortable> + </div> + ) + } +} + +const TileListImage = ({ tile }) => ( + <div className='row' data-id={tile.id}> + <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} /> + </div> +) + +const TileListText = ({ tile }) => ( + <div className='row' data-id={tile.id}> + <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span> + </div> +) + +const TileListLink = ({ tile, pageTitles }) => ( + <div className='row link' data-id={tile.id}> + <span className='snippet'> + {'Link: '} + {tile.target_page_id === -1 + ? 'External' + : !tile.target_page_id + ? 'No link specified!' + : tile.target_page_id in pageTitles + ? pageTitles[tile.target_page_id] + : 'Error, broken link!'} + </span> + </div> +) + +const TileListMisc = ({ tile }) => ( + <div className='row' data-id={tile.id}> + <span className='snippet'>{"Tile: "}{tile.type}</span> + </div> +) + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, +}) + +const mapDispatchToProps = dispatch => ({ + tileActions: bindActionCreators({ ...tileActions }, dispatch), + pageActions: bindActionCreators({ ...pageActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(TileList) diff --git a/frontend/app/views/page/components/tile.new.js b/frontend/app/views/page/components/tile.new.js new file mode 100644 index 0000000..fb609a5 --- /dev/null +++ b/frontend/app/views/page/components/tile.new.js @@ -0,0 +1,55 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' +import * as tileActions from '../../tile/tile.actions' +import * as pageActions from '../../page/page.actions' + +import TileForm from '../components/tile.form' + +class TileNew extends Component { + handleSubmit(data) { + console.log(data) + actions.tile.create(data) + .then(res => { + console.log(res) + // const graph = this.props.graph.show.res + // if (res.res && res.res.id) { + // history.push('/' + graph.path + '/' + res.res.path) + // } + this.props.pageActions.hideAddTileForm() + this.props.tileActions.clearTemporaryTile() + }) + .catch(err => { + console.error('error') + }) + } + + render() { + return ( + <TileForm + isNew + graph={this.props.graph.show.res} + page={this.props.page.show.res} + initialData={null} + sortOrder={this.props.page.show.res.tiles.length} + onSubmit={this.handleSubmit.bind(this)} + /> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, +}) + +const mapDispatchToProps = dispatch => ({ + tileActions: bindActionCreators({ ...tileActions }, dispatch), + pageActions: bindActionCreators({ ...pageActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(TileNew) diff --git a/frontend/app/views/page/cursors.css b/frontend/app/views/page/cursors.css new file mode 100644 index 0000000..56fb088 --- /dev/null +++ b/frontend/app/views/page/cursors.css @@ -0,0 +1,21 @@ +/* cursors */ +/* keep in separate file so they don't conflict. a copy of this lives in site.css */ + +.tile.hand_up { + cursor: url(/static/img/hand_up.png) 40 10, pointer; +} +.tile.hand_right { + cursor: url(/static/img/hand_right.png) 90 40, pointer; +} +.tile.hand_down { + cursor: url(/static/img/hand_down.png) 60 90, pointer; +} +.tile.hand_left { + cursor: url(/static/img/hand_left.png) 10 60, pointer; +} + +.tile.link { + cursor: pointer; + border: 1px solid #31f; + background-color: rgba(48,16,255,0.1); +}
\ No newline at end of file diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js new file mode 100644 index 0000000..d2bbbe2 --- /dev/null +++ b/frontend/app/views/page/page.actions.js @@ -0,0 +1,110 @@ +import * as types from 'app/types' +import { store } from 'app/store' +import actions from 'app/actions' +import { default as debounce } from 'lodash.debounce' +import { post } from 'app/utils' + +const url = { + sortTiles: (id) => '/api/v1/page/' + id + '/sort', +} + +// Add tile form + +export const showAddTileForm = () => dispatch => { + dispatch({ type: types.page.show_add_tile_form }) +} + +export const hideAddTileForm = () => dispatch => { + dispatch({ type: types.page.hide_add_tile_form }) +} + +export const toggleAddTileForm = () => dispatch => { + dispatch({ type: types.page.toggle_add_tile_form }) +} + +// Edit tile form + +export const showEditTileForm = tile_id => dispatch => { + dispatch({ type: types.page.show_edit_tile_form, tile_id }) +} + +export const hideEditTileForm = () => dispatch => { + dispatch({ type: types.page.hide_edit_tile_form }) +} + +export const toggleEditTileForm = () => dispatch => { + dispatch({ type: types.page.toggle_edit_tile_form }) +} + +// Tile list + +export const showTileList = () => dispatch => { + dispatch({ type: types.page.show_tile_list }) +} + +export const hideTileList = () => dispatch => { + dispatch({ type: types.page.hide_tile_list }) +} + +export const toggleTileList = () => dispatch => { + dispatch({ type: types.page.toggle_tile_list }) +} + +// Update local page tile state when we change it + +export const updatePageTile = tile => dispatch => { + dispatch({ type: types.page.update_page_tile, tile }) +} + +// Fetch graph/page when loading a new URL + +export const showGraphAndPageIfUnloaded = ({ graph_name, page_name }) => dispatch => ( + new Promise((resolve, reject) => { + showGraphIfUnloaded({ graph_name })(dispatch) + .then(graph => ( + actions.page.show('name/' + graph_name + '/' + page_name) + .then(resolve) + .catch(reject) + )) + .catch(reject) + }) +) + +export const showGraphIfUnloaded = ({ graph_name }) => dispatch => ( + new Promise((resolve, reject) => { + const { res: graph } = store.getState().graph.show + if (graph && graph.path === graph_name) { + return resolve(graph) + } + actions.graph.show('name/' + graph_name) + .then(resolve) + .catch(reject) + }) +) + +// Sorting tiles in the tile list + +export const setTileSortOrder = (tiles) => dispatch => { + let oldTiles = store.getState().page.show.res.tiles + if (!isSameTileOrder(tiles, oldTiles)) { + updateTileSortOrder(tiles, dispatch) + } + dispatch({ type: types.page.set_tile_sort_order, tiles }) +} + +export const isSameTileOrder = (newTiles, oldTiles) => { + for (let i = 0; i < newTiles.length; i++) { + if (newTiles[i].id !== oldTiles[i].id) { + return false + } + } + return true +} + +export const updateTileSortOrder = debounce((tiles, dispatch) => { + const { page_id } = tiles[0] + const order = tiles.map(tile => (tile.id)) + console.log(page_id, order) + post(dispatch, types.page, 'sort', url.sortTiles(page_id), order) +}, 1000) + diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js new file mode 100644 index 0000000..dc85f5e --- /dev/null +++ b/frontend/app/views/page/page.container.js @@ -0,0 +1,95 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import './page.css' +import './cursors.css' + +import actions from 'app/actions' +import { Loader } from 'app/common' + +import * as graphActions from '../graph/graph.actions' +import * as pageActions from './page.actions' + +import PageEdit from '../graph/components/page.edit' +import TileNew from './components/tile.new' +import TileEdit from './components/tile.edit' +import TileList from './components/tile.list' + +import PageHeader from './components/page.header' +import PageEditor from './components/page.editor' + +class PageContainer extends Component { + componentDidMount() { + if (this.shouldShowPage()) this.load() + } + componentDidUpdate(prevProps) { + if (this.shouldLoadPage(prevProps)) this.load() + } + shouldShowPage() { + const { graph_name, page_name } = this.props.match.params + // console.log(graph_name, page_name) + return (graph_name && page_name && graph_name !== 'index') + } + shouldLoadPage(prevProps) { + const { page, location } = this.props + const { key } = location + if (key === prevProps.location.key) return false + if (!this.shouldShowPage()) return false + return (page.show.name === prevProps.page.show.name) + } + load() { + actions.site.setSiteTitle("loading " + this.props.match.params.page_name + "...") + this.props.pageActions.showGraphAndPageIfUnloaded(this.props.match.params) + .then(data => { + actions.site.setSiteTitle(data.res.title) + if (!data.res.tiles.length) { + this.props.pageActions.showAddTileForm() + } else { + this.props.pageActions.hideAddTileForm() + } + }) + } + render() { + if (!this.shouldShowPage()) return null + if (!this.props.page.show.res || this.props.page.show.loading) { + return ( + <div> + <PageHeader /> + <div className='body'> + <div className='page loading'> + <Loader /> + </div> + </div> + </div> + ) + } + return ( + <div> + <PageHeader /> + <div className='body'> + <PageEditor /> + <div className='sidebar'> + {this.props.graph.editor.editingPage && <PageEdit />} + {this.props.page.editor.addingTile && <TileNew />} + {this.props.page.editor.editingTile && <TileEdit />} + {this.props.page.editor.tileList && <TileList />} + </div> + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, +}) + +const mapDispatchToProps = dispatch => ({ + graphActions: bindActionCreators({ ...graphActions }, dispatch), + pageActions: bindActionCreators({ ...pageActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageContainer) diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css new file mode 100644 index 0000000..4559543 --- /dev/null +++ b/frontend/app/views/page/page.css @@ -0,0 +1,167 @@ +.page.loading { + padding: 1rem; +} + +.page { + width: 100%; + height: 100%; +} + +/* tiles */ + +.tile { + position: absolute; +} +.tile.image { + display: block; +} +.tile.image.is_tiled { + width: 100%; + height: 100%; +} +.tile.text { + display: block; + white-space: break-spaces; + padding: 0.25rem; + user-select: none; + cursor: arrow; +} +.tile.link { + display: block; +} + +/* tile orientations */ + +.tile.top_left { top: 0; left: 0; } +.tile.center_left { top: 50%; left: 0; } +.tile.bottom_left { bottom: 0; left: 0; } +.tile.top_center { top: 0; left: 50%; } +.tile.center_center { top: 50%; left: 50%; } +.tile.bottom_center { bottom: 0; left: 50%; } +.tile.top_right { top: 0; right: 0; } +.tile.center_right { top: 50%; right: 0; } +.tile.bottom_right { bottom: 0; right: 0; } + +/* sortable tile list */ + +.tileList .row { + justify-content: flex-start; + align-items: center; + min-height: 2.5rem; + margin-bottom: 0.5rem; + box-shadow: 4px 4px 6px rgba(0,0,0,0.5); +} +.tileList .row:last-child { + margin-bottom: 0; +} +.tileList .row:nth-child(odd) { + background: rgba(0,0,0,0.2); +} +.tileList .row:nth-child(even) { + background: rgba(255,255,255,0.2); +} +.tileList span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; + padding: 0.25rem; + cursor: default; +} +.tileList .thumb { + width: 100%; + height: 2.5rem; + background-position: center center; + background-size: cover; + background-repeat: no-repeat; +} +.tileList .row.sortable-chosen { + background-color: #000; +} +.tileList .row.sortable-ghost { +} +.tileList .row.sortable-drag { + opacity: 0.6; +} +.tileList .row.link { + border: 1px solid #31f; + background: rgba(48,16,255,0.3); + box-shadow: inset 0 0 16px rgba(0,0,0,0.5); + padding-left: 0.375rem; +} + +/* tile form */ + +.row.imageUrl label { + width: 13rem; +} +.row.imageUrl .thumb { + display: flex; + justify-content: center; + align-items: center; + height: 1.5rem; + width: 1.9475rem; + margin-right: 0.5rem; +} +.row.imageUrl img { + max-width: 100%; + max-height: 100%; +} +.box .row.buttons { + justify-content: space-between; +} +.box .row.pair { + justify-content: space-between; +} +.box .pair label:last-child { + margin-right: 0; +} + +/* tile font form */ + +.box .font { + justify-content: space-between; +} +.box .font input[type=number] { + width: 3rem; +} +.box .font .select { + width: 6rem; + padding: 0.25rem; + margin-right: 0; +} +.box .font label:last-child .select { + width: 3.75rem; +} +.box .font label { + flex-direction: row; + width: 6.5rem; + margin-right: 0.5rem; + min-width: auto; +} +.box .font label span { + display: none; +} +.box form .font label { +} + +/* tile color form */ + +.box form label.color span { + min-width: 4rem; + width: 4rem; +} +.box label.color { + display: flex; + flex-direction: row; +} +.box label.color input[type='color'] { + width: 2rem; + margin-right: 0.5rem; + padding: 0; +} +.box label.color input[type='text'] { + width: 6rem; + max-width: 6rem; +} diff --git a/frontend/app/views/page/page.reducer.js b/frontend/app/views/page/page.reducer.js new file mode 100644 index 0000000..c2d231a --- /dev/null +++ b/frontend/app/views/page/page.reducer.js @@ -0,0 +1,202 @@ +import * as types from 'app/types' +// import { session, getDefault, getDefaultInt } from 'app/session' + +import { crudState, crudReducer } from 'app/api/crud.reducer' + +const initialState = crudState('page', { + editor: { + addingTile: false, + editingTile: false, + currentEditTileId: 0, + tileList: false, + }, + options: { + } +}) + +const reducer = crudReducer('page') + +export default function pageReducer(state = initialState, action) { + // console.log(action.type, action) + state = reducer(state, action) + switch (action.type) { + case types.tile.create: + return { + ...state, + show: { + ...state.show, + res: { + ...state.show.res, + tiles: state.show.res.tiles.concat(action.data.res), + } + } + } + + case types.page.update: + if (state.show.res && state.show.res.id === action.data.res.id) { + return { + ...state, + show: { + ...state.show, + res: { + ...action.data.res, + tiles: state.show.res.tiles, + } + } + } + } + return { + ...state, + show: { + ...state.show, + res: { + ...action.data.res, + } + } + } + + case types.page.update_page_tile: + console.log(action.tile) + return { + ...state, + show: { + ...state.show, + res: { + ...state.show.res, + tiles: state.show.res.tiles.map(tile => { + if (tile.id === action.tile.id) { + return { ...action.tile } + } else { + return tile + } + }), + } + } + } + + case types.tile.destroy: + return { + ...state, + show: { + ...state.show, + res: { + ...state.show.res, + tiles: state.show.res.tiles.filter(tile => tile.id !== action.data.id) + } + } + } + + // add tile UI + case types.page.show_add_tile_form: + return { + ...state, + editor: { + ...state.editor, + addingTile: true, + editingTile: false, + tileList: false, + } + } + + case types.page.hide_add_tile_form: + return { + ...state, + editor: { + ...state.editor, + addingTile: false, + } + } + + case types.page.toggle_add_tile_form: + return { + ...state, + editor: { + ...state.editor, + addingTile: !state.editor.addingTile, + editingTile: false, + tileList: false, + } + } + + // edit tile UI + case types.page.show_edit_tile_form: + return { + ...state, + editor: { + ...state.editor, + addingTile: false, + editingTile: true, + currentEditTileId: action.tile_id, + tileList: false, + } + } + + case types.page.hide_edit_tile_form: + return { + ...state, + editor: { + ...state.editor, + editingTile: false, + } + } + + // tile list UI + case types.page.show_tile_list: + return { + ...state, + editor: { + ...state.editor, + addingTile: false, + editingTile: false, + tileList: true, + } + } + + case types.page.hide_tile_list: + return { + ...state, + editor: { + ...state.editor, + tileList: false, + } + } + + case types.page.toggle_tile_list: + return { + ...state, + editor: { + ...state.editor, + addingTile: false, + editingTile: false, + tileList: !state.editor.tileList, + } + } + + case types.graph.toggle_edit_page_form: + return { + ...state, + editor: { + ...state.editor, + addingTile: false, + editingTile: false, + tileList: false, + } + } + + case types.page.set_tile_sort_order: + return { + ...state, + show: { + ...state.show, + res: { + ...state.res, + tiles: action.tiles, + } + } + } + + + default: + return state + } +} diff --git a/frontend/app/views/site/site.actions.js b/frontend/app/views/site/site.actions.js new file mode 100644 index 0000000..9c66933 --- /dev/null +++ b/frontend/app/views/site/site.actions.js @@ -0,0 +1,6 @@ +import * as types from 'app/types' + +export const setSiteTitle = title => dispatch => { + document.querySelector('title').innerText = title + dispatch({ type: types.site.set_site_title, payload: title }) +} diff --git a/frontend/app/views/site/site.reducer.js b/frontend/app/views/site/site.reducer.js new file mode 100644 index 0000000..b40d6f1 --- /dev/null +++ b/frontend/app/views/site/site.reducer.js @@ -0,0 +1,19 @@ +import * as types from 'app/types' + +const initialState = { + 'siteTitle': 'swimmer', +} + +export default function graphReducer(state = initialState, action) { + // console.log(action.type, action) + switch (action.type) { + case types.site.set_site_title: + return { + ...state, + siteTitle: action.payload, + } + + default: + return state + } +} diff --git a/frontend/app/views/tile/tile.actions.js b/frontend/app/views/tile/tile.actions.js new file mode 100644 index 0000000..e3be717 --- /dev/null +++ b/frontend/app/views/tile/tile.actions.js @@ -0,0 +1,9 @@ +import * as types from 'app/types' + +export const updateTemporaryTile = data => dispatch => { + dispatch({ type: types.tile.update_temporary_tile, data }) +} + +export const clearTemporaryTile = () => dispatch => { + dispatch({ type: types.tile.clear_temporary_tile }) +} diff --git a/frontend/app/views/tile/tile.reducer.js b/frontend/app/views/tile/tile.reducer.js new file mode 100644 index 0000000..d327a0c --- /dev/null +++ b/frontend/app/views/tile/tile.reducer.js @@ -0,0 +1,31 @@ +import * as types from 'app/types' + +import { crudState, crudReducer } from 'app/api/crud.reducer' + +const initialState = crudState('tile', { + temporaryTile: null, + options: {}, +}) + +const reducer = crudReducer('tile') + +export default function tileReducer(state = initialState, action) { + // console.log(action.type, action) + state = reducer(state, action) + switch (action.type) { + case types.tile.update_temporary_tile: + return { + ...state, + temporaryTile: action.data + } + + case types.tile.clear_temporary_tile: + return { + ...state, + temporaryTile: null + } + + default: + return state + } +} diff --git a/frontend/app/views/upload/components/upload.form.js b/frontend/app/views/upload/components/upload.form.js new file mode 100644 index 0000000..e35bfaa --- /dev/null +++ b/frontend/app/views/upload/components/upload.form.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { MenuButton, FileInput } from 'app/common' + +export default class UploadForm extends Component { + render() { + return ( + <div className='uploadForm'> + <MenuButton name="upload" label={false}> + <FileInput onChange={this.props.uploadActions.upload} /> + </MenuButton> + </div> + ) + } +} diff --git a/frontend/app/views/upload/components/upload.index.js b/frontend/app/views/upload/components/upload.index.js new file mode 100644 index 0000000..00cedc2 --- /dev/null +++ b/frontend/app/views/upload/components/upload.index.js @@ -0,0 +1,104 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { uploadUri, formatDateTime } from 'app/utils' +import { SmallMenuButton, Loader } from 'app/common' +import actions from 'app/actions' + +import UploadIndexOptions from './upload.indexOptions' +import UploadMenu from './upload.menu' + +// const { result, collectionLookup } = this.props + +export default class UploadIndex extends Component { + componentDidMount() { + this.fetch(false) + } + + componentDidUpdate(prevProps) { + if (this.props.upload.options.sort !== prevProps.upload.options.sort) { + this.fetch(false) + } + } + + fetch(load_more) { + const { options, index } = this.props.upload + const { order: index_order } = index + const [ sort, order ] = options.sort.split('-') + actions.upload.index({ + sort, order, limit: 50, offset: load_more ? index_order.length : 0, + }, load_more) + } + + render() { + const { searchOptions, uploadActions } = this.props + const { options } = this.props.upload + const { loading, lookup, order } = this.props.upload.index + if (loading) { + return ( + <section> + <UploadIndexOptions /> + <div className="row"> + {order && !!order.length && + <div className={'results ' + searchOptions.thumbnailSize}> + {order.map(id => <UploadItem key={id} data={lookup[id]} />)} + </div> + } + </div> + <Loader /> + </section> + ) + } + if (!lookup || !order.length) { + return ( + <section> + <UploadIndexOptions /> + <div className="row"> + <UploadMenu uploadActions={uploadActions} /> + <p className='gray'> + {"No uploads"} + </p> + </div> + </section> + ) + } + return ( + <section> + <UploadIndexOptions /> + <div className="row"> + <UploadMenu uploadActions={uploadActions} /> + <div className={'results ' + searchOptions.thumbnailSize}> + {order.map(id => <UploadItem key={id} data={lookup[id]} />)} + </div> + </div> + {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>} + </section> + ) + } +} + +const UploadItem = ({ data }) => { + // console.log(data) + const imageUri = uploadUri(data) + return ( + <div className='cell'> + <div className='img'> + <Link to={"/upload/" + data.id + "/show/"}> + <img src={imageUri} alt={"Uploaded image"} /> + </Link> + </div> + <div className='meta center'> + <div className='row'> + <SmallMenuButton name="search" href={"/search/upload/" + data.id + "/"} /> + </div> + <div> + {data.username} + </div> + <div> + {formatDateTime(data.created_at)} + </div> + </div> + </div> + ) +} + diff --git a/frontend/app/views/upload/components/upload.indexOptions.js b/frontend/app/views/upload/components/upload.indexOptions.js new file mode 100644 index 0000000..df266ef --- /dev/null +++ b/frontend/app/views/upload/components/upload.indexOptions.js @@ -0,0 +1,62 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import actions from 'app/actions' + +import { Select, Checkbox } from 'app/common' + +const thumbnailOptions = [ + { name: 'th', label: 'Thumbnails', }, + { name: 'sm', label: 'Small', }, + { name: 'md', label: 'Medium', }, + { name: 'lg', label: 'Large', }, + { name: 'orig', label: 'Original', }, +] + +const sortOptions = [ + { name: 'id-asc', label: 'Most recent' }, + { name: 'id-desc', label: 'Oldest first' }, + { name: 'username-asc', label: 'Username (A-Z)' }, + { name: 'username-desc', label: 'Username (Z-A)' }, + // { name: '-asc', label: '' }, + // { name: '-desc', label: '' }, + // { name: '-asc', label: '' }, + // { name: '-desc', label: '' }, + // { name: '-asc', label: '' }, + // { name: '-desc', label: '' }, +] + +class IndexOptions extends Component { + render() { + const { options, searchOptions } = this.props + return ( + <div className='row menubar'> + <div /> + <Select + name={'sort'} + options={sortOptions} + selected={options.sort} + onChange={actions.upload.updateOption} + /> + <Select + name={'thumbnailSize'} + options={thumbnailOptions} + selected={searchOptions.thumbnailSize} + onChange={actions.search.updateOption} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + options: state.upload.options, + searchOptions: state.search.options, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions) diff --git a/frontend/app/views/upload/components/upload.menu.js b/frontend/app/views/upload/components/upload.menu.js new file mode 100644 index 0000000..485d06f --- /dev/null +++ b/frontend/app/views/upload/components/upload.menu.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' + +import { MenuButton, FileInput } from 'app/common' + +import actions from 'app/actions' + +export default class UploadMenu extends Component { + render() { + return ( + <div className='menuButtons'> + <MenuButton name="upload"> + <FileInput onChange={this.props.uploadActions.upload} /> + </MenuButton> + </div> + ) + } +} diff --git a/frontend/app/views/upload/components/upload.show.js b/frontend/app/views/upload/components/upload.show.js new file mode 100644 index 0000000..f63bc5f --- /dev/null +++ b/frontend/app/views/upload/components/upload.show.js @@ -0,0 +1,70 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import actions from 'app/actions' +import { formatDate, formatTime, formatAge, uploadUri } from 'app/utils' +import { history } from 'app/store' +import { Loader, MenuButton } from 'app/common' + +class UploadShow extends Component { + componentDidMount() { + actions.upload.show(this.props.match.params.id) + } + + componentDidUpdate(prevProps) { + if (prevProps.match.params.id !== this.props.match.params.id) { + actions.upload.show(this.props.match.params.id) + } + } + + handleDestroy() { + const { res: data } = this.props.upload.show + if (confirm("Really delete this upload?")) { + actions.upload.destroy(data).then(() => { + history.push('/upload/') + }) + } + } + + render() { + const { show, destroy } = this.props.upload + if (show.loading || destroy.loading) { + return <Loader /> + } + if (!show.loading && !show.res || show.not_found) { + return <div className='gray'>Upload {this.props.match.params.id} not found</div> + } + const { res: data } = show + return ( + <section className="row uploadShow"> + <div className="menuButtons"> + <MenuButton name="delete" onClick={this.handleDestroy.bind(this)} /> + <MenuButton name="search" href={'/search/upload/' + data.id + '/'} /> + </div> + <div> + <img src={uploadUri(data)} /> + <div className='byline'> + {'Uploaded by '} + {data.username} + {' on '} + {formatDate(data.created_at)} + {' at '} + {formatTime(data.created_at)} + {'. '} + </div> + </div> + </section> + ) + } +} + +const mapStateToProps = state => ({ + upload: state.upload, +}) + +const mapDispatchToProps = dispatch => ({ + // searchActions: bindActionCreators({ ...searchActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(UploadShow) diff --git a/frontend/app/views/upload/upload.actions.js b/frontend/app/views/upload/upload.actions.js new file mode 100644 index 0000000..8739bf7 --- /dev/null +++ b/frontend/app/views/upload/upload.actions.js @@ -0,0 +1,14 @@ +import actions from 'app/actions' +import { session } from 'app/session' + +export const upload = file => dispatch => { + const formData = { + 'image': file, + 'username': session('username'), + } + // console.log(formData) + return actions.upload.upload(formData).then(data => { + // console.log(data.res) + return data.res + }) +} diff --git a/frontend/app/views/upload/upload.container.js b/frontend/app/views/upload/upload.container.js new file mode 100644 index 0000000..608f01a --- /dev/null +++ b/frontend/app/views/upload/upload.container.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import { Route, Link } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import './upload.css' + +import * as uploadActions from './upload.actions' + +import UploadIndex from './components/upload.index' +import UploadShow from './components/upload.show' + +class Container extends Component { + render() { + return ( + <div className='row upload'> + <div> + <Route exact path='/upload/:id/show/' component={UploadShow} /> + <UploadIndex {...this.props} /> + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ + upload: state.upload, + searchOptions: state.search.options, +}) + +const mapDispatchToProps = dispatch => ({ + uploadActions: bindActionCreators({ ...uploadActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Container) diff --git a/frontend/app/views/upload/upload.css b/frontend/app/views/upload/upload.css new file mode 100644 index 0000000..8d77754 --- /dev/null +++ b/frontend/app/views/upload/upload.css @@ -0,0 +1,10 @@ +.uploadShow img { + max-width: 30rem; + max-height: 20rem; +} +.upload { + height: 100%; +} +.upload > div:last-child { + flex: 1; +}
\ No newline at end of file diff --git a/frontend/app/views/upload/upload.reducer.js b/frontend/app/views/upload/upload.reducer.js new file mode 100644 index 0000000..1f39f6e --- /dev/null +++ b/frontend/app/views/upload/upload.reducer.js @@ -0,0 +1,21 @@ +import * as types from 'app/types' +import { session, getDefault, getDefaultInt } from 'app/session' + +import { crudState, crudReducer } from 'app/api/crud.reducer' + +const initialState = crudState('upload', { + options: { + sort: getDefault('upload.sort', 'id-desc'), + } +}) + +const reducer = crudReducer('upload') + +export default function uploadReducer(state = initialState, action) { + // console.log(action.type, action) + state = reducer(state, action) + switch (action.type) { + default: + return state + } +} |