From ef78bc6a084f92b4794e987b5832240d85b6479e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 22 Jul 2020 14:05:15 +0200 Subject: refactor app using babel module-resolver --- animism-align/frontend/app/actions.js | 30 ++ animism-align/frontend/app/api/crud.actions.js | 51 +++ animism-align/frontend/app/api/crud.fetch.js | 105 ++++++ animism-align/frontend/app/api/crud.reducer.js | 194 +++++++++++ animism-align/frontend/app/api/crud.types.js | 35 ++ animism-align/frontend/app/api/crud.upload.js | 115 +++++++ animism-align/frontend/app/api/index.js | 17 + animism-align/frontend/app/common/app.css | 354 ++++++++++++++++++++ .../app/common/copyToClipboardButton.component.js | 24 ++ animism-align/frontend/app/common/fonts.css | 55 +++ .../frontend/app/common/form.component.js | 222 ++++++++++++ animism-align/frontend/app/common/form.css | 327 ++++++++++++++++++ .../frontend/app/common/imageCrop.component.js | 41 +++ animism-align/frontend/app/common/index.js | 31 ++ animism-align/frontend/app/common/loader.css | 125 +++++++ .../frontend/app/common/menubutton.component.js | 133 ++++++++ .../frontend/app/common/miscellaneous.component.js | 82 +++++ .../frontend/app/common/miscellaneous.css | 18 + .../frontend/app/common/modal.component.js | 9 + animism-align/frontend/app/common/modal.css | 20 ++ .../frontend/app/common/slider.component.js | 115 +++++++ .../frontend/app/common/table.component.js | 128 +++++++ animism-align/frontend/app/common/table.css | 96 ++++++ .../frontend/app/common/tableIndex.component.js | 129 +++++++ animism-align/frontend/app/common/upload.css | 26 ++ .../frontend/app/common/upload.helpers.js | 192 +++++++++++ .../frontend/app/common/uploadImage.component.js | 74 ++++ animism-align/frontend/app/constants.js | 34 ++ animism-align/frontend/app/router.js | 42 +++ animism-align/frontend/app/session.js | 19 ++ animism-align/frontend/app/store.js | 52 +++ animism-align/frontend/app/types.js | 31 ++ animism-align/frontend/app/utils/index.js | 371 +++++++++++++++++++++ .../frontend/app/views/align/align.actions.js | 93 ++++++ .../frontend/app/views/align/align.container.js | 29 ++ animism-align/frontend/app/views/align/align.css | 215 ++++++++++++ .../frontend/app/views/align/align.reducer.js | 85 +++++ .../frontend/app/views/align/align.util.js | 65 ++++ .../components/annotations/annotation.form.js | 182 ++++++++++ .../components/annotations/annotation.index.js | 126 +++++++ .../annotationForms/annotationForm.image.js | 27 ++ .../annotationForms/annotationForm.video.js | 27 ++ .../annotations/annotationForms/index.js | 12 + .../annotationTypes/annotationTypes.image.js | 33 ++ .../annotationTypes/annotationTypes.text.js | 49 +++ .../annotationTypes/annotationTypes.util.js | 28 ++ .../annotationTypes/annotationTypes.video.js | 33 ++ .../annotations/annotationTypes/index.js | 22 ++ .../components/player/playButton.component.js | 31 ++ .../align/components/timeline/cursor.component.js | 26 ++ .../components/timeline/playCursor.component.js | 36 ++ .../align/components/timeline/ticks.component.js | 88 +++++ .../components/timeline/waveform.component.js | 101 ++++++ .../align/containers/annotations.container.js | 40 +++ .../app/views/align/containers/script.container.js | 33 ++ .../views/align/containers/timeline.container.js | 171 ++++++++++ .../app/views/annotation/annotation.reducer.js | 20 ++ .../frontend/app/views/audio/audio.actions.js | 40 +++ .../frontend/app/views/audio/audio.reducer.js | 30 ++ animism-align/frontend/app/views/index.js | 4 + .../app/views/media/components/media.form.js | 270 +++++++++++++++ .../app/views/media/components/media.formImage.js | 172 ++++++++++ .../media/components/media.formImageSelection.js | 213 ++++++++++++ .../app/views/media/components/media.formVideo.js | 111 ++++++ .../views/media/components/media.indexOptions.js | 65 ++++ .../app/views/media/components/media.menu.js | 58 ++++ .../app/views/media/containers/media.edit.js | 57 ++++ .../app/views/media/containers/media.index.js | 115 +++++++ .../app/views/media/containers/media.new.js | 81 +++++ .../frontend/app/views/media/media.actions.js | 9 + .../frontend/app/views/media/media.container.js | 38 +++ animism-align/frontend/app/views/media/media.css | 70 ++++ .../frontend/app/views/media/media.reducer.js | 22 ++ .../frontend/app/views/nav/header.component.js | 42 +++ animism-align/frontend/app/views/nav/nav.css | 73 ++++ .../views/paragraph/components/paragraph.form.js | 87 +++++ .../views/paragraph/components/paragraph.list.js | 165 +++++++++ .../paragraph/components/paragraphTypes/index.js | 22 ++ .../paragraphTypes/paragraphTypes.image.js | 17 + .../paragraphTypes/paragraphTypes.text.js | 35 ++ .../paragraphTypes/paragraphTypes.video.js | 19 ++ .../containers/paragraphEditor.container.js | 85 +++++ .../app/views/paragraph/paragraph.container.js | 69 ++++ .../frontend/app/views/paragraph/paragraph.css | 93 ++++++ .../app/views/paragraph/paragraph.reducer.js | 20 ++ .../frontend/app/views/site/component.template.js | 28 ++ .../frontend/app/views/site/site.actions.js | 14 + .../frontend/app/views/site/site.reducer.js | 24 ++ .../app/views/upload/components/upload.form.js | 16 + .../app/views/upload/components/upload.index.js | 98 ++++++ .../views/upload/components/upload.indexOptions.js | 61 ++++ .../app/views/upload/components/upload.menu.js | 18 + .../app/views/upload/components/upload.show.js | 69 ++++ .../frontend/app/views/upload/upload.actions.js | 18 + .../frontend/app/views/upload/upload.container.js | 36 ++ animism-align/frontend/app/views/upload/upload.css | 182 ++++++++++ .../frontend/app/views/upload/upload.reducer.js | 22 ++ 97 files changed, 7537 insertions(+) create mode 100644 animism-align/frontend/app/actions.js create mode 100644 animism-align/frontend/app/api/crud.actions.js create mode 100644 animism-align/frontend/app/api/crud.fetch.js create mode 100644 animism-align/frontend/app/api/crud.reducer.js create mode 100644 animism-align/frontend/app/api/crud.types.js create mode 100644 animism-align/frontend/app/api/crud.upload.js create mode 100644 animism-align/frontend/app/api/index.js create mode 100644 animism-align/frontend/app/common/app.css create mode 100644 animism-align/frontend/app/common/copyToClipboardButton.component.js create mode 100644 animism-align/frontend/app/common/fonts.css create mode 100644 animism-align/frontend/app/common/form.component.js create mode 100644 animism-align/frontend/app/common/form.css create mode 100644 animism-align/frontend/app/common/imageCrop.component.js create mode 100644 animism-align/frontend/app/common/index.js create mode 100644 animism-align/frontend/app/common/loader.css create mode 100644 animism-align/frontend/app/common/menubutton.component.js create mode 100644 animism-align/frontend/app/common/miscellaneous.component.js create mode 100644 animism-align/frontend/app/common/miscellaneous.css create mode 100644 animism-align/frontend/app/common/modal.component.js create mode 100644 animism-align/frontend/app/common/modal.css create mode 100644 animism-align/frontend/app/common/slider.component.js create mode 100644 animism-align/frontend/app/common/table.component.js create mode 100644 animism-align/frontend/app/common/table.css create mode 100644 animism-align/frontend/app/common/tableIndex.component.js create mode 100644 animism-align/frontend/app/common/upload.css create mode 100644 animism-align/frontend/app/common/upload.helpers.js create mode 100644 animism-align/frontend/app/common/uploadImage.component.js create mode 100644 animism-align/frontend/app/constants.js create mode 100644 animism-align/frontend/app/router.js create mode 100644 animism-align/frontend/app/session.js create mode 100644 animism-align/frontend/app/store.js create mode 100644 animism-align/frontend/app/types.js create mode 100644 animism-align/frontend/app/utils/index.js create mode 100644 animism-align/frontend/app/views/align/align.actions.js create mode 100644 animism-align/frontend/app/views/align/align.container.js create mode 100644 animism-align/frontend/app/views/align/align.css create mode 100644 animism-align/frontend/app/views/align/align.reducer.js create mode 100644 animism-align/frontend/app/views/align/align.util.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotation.form.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotation.index.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js create mode 100644 animism-align/frontend/app/views/align/components/player/playButton.component.js create mode 100644 animism-align/frontend/app/views/align/components/timeline/cursor.component.js create mode 100644 animism-align/frontend/app/views/align/components/timeline/playCursor.component.js create mode 100644 animism-align/frontend/app/views/align/components/timeline/ticks.component.js create mode 100644 animism-align/frontend/app/views/align/components/timeline/waveform.component.js create mode 100644 animism-align/frontend/app/views/align/containers/annotations.container.js create mode 100644 animism-align/frontend/app/views/align/containers/script.container.js create mode 100644 animism-align/frontend/app/views/align/containers/timeline.container.js create mode 100644 animism-align/frontend/app/views/annotation/annotation.reducer.js create mode 100644 animism-align/frontend/app/views/audio/audio.actions.js create mode 100644 animism-align/frontend/app/views/audio/audio.reducer.js create mode 100644 animism-align/frontend/app/views/index.js create mode 100644 animism-align/frontend/app/views/media/components/media.form.js create mode 100644 animism-align/frontend/app/views/media/components/media.formImage.js create mode 100644 animism-align/frontend/app/views/media/components/media.formImageSelection.js create mode 100644 animism-align/frontend/app/views/media/components/media.formVideo.js create mode 100644 animism-align/frontend/app/views/media/components/media.indexOptions.js create mode 100644 animism-align/frontend/app/views/media/components/media.menu.js create mode 100644 animism-align/frontend/app/views/media/containers/media.edit.js create mode 100644 animism-align/frontend/app/views/media/containers/media.index.js create mode 100644 animism-align/frontend/app/views/media/containers/media.new.js create mode 100644 animism-align/frontend/app/views/media/media.actions.js create mode 100644 animism-align/frontend/app/views/media/media.container.js create mode 100644 animism-align/frontend/app/views/media/media.css create mode 100644 animism-align/frontend/app/views/media/media.reducer.js create mode 100644 animism-align/frontend/app/views/nav/header.component.js create mode 100644 animism-align/frontend/app/views/nav/nav.css create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraph.form.js create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraph.list.js create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.image.js create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js create mode 100644 animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js create mode 100644 animism-align/frontend/app/views/paragraph/paragraph.container.js create mode 100644 animism-align/frontend/app/views/paragraph/paragraph.css create mode 100644 animism-align/frontend/app/views/paragraph/paragraph.reducer.js create mode 100644 animism-align/frontend/app/views/site/component.template.js create mode 100644 animism-align/frontend/app/views/site/site.actions.js create mode 100644 animism-align/frontend/app/views/site/site.reducer.js create mode 100644 animism-align/frontend/app/views/upload/components/upload.form.js create mode 100644 animism-align/frontend/app/views/upload/components/upload.index.js create mode 100644 animism-align/frontend/app/views/upload/components/upload.indexOptions.js create mode 100644 animism-align/frontend/app/views/upload/components/upload.menu.js create mode 100644 animism-align/frontend/app/views/upload/components/upload.show.js create mode 100644 animism-align/frontend/app/views/upload/upload.actions.js create mode 100644 animism-align/frontend/app/views/upload/upload.container.js create mode 100644 animism-align/frontend/app/views/upload/upload.css create mode 100644 animism-align/frontend/app/views/upload/upload.reducer.js (limited to 'animism-align/frontend/app') diff --git a/animism-align/frontend/app/actions.js b/animism-align/frontend/app/actions.js new file mode 100644 index 0000000..8fa780e --- /dev/null +++ b/animism-align/frontend/app/actions.js @@ -0,0 +1,30 @@ +import { bindActionCreators } from 'redux' +// import { actions as crudActions } from 'app/api' +import { crud_actions } from 'app/api/crud.actions' + +import * as audioActions from 'app/views/audio/audio.actions' +import * as alignActions from 'app/views/align/align.actions' +import * as siteActions from 'app/views/site/site.actions' + +import { store } from 'app/store' + +const crudActions = [ + 'paragraph', + 'annotation', + 'upload', + 'media', +].reduce((a,b) => (a[b] = crud_actions(b)) && a, {}) + +export default + Object.keys(crudActions) + .map(a => [a, crudActions[a]]) + .concat([ + ['site', siteActions], + ['align', alignActions], + ['audio', audioActions], + ]) + .map(p => [p[0], bindActionCreators(p[1], store.dispatch)]) + .concat([ + // ['socket', socketActions], + ]) + .reduce((a,b) => (a[b[0]] = b[1])&&a,{}) diff --git a/animism-align/frontend/app/api/crud.actions.js b/animism-align/frontend/app/api/crud.actions.js new file mode 100644 index 0000000..86c2948 --- /dev/null +++ b/animism-align/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/animism-align/frontend/app/api/crud.fetch.js b/animism-align/frontend/app/api/crud.fetch.js new file mode 100644 index 0000000..c88225e --- /dev/null +++ b/animism-align/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/animism-align/frontend/app/api/crud.reducer.js b/animism-align/frontend/app/api/crud.reducer.js new file mode 100644 index 0000000..3ee4974 --- /dev/null +++ b/animism-align/frontend/app/api/crud.reducer.js @@ -0,0 +1,194 @@ +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) ? { + ...state.show.res, + ...action.data.res, + } : state.show + } + case crud_type.index_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/animism-align/frontend/app/api/crud.types.js b/animism-align/frontend/app/api/crud.types.js new file mode 100644 index 0000000..ac9b3f3 --- /dev/null +++ b/animism-align/frontend/app/api/crud.types.js @@ -0,0 +1,35 @@ +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/animism-align/frontend/app/api/crud.upload.js b/animism-align/frontend/app/api/crud.upload.js new file mode 100644 index 0000000..b4d9d4e --- /dev/null +++ b/animism-align/frontend/app/api/crud.upload.js @@ -0,0 +1,115 @@ +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() + if (!data.tag) { + data.tag = 'misc' + } + + Object.keys(data).forEach(key => { + if (key.indexOf('__') !== -1) return + if (key === 'id') return + const fn_key = '__' + key + '_filename' + if (fn_key in data) { + fd.append(key, data[key], data[fn_key]) + } else { + 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/animism-align/frontend/app/api/index.js b/animism-align/frontend/app/api/index.js new file mode 100644 index 0000000..f4be118 --- /dev/null +++ b/animism-align/frontend/app/api/index.js @@ -0,0 +1,17 @@ +// import { crud_actions } from 'api/crud.actions' +// import * as utils from 'app/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 '../../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 { utils } diff --git a/animism-align/frontend/app/common/app.css b/animism-align/frontend/app/common/app.css new file mode 100644 index 0000000..362b933 --- /dev/null +++ b/animism-align/frontend/app/common/app.css @@ -0,0 +1,354 @@ +* { 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: row; + 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 { + background: #324; + padding: 0.5rem; + justify-content: flex-end; + margin-bottom: 1rem; +} +.menubar > :first-child { + flex: 1; +} + +/* lists */ + +ul { + margin: 0.75rem 0; +} +li { + line-height: 1.5; +} + +/* 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: 3.5rem; + min-height: 18rem; + padding: 0 1.0rem 0 1.0rem; +} +.menuButton { + position: relative; + text-align: center; + text-transform: uppercase; + font-size: 0.625rem; + color: #ddd; + 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: #101; + 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: #000; + border-color: #fff; +} +.menuButton:hover svg { + fill: #fff; +} + +.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/animism-align/frontend/app/common/copyToClipboardButton.component.js b/animism-align/frontend/app/common/copyToClipboardButton.component.js new file mode 100644 index 0000000..0defba5 --- /dev/null +++ b/animism-align/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 ( + + ) + } +} diff --git a/animism-align/frontend/app/common/fonts.css b/animism-align/frontend/app/common/fonts.css new file mode 100644 index 0000000..c782885 --- /dev/null +++ b/animism-align/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/animism-align/frontend/app/common/form.component.js b/animism-align/frontend/app/common/form.component.js new file mode 100644 index 0000000..c727544 --- /dev/null +++ b/animism-align/frontend/app/common/form.component.js @@ -0,0 +1,222 @@ +import React, { Component } from 'react' +import { courtesyS } from 'app/utils' + +export const TextInput = props => ( + +) + +export const LabelDescription = props => ( + +) + +export const NumberInput = props => ( + +) + +export const ColorInput = props => ( + +) + +export const TextArea = props => ( +