Skip to content

Commit

Permalink
feat:增加新页面datas,初步完成界面的主体布局 #15
Browse files Browse the repository at this point in the history
  • Loading branch information
eitbar committed Apr 13, 2020
1 parent ce19588 commit 30ab431
Show file tree
Hide file tree
Showing 7 changed files with 223 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/common/localization/en-us.ts
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,11 @@ export const english: IAppStrings = {
profile: {
settings: "Profile Settings",
},
datas: {
title: "Datas",
inputNumber: "Generate datas",
inProgress: "generating datas in progress...",
},
errors: {
unknown: {
title: "Unknown Error",
Expand Down
5 changes: 5 additions & 0 deletions src/common/localization/es-cl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,11 @@ export const spanish: IAppStrings = {
profile: {
settings: "Configuración de Perfíl",
},
datas: {
title: "Datas",
inputNumber: "Generate datas",
inProgress: "generating datas in progress...",
},
errors: {
unknown: {
title: "Error desconocido",
Expand Down
5 changes: 5 additions & 0 deletions src/common/strings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,11 @@ export interface IAppStrings {
profile: {
settings: string;
};
datas: {
title: string,
inputNumber: string,
inProgress: string,
};
errors: {
unknown: IErrorMetadata,
projectInvalidJson: IErrorMetadata,
Expand Down
65 changes: 65 additions & 0 deletions src/react/components/pages/datasPage/datasPage.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
@import '../../../../assets/sass/theme.scss';

.model-select {
margin: 5px 0 5px 0;
}

.datas {
display: flex;
flex-grow: 1;
flex-direction: row;
height: 10px; // Not sure why it helps
}

.datas-main {
position: relative;
display: flex;
flex-grow: 1;
height: 100%;
justify-content: center;
> i {
font-size: 36pt;
}
}

.datas-sidebar {
height: 100%;
display: flex;
width: 400px;
min-width: 400px;
}

.input-disabled {
color: #bbb;
background-color: white;
}

.dummyInputFile {
color: #757575;
border: 1px;
padding: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
width: 100%;
flex: 1;
}

.seperator {
margin: 20px 10px;
position: relative;
background-color: inherit;
width: 45%;
display: inline-block;
}

.seperator:before {
content: '';
position: absolute;
top: 50%;
left: 0;
border-top: 1px solid white;
background: white;
width: 100%;
transform: translateY(-50%);
}
133 changes: 133 additions & 0 deletions src/react/components/pages/datasPage/datasPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import React from "react";
import { connect } from "react-redux";
import { RouteComponentProps } from "react-router-dom";
import { bindActionCreators } from "redux";
import { FontIcon, PrimaryButton, Spinner, SpinnerSize, IconButton} from "office-ui-fabric-react";
import IProjectActions, * as projectActions from "../../../../redux/actions/projectActions";
import IApplicationActions, * as applicationActions from "../../../../redux/actions/applicationActions";
import IAppTitleActions, * as appTitleActions from "../../../../redux/actions/appTitleActions";
import "./datasPage.scss";
import {
IApplicationState, IConnection, IProject, IAppSettings, AppError, ErrorCode,
} from "../../../../models/applicationState";
import { ImageMap } from "../../common/imageMap/imageMap";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import _ from "lodash";
import pdfjsLib from "pdfjs-dist";
import Alert from "../../common/alert/alert";
import url from "url";
import HtmlFileReader from "../../../../common/htmlFileReader";
import { Feature } from "ol";
import Polygon from "ol/geom/Polygon";
import { strings, interpolate } from "../../../../common/strings";
import PreventLeaving from "../../common/preventLeaving/preventLeaving";
import ServiceHelper from "../../../../services/serviceHelper";
import { parseTiffData, renderTiffToCanvas, loadImageToCanvas } from "../../../../common/utils";
import { constants } from "../../../../common/constants";
import { getPrimaryGreenTheme, getPrimaryWhiteTheme } from "../../../../common/themes";
import { SkipButton } from "../../shell/skipButton";
import axios from "axios";

export interface IDatasPageProps extends RouteComponentProps, React.Props<DatasPage> {
recentProjects: IProject[];
connections: IConnection[];
appSettings: IAppSettings;
project: IProject;
actions: IProjectActions;
applicationActions: IApplicationActions;
appTitleActions: IAppTitleActions;
}

export interface IDatasPageState {
NumberLabel: string;
}

function mapStateToProps(state: IApplicationState) {
return {
recentProjects: state.recentProjects,
connections: state.connections,
appSettings: state.appSettings,
project: state.currentProject,
};
}

function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(projectActions, dispatch),
applicationActions: bindActionCreators(applicationActions, dispatch),
appTitleActions: bindActionCreators(appTitleActions, dispatch),
};
}

@connect(mapStateToProps, mapDispatchToProps)
export default class DatasPage extends React.Component<IDatasPageProps, IDatasPageState> {
public state: IDatasPageState = {
NumberLabel: "Input a integer...",
};

public async componentDidMount() {
const projectId = this.props.match.params["projectId"];
if (projectId) {
const project = this.props.recentProjects.find((project) => project.id === projectId);
await this.props.actions.loadProject(project);
this.props.appTitleActions.setTitle(project.name);
}
document.title = strings.predict.title + " - " + strings.appName;
}

public render() {
//const browseFileDisabled: boolean = !this.state.predictionLoaded;
//const predictDisabled: boolean = !this.state.predictionLoaded || !this.state.file;
//const predictions = this.getPredictionsFromAnalyzeResult(this.state.analyzeResult);
//strings.predict.uploadFile是小标题之后的
const browseFileDisabled: boolean = true;

return (
<div className="predict" id="pagePredict">
<div className="predict-main">
</div>
<div className="datas-sidebar bg-lighter-1">
<div className="condensed-list">
<h6 className="condensed-list-header bg-darker-2 p-2 flex-center">
<FontIcon className="mr-1" iconName="Insights" />
<span className="condensed-list-title">GenerateDatas</span>
</h6>
<div className="p-3">
<h5>
{strings.datas.inputNumber}
</h5>
<div style={{display: "flex", marginBottom: "25px"}}>
<input
type="text"
id="inputNumber"
style = {{cursor: (browseFileDisabled ? "default" : "pointer")}}
readOnly={true}
className="dummyInputFile"
aria-label={strings.datas.inputNumber}
value={this.state.NumberLabel}/>
<div className="rlMargin10">
<PrimaryButton
theme={getPrimaryGreenTheme()}
text="Generate"
allowDisabledFocus
disabled={browseFileDisabled}
autoFocus={true}
/>
</div>
<PrimaryButton
theme={getPrimaryWhiteTheme()}
text="Download"
aria-label={""}
allowDisabledFocus
disabled={true}
/>
</div>
</div>
</div>
</div>
</div>
);
}
}
3 changes: 3 additions & 0 deletions src/react/components/shell/mainContentRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import ConnectionPage from "../pages/connections/connectionsPage";
import EditorPage from "../pages/editorPage/editorPage";
import PredictPage from "../pages/predict/predictPage";
import ProjectSettingsPage from "../pages/projectSettings/projectSettingsPage";
import DatasPage from "../pages/datasPage/datasPage"

/**
* @name - Main Content Router
Expand All @@ -28,6 +29,8 @@ export function MainContentRouter() {
<Route path="/projects/:projectId/train" component={TrainPage} />
<Route path="/projects/:projectId/predict" component={PredictPage} />
<Route path="/projects/:projectId/settings" component={ProjectSettingsPage} />
<Route path="/projects/:projectId/datas" component={DatasPage} />

<Route component={HomePage} />
</Switch>
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/react/components/shell/sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@ export function Sidebar({ project }) {
<FontIcon iconName="MachineLearning" />
</ConditionalNavLink>
</li>
<li>
<ConditionalNavLink disabled={!projectId}
title={strings.datas.title}
to={`/projects/${projectId}/datas`}>
<FontIcon iconName="Generate" />
</ConditionalNavLink>
</li>
<li>
<ConditionalNavLink disabled={!projectId}
title={`Predict`}
Expand Down

0 comments on commit 30ab431

Please sign in to comment.