94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Link, Redirect } from 'react-router-dom';
|
|
|
|
import { parseJsonOrDefault } from '../../helpers';
|
|
import ErrorBox from '../components/error-box';
|
|
import InfoBox from '../components/info-box';
|
|
import { dataFields } from '../data_fields';
|
|
import { User } from '../models/user';
|
|
|
|
import DataEntry from './data-components/data-entry';
|
|
import Sidebar from './sidebar';
|
|
import Categories from './categories';
|
|
|
|
interface MultiEditProps {
|
|
user?: User;
|
|
category: string;
|
|
dataString: string;
|
|
}
|
|
|
|
const MultiEdit: React.FC<MultiEditProps> = (props) => {
|
|
if (!props.user){
|
|
return <Redirect to="/sign-up.html" />;
|
|
}
|
|
if (props.category === 'like') {
|
|
// special case for likes
|
|
return (
|
|
<Sidebar>
|
|
<Categories mode={'view'} />
|
|
<section className='data-section'>
|
|
<header className={`section-header view ${props.category} background-${props.category}`}>
|
|
<h2 className="h2">Like me!</h2>
|
|
</header>
|
|
<form className='buttons-container'>
|
|
<InfoBox msg='Click all the buildings that you like and think contribute to the city!' />
|
|
|
|
<Link to='/view/like' className='btn btn-secondary'>Back to view</Link>
|
|
<Link to='/edit/like' className='btn btn-secondary'>Back to edit</Link>
|
|
</form>
|
|
</section>
|
|
</Sidebar>
|
|
);
|
|
}
|
|
|
|
let data = parseJsonOrDefault(props.dataString);
|
|
|
|
let error: string;
|
|
if(data == null) {
|
|
error = 'Invalid parameters supplied';
|
|
data = {};
|
|
} else if(Object.values(data).some(x => x == undefined)) {
|
|
error = 'Cannot copy empty values';
|
|
data = {};
|
|
}
|
|
|
|
return (
|
|
<Sidebar>
|
|
<Categories mode={'view'} />
|
|
<section className='data-section'>
|
|
<header className={`section-header view ${props.category} background-${props.category}`}>
|
|
<h2 className="h2">Copy {props.category} data</h2>
|
|
</header>
|
|
<div className="section-body">
|
|
<form>
|
|
{
|
|
error ?
|
|
<ErrorBox msg={error} /> :
|
|
<InfoBox msg='Click buildings one at a time to colour using the data below' />
|
|
}
|
|
{
|
|
Object.keys(data).map((key => {
|
|
const info = dataFields[key] || {};
|
|
return (
|
|
<DataEntry
|
|
title={info.title || `Unknown field (${key})`}
|
|
slug={key}
|
|
disabled={true}
|
|
value={data[key]}
|
|
/>
|
|
);
|
|
}))
|
|
}
|
|
</form>
|
|
<form className='buttons-container'>
|
|
<Link to={`/view/${props.category}`} className='btn btn-secondary'>Back to view</Link>
|
|
<Link to={`/edit/${props.category}`} className='btn btn-secondary'>Back to edit</Link>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</Sidebar>
|
|
);
|
|
};
|
|
|
|
export default MultiEdit;
|