new metacode and edit metacode pages
This commit is contained in:
parent
f8506e9763
commit
81bfd8eb28
4 changed files with 179 additions and 8 deletions
|
@ -2,7 +2,7 @@ const request = require('request')
|
||||||
|
|
||||||
function apiProxyMiddleware (req, res, next) {
|
function apiProxyMiddleware (req, res, next) {
|
||||||
// TODO: tidy this up!
|
// TODO: tidy this up!
|
||||||
if (!(req.xhr || req.headers['Content-Type'] === 'application/json' || req.originalUrl.indexOf('.json') > -1 || req.method !== 'GET')) {
|
if (!(req.xhr || req.headers['content-type'] === 'application/json' || req.originalUrl.indexOf('.json') > -1 || req.method !== 'GET')) {
|
||||||
return next()
|
return next()
|
||||||
}
|
}
|
||||||
const method = req.method.toLowerCase()
|
const method = req.method.toLowerCase()
|
||||||
|
|
|
@ -18,6 +18,14 @@ function post(url, data = {}) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function postNoStringify(url, data = {}) {
|
||||||
|
return fetch(url, {
|
||||||
|
credentials: 'same-origin',
|
||||||
|
method: 'POST',
|
||||||
|
body: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
function put(url, data = {}) {
|
function put(url, data = {}) {
|
||||||
return fetch(url, {
|
return fetch(url, {
|
||||||
credentials: 'same-origin',
|
credentials: 'same-origin',
|
||||||
|
@ -29,6 +37,14 @@ function put(url, data = {}) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function putNoStringify(url, data = {}) {
|
||||||
|
return fetch(url, {
|
||||||
|
credentials: 'same-origin',
|
||||||
|
method: 'PUT',
|
||||||
|
body: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
function deleteReq(url) {
|
function deleteReq(url) {
|
||||||
return fetch(url, {
|
return fetch(url, {
|
||||||
credentials: 'same-origin',
|
credentials: 'same-origin',
|
||||||
|
@ -92,12 +108,11 @@ async function deleteMetacodeSet(id) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createMetacode(name, color, icon) {
|
async function createMetacode(name, color, icon) {
|
||||||
const res = await post(`/metacodes`, {
|
const formdata = new FormData()
|
||||||
metacode: {
|
formdata.append('metacode[name]', name)
|
||||||
name,
|
formdata.append('metacode[color]', color)
|
||||||
color
|
formdata.append('metacode[aws_icon]', icon)
|
||||||
}
|
const res = await postNoStringify(`/metacodes`, formdata)
|
||||||
})
|
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
throw new Error()
|
throw new Error()
|
||||||
return
|
return
|
||||||
|
@ -107,7 +122,11 @@ async function createMetacode(name, color, icon) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateMetacode(id, name, color, icon) {
|
async function updateMetacode(id, name, color, icon) {
|
||||||
const res = await put(`/metacodes/${id}`)
|
const formdata = new FormData()
|
||||||
|
formdata.append('metacode[name]', name)
|
||||||
|
formdata.append('metacode[color]', color)
|
||||||
|
if (icon) formdata.append('metacode[aws_icon]', icon)
|
||||||
|
const res = await putNoStringify(`/metacodes/${id}`, formdata)
|
||||||
return res.ok
|
return res.ok
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,94 @@
|
||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
|
import { Link, browserHistory } from 'react-router'
|
||||||
import AdminHeader from './AdminHeader'
|
import AdminHeader from './AdminHeader'
|
||||||
|
|
||||||
class EditMetacode extends Component {
|
class EditMetacode extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
existingIcon: null,
|
||||||
|
icon: null,
|
||||||
|
name: '',
|
||||||
|
color: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { metacodes } = this.props
|
||||||
|
const id = parseInt(this.props.params.id, 10)
|
||||||
|
const metacode = metacodes.find(m => m.id === id)
|
||||||
|
this.setState({
|
||||||
|
existingIcon: metacode.icon,
|
||||||
|
name: metacode.name,
|
||||||
|
color: metacode.color
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
validate = (event) => {
|
||||||
|
if (this.state.name.length === 0) {
|
||||||
|
event.preventDefault()
|
||||||
|
window.alert('A name must be provided')
|
||||||
|
} else if (!this.state.color.startsWith('#')) {
|
||||||
|
event.preventDefault()
|
||||||
|
window.alert('Please begin color with a # symbol')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateForKey = (key) => event => this.setState({[key]: event.target.value})
|
||||||
|
|
||||||
|
handleFile = (event) => {
|
||||||
|
this.setState({
|
||||||
|
icon: event.target.files[0]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit = async (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
const { name, color, icon } = this.state
|
||||||
|
const { updateMetacode, params: { id } } = this.props
|
||||||
|
try {
|
||||||
|
const result = await updateMetacode(id, name, color, icon)
|
||||||
|
browserHistory.push(`/metacodes`)
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
window.alert('There was an error updating the metacode, check the console')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render = () => {
|
render = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<div id="yield">
|
||||||
|
<div className="centerContent">
|
||||||
|
<form onSubmit={this.onSubmit} className="edit_metacode" id="edit_metacode" encType="multipart/form-data" acceptCharset="UTF-8">
|
||||||
|
<input name="utf8" type="hidden" value="✓" />
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="metacode_name">Name</label>
|
||||||
|
<input value={this.state.name} onChange={this.updateForKey('name')} type="text" name="metacode[name]" id="metacode_name" />
|
||||||
|
<div className="clearfloat"></div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label>Current Icon</label>
|
||||||
|
<img width="96" src={this.state.existingIcon} alt={this.state.name} />
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="metacode_Icon">Replace Icon</label>
|
||||||
|
<input type="hidden" name="metacode[manual_icon]" id="metacode_manual_icon" />
|
||||||
|
<input onChange={this.handleFile} type="file" name="metacode[aws_icon]" id="metacode_aws_icon" />
|
||||||
|
<div className="clearfloat"></div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="metacode_color">Color (hex with # sign)</label>
|
||||||
|
<input value={this.state.color} onChange={this.updateForKey('color')} type="text" name="metacode[color]" id="metacode_color" />
|
||||||
|
<div className="clearfloat"></div>
|
||||||
|
</div>
|
||||||
|
<div className="actions">
|
||||||
|
<Link className="button" to="/metacodes">Cancel</Link>
|
||||||
|
<input onClick={this.validate} type="submit" name="commit" value="Update Metacode" className="add" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<AdminHeader />
|
<AdminHeader />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,10 +1,78 @@
|
||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
|
import { Link, browserHistory } from 'react-router'
|
||||||
import AdminHeader from './AdminHeader'
|
import AdminHeader from './AdminHeader'
|
||||||
|
|
||||||
class NewMetacode extends Component {
|
class NewMetacode extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
icon: null,
|
||||||
|
name: '',
|
||||||
|
color: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
validate = (event) => {
|
||||||
|
if (this.state.name.length === 0) {
|
||||||
|
event.preventDefault()
|
||||||
|
window.alert('A name must be provided')
|
||||||
|
} else if (!this.state.color.startsWith('#')) {
|
||||||
|
event.preventDefault()
|
||||||
|
window.alert('Please begin color with a # symbol')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateForKey = (key) => event => this.setState({[key]: event.target.value})
|
||||||
|
|
||||||
|
handleFile = (event) => {
|
||||||
|
this.setState({
|
||||||
|
icon: event.target.files[0]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit = async (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
const { name, color, icon } = this.state
|
||||||
|
const { createMetacode } = this.props
|
||||||
|
try {
|
||||||
|
const result = await createMetacode(name, color, icon)
|
||||||
|
browserHistory.push(`/metacodes`)
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
window.alert('There was an error creating the metacode, check the console')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render = () => {
|
render = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<div id="yield">
|
||||||
|
<div className="centerContent">
|
||||||
|
<form onSubmit={this.onSubmit} className="new_metacode" id="new_metacode" encType="multipart/form-data" acceptCharset="UTF-8">
|
||||||
|
<input name="utf8" type="hidden" value="✓" />
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="metacode_name">Name</label>
|
||||||
|
<input value={this.state.name} onChange={this.updateForKey('name')} type="text" name="metacode[name]" id="metacode_name" />
|
||||||
|
<div className="clearfloat"></div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="metacode_Icon">Icon</label>
|
||||||
|
<input type="hidden" name="metacode[manual_icon]" id="metacode_manual_icon" />
|
||||||
|
<input onChange={this.handleFile} type="file" name="metacode[aws_icon]" id="metacode_aws_icon" />
|
||||||
|
<div className="clearfloat"></div>
|
||||||
|
</div>
|
||||||
|
<div className="field">
|
||||||
|
<label htmlFor="metacode_color">Color (hex with # sign)</label>
|
||||||
|
<input value={this.state.color} onChange={this.updateForKey('color')} type="text" name="metacode[color]" id="metacode_color" />
|
||||||
|
<div className="clearfloat"></div>
|
||||||
|
</div>
|
||||||
|
<div className="actions">
|
||||||
|
<Link className="button" to="/metacodes">Cancel</Link>
|
||||||
|
<input onClick={this.validate} type="submit" name="commit" value="Create Metacode" className="add" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<AdminHeader />
|
<AdminHeader />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue