glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

new metacode and edit metacode pages

Browse source
This commit is contained in:
Connor Turland 2018-03-09 19:17:56 -05:00
parent f8506e9763
commit 81bfd8eb28
4 changed files with 179 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apiProxyMiddleware.js
View file

@ -2,7 +2,7 @@ const request = require('request')
function apiProxyMiddleware (req, res, next) {
// 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()
}
const method = req.method.toLowerCase()

33
src/Metamaps/DataFetcher.js
View file

@ -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 = {}) {
return fetch(url, {
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) {
return fetch(url, {
credentials: 'same-origin',
@ -92,12 +108,11 @@ async function deleteMetacodeSet(id) {
}
async function createMetacode(name, color, icon) {
const res = await post(`/metacodes`, {
metacode: {
name,
color
}
})
const formdata = new FormData()
formdata.append('metacode[name]', name)
formdata.append('metacode[color]', color)
formdata.append('metacode[aws_icon]', icon)
const res = await postNoStringify(`/metacodes`, formdata)
if (!res.ok) {
throw new Error()
return
@ -107,7 +122,11 @@ async function createMetacode(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
}

84
src/routes/Admin/EditMetacode.js
View file

@ -1,10 +1,94 @@
import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router'
import AdminHeader from './AdminHeader'
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 = () => {
return (
<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 />
</div>
)

68
src/routes/Admin/NewMetacode.js
View file

@ -1,10 +1,78 @@
import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router'
import AdminHeader from './AdminHeader'
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 = () => {
return (
<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 />
</div>
)