UI Enhancements (#985)
* Single import of basic styles * A little bit redesigned header * Specified min resolution 1280x768 * Getting a job instance * Improved handling when task doesn't existmain
Boris Sekachev
6 years ago
committed by
Nikita Manovich
parent
216416703a
commit
f57586a03c
@ -1,9 +1,83 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
|
||||
import AnnotationPageComponent from '../../components/annotation-page/annotation-page';
|
||||
import { getTasksAsync } from '../../actions/tasks-actions';
|
||||
|
||||
export default function AnnotationPageContainer() {
|
||||
import {
|
||||
CombinedState,
|
||||
Task,
|
||||
} from '../../reducers/interfaces';
|
||||
|
||||
type OwnProps = RouteComponentProps<{
|
||||
tid: string;
|
||||
jid: string;
|
||||
}>;
|
||||
|
||||
interface StateToProps {
|
||||
jobInstance: any | null | undefined;
|
||||
fetching: boolean;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
getJob(): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
|
||||
const { tasks } = state;
|
||||
const {
|
||||
gettingQuery,
|
||||
current,
|
||||
} = tasks;
|
||||
const { params } = own.match;
|
||||
const taskID = +params.tid;
|
||||
const jobID = +params.jid;
|
||||
|
||||
const filteredTasks = current
|
||||
.filter((_task: Task) => _task.instance.id === taskID);
|
||||
const task = filteredTasks[0] || (gettingQuery.id === taskID || Number.isNaN(taskID)
|
||||
? undefined : null);
|
||||
|
||||
const job = task ? task.instance.jobs
|
||||
.filter((_job: any) => _job.id === jobID)[0] : task;
|
||||
|
||||
return {
|
||||
jobInstance: job,
|
||||
fetching: tasks.fetching,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any, own: OwnProps): DispatchToProps {
|
||||
const { params } = own.match;
|
||||
const taskID = +params.tid;
|
||||
|
||||
return {
|
||||
getJob(): void {
|
||||
dispatch(getTasksAsync({
|
||||
id: taskID,
|
||||
page: 1,
|
||||
search: null,
|
||||
owner: null,
|
||||
assignee: null,
|
||||
name: null,
|
||||
status: null,
|
||||
mode: null,
|
||||
}));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function AnnotationPageContainer(props: StateToProps & DispatchToProps): JSX.Element {
|
||||
return (
|
||||
<AnnotationPageComponent/>
|
||||
<AnnotationPageComponent {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export default withRouter(
|
||||
connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(AnnotationPageContainer),
|
||||
);
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
@import './base.scss';
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border-color-1;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.cvat-spinner {
|
||||
margin: 25% 50%;
|
||||
}
|
||||
|
||||
.cvat-not-found {
|
||||
margin: 10% 25%;
|
||||
}
|
||||
|
||||
.cvat-text-color {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.cvat-title {
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
color: $text-color;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
min-width: 1280px;
|
||||
min-height: 768px;
|
||||
}
|
||||
Loading…
Reference in New Issue