diff options
Diffstat (limited to 'frontend/views/page/components/tile.form.js')
| -rw-r--r-- | frontend/views/page/components/tile.form.js | 147 |
1 files changed, 87 insertions, 60 deletions
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js index e5eb14d..31d49e3 100644 --- a/frontend/views/page/components/tile.form.js +++ b/frontend/views/page/components/tile.form.js @@ -6,6 +6,7 @@ import { Link } from 'react-router-dom' import { session } from '../../../session' import { TextInput, NumberInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' +import { preloadImage } from '../../../util' import * as tileActions from '../../tile/tile.actions' @@ -30,20 +31,20 @@ const REQUIRED_KEYS = { } // 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) => ({ - id: 'new', settings: { ...newPosition(), is_tiled: false, - url: "https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg", + url: "", }, type: 'image', + target_page_id: null, ...data, }) const newText = (data) => ({ - id: 'new', settings: { ...newPosition(), content: "What is up... I have no idea actually", @@ -52,6 +53,7 @@ const newText = (data) => ({ height: 0, }, type: 'text', + target_page_id: null, ...data, }) @@ -62,6 +64,11 @@ const newPosition = () => ({ align: "center_center", }) +const TYPE_CONSTRUCTORS = { + image: newImage, + text: newText, +} + class TileForm extends Component { state = { title: "", @@ -70,7 +77,7 @@ class TileForm extends Component { } componentDidMount() { - const { graph, page, isNew } = this.props + const { graph, page, isNew, initialData } = this.props const title = isNew ? 'new tile' : 'editing tile' const submitTitle = isNew ? "Create Tile" : "Save Changes" this.setState({ @@ -78,45 +85,36 @@ class TileForm extends Component { submitTitle, errorFields: new Set([]), }) - this.props.tileActions.updateTemporaryTile({ - ...this.props.data, - graph_id: graph.id, - page_id: page.id, - }) + if (isNew) { + this.props.tileActions.updateTemporaryTile(newImage({ + id: "new", + graph_id: graph.show.res.id, + page_id: page.show.res.id, + })) + } else { + this.props.tileActions.updateTemporaryTile({ ...initialData }) + } } handleChange(e) { const { name, value } = e.target this.clearErrorField(name) this.props.tileActions.updateTemporaryTile({ - ...this.props.data, + ...this.props.temporaryTile, [name]: value, }) } handleTypeChange(type) { - const { graph, page } = this.props - const { data } = this.state - let tileReferences = { - id: data.id, - graph_id: data.graph_id, - page_id: data.page_id, - } - switch(type) { - case 'image': - newData = newImage(tileReferences) - newData.settings.align = data.settings.align - break - case 'text': - newData = newText(tileReferences) - newData.settings.align = data.settings.align - break - } - this.setState({ errorFields: new Set([]) }) - this.props.tileActions.updateTemporaryTile({ - ...this.props.temporaryTile, - [name]: value, + 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.setState({ errorFields: new Set([]) }) + this.props.tileActions.updateTemporaryTile(newTile) } handleSettingsChange(e) { @@ -153,6 +151,36 @@ class TileForm extends Component { }) } + 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)) { @@ -165,12 +193,11 @@ class TileForm extends Component { handleSubmit(e) { e.preventDefault() - const { isNew, onSubmit } = this.props - const { data } = this.state - const requiredKeys = REQUIRED_KEYS[data.type] - const validKeys = "graph_id username settings".split(" ") - const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) - const errorFields = requiredKeys.filter(key => !validData[key]) + const { isNew, temporaryTile, onSubmit } = 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) this.setState({ errorFields: new Set(errorFields) }) @@ -178,8 +205,9 @@ class TileForm extends Component { if (isNew) { // side effect: set username if we're creating a new tile // session.set('username', data.username) + delete validData.id } else { - validData.id = data.id + validData.id = temporaryTile.id } console.log('submit', validData) onSubmit(validData) @@ -187,9 +215,9 @@ class TileForm extends Component { } render() { - const { temporaryTile: data, isNew } = this.props + const { temporaryTile, isNew } = this.props const { title, submitTitle, errorFields } = this.state - if (!data) return + if (!temporaryTile || !temporaryTile.settings) return <div className='box' /> return ( <div className='box'> <h1>{title}</h1> @@ -197,25 +225,25 @@ class TileForm extends Component { <div className="row selects"> <Select name='type' - selected={data.type} + selected={temporaryTile.type} options={SELECT_TYPES} title='' onChange={this.handleSelect.bind(this)} /> <Select name='align' - selected={data.settings.align} + selected={temporaryTile.settings.align} options={ALIGNMENTS} title='' - onChange={this.handleSettingsSelect.bind(this)} + onChange={this.handleAlignment.bind(this)} /> </div> {this.renderPositionInfo()} - {data.type === 'image' + {temporaryTile.type === 'image' ? this.renderImageForm() - : data.type === 'text' + : temporaryTile.type === 'text' ? this.renderTextForm() : ""} @@ -235,23 +263,22 @@ class TileForm extends Component { } renderPositionInfo() { - const { temporaryTile: data } = this.props - const { x, y, width, height, rotation, scale } = data.settings - // console.log(this.state.data.settings) + const { temporaryTile } = this.props + const { x, y, width, height, rotation, scale } = temporaryTile.settings return ( <div className='position'> - {''}{parseInt(x)}{', '} - {''}{parseInt(y)}{' '} + {parseInt(x)}{', '} + {parseInt(y)}{' '} {parseInt(width)}{'x'}{parseInt(height)}{' '} - {parseInt(rotation * 180 / Math.PI)}{'\u00B0 '} - {'x'}{scale.toFixed(0.2)} + {rotation === 0 || <span>{parseInt(rotation * 180 / Math.PI)}{'\u00B0 '}</span>} + {scale === 1 || <span>{'x'}{scale.toFixed(0.2)}</span>} </div> ) } renderImageForm() { // const { isNew } = this.props - const { temporaryTile: data } = this.props + const { temporaryTile } = this.props const { errorFields } = this.state return ( <div> @@ -260,15 +287,15 @@ class TileForm extends Component { placeholder='http://' name="url" required - data={data.settings} + data={temporaryTile.settings} error={errorFields.has('url')} - onChange={this.handleSettingsChange.bind(this)} + onChange={this.handleImageChange.bind(this)} autoComplete="off" /> <Checkbox label="Tiled" name="is_tiled" - data={data.settings} + data={temporaryTile.settings} onChange={this.handleSettingsSelect.bind(this)} autoComplete="off" /> @@ -278,7 +305,7 @@ class TileForm extends Component { } renderTextForm() { - const { temporaryTile: data } = this.props + const { temporaryTile } = this.props const { errorFields } = this.state return ( <div> @@ -286,7 +313,7 @@ class TileForm extends Component { title="" name="content" required - data={data.settings} + data={temporaryTile.settings} error={errorFields.has('content')} onChange={this.handleSettingsChange.bind(this)} autoComplete="off" @@ -295,7 +322,7 @@ class TileForm extends Component { <NumberInput title="Width" name="width" - data={data.settings} + data={temporaryTile.settings} min={0} max={1200} error={errorFields.has('width')} @@ -305,7 +332,7 @@ class TileForm extends Component { <NumberInput title="Height" name="height" - data={data.settings} + data={temporaryTile.settings} min={0} max={1200} error={errorFields.has('height')} |