Skip to content

Commit

Permalink
intermediate: restructure file dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
andreas committed Dec 14, 2024
1 parent b307304 commit defb827
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 110 deletions.
2 changes: 1 addition & 1 deletion viewer/components/EditDialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const EditDialog = ({data, title, language, resolveFunction, saveFunction
flask.current.updateCode(data, true);
flask.current.onUpdate(() => setChanged(true));
}, []);
return <DialogFrame title={title || fileName || "Edit"} className={"editFileDialog"}>
return <DialogFrame title={title || fileName } className={"editFileDialog"}>
<UploadHandler
uploadSequence={uploadSequence}
local={true}
Expand Down
192 changes: 84 additions & 108 deletions viewer/components/FileDialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
#
###############################################################################
*/
import React from "react";
import React, {useEffect, useState} from "react";
import keys from '../util/keys.jsx';
import {Input, InputSelect, Radio} from "./Inputs";
import DB from "./DialogButton";
import Requests from "../util/requests";
import Toast from "./Toast";
import EditOverlaysDialog, {KNOWN_OVERLAY_EXTENSIONS,DEFAULT_OVERLAY_CHARTENTRY} from "./EditOverlaysDialog";
import OverlayDialog, {dialogHelper, InfoItem} from "./OverlayDialog";
import OverlayDialog, {DialogButtons, DialogFrame, dialogHelper, DialogRow, InfoItem} from "./OverlayDialog";
import globalStore from "../util/globalstore";
import ViewPage from "../gui/ViewPage";
import assign from 'object-assign';
Expand Down Expand Up @@ -426,120 +426,105 @@ const INFO_FUNCTIONS={
track: getTrackInfo,
route: getRouteInfo
};
export default class FileDialog extends React.Component{
constructor(props){
super(props);
this.state={
changed:false,
existingName:false,
name:props.current.name,
scheme:props.current.scheme,
allowed:ItemActions.create(props.current,globalStore.getData(keys.properties.connectedMode,true))
};
this.onChange=this.onChange.bind(this);
this.extendedInfo=stateHelper(this,{},'extendedInfo');
}
componentDidMount() {
let f=INFO_FUNCTIONS[this.props.current.type];
const infoRowDisplay=(row,data)=>{
let v=data[row.value];
if (v === undefined) return null;
if (row.formatter) v=row.formatter(v,data);
if (v === undefined) return null;
return <InfoItem label={row.label} value={v}/>
}
export const FileDialog =(props)=>{
const [changed,setChanged]=useState(false);
const [existingName,setExistingName]=useState(false);
const [name,setName]=useState(props.current.name);
const [scheme,setScheme]=useState(props.current.scheme);
const [allowed,setAllowed]=useState(ItemActions.create(props.current,globalStore.getData(keys.properties.connectedMode,true)))
const [extendedInfo,setExtendedInfo]=useState({});
useEffect(() => {
let f=INFO_FUNCTIONS[props.current.type];
if (f){
f(this.props.current.name).then((info)=>{
this.extendedInfo.setState(info,true);
f(props.current.name).then((info)=>{
setExtendedInfo(info);
}).catch(()=>{});
}
}
}, []);

infoRowDisplay(row,data){
let v=data[row.value];
if (v === undefined) return null;
if (row.formatter) v=row.formatter(v,data);
if (v === undefined) return null;
return <InfoItem label={row.label} value={v}/>
}
onChange(newName){
if (newName === this.state.name) return;
if (newName === this.props.current.name){
this.setState({
changed:false,
existingName:false,
name:newName
});
const onChange=(newName)=>{
if (newName === name) return;
if (newName === props.current.name){
setChanged(false);
setExistingName(false);
setName(newName);
return;
}
let newState={name:newName,changed:true};
if (this.props.checkName){
newState.existingName=this.props.checkName(newName);
}
this.setState(newState)
setName(newName);
setChanged(true);
if (props.checkName) setExistingName(props.checkName(newName));
}
render(){
let self=this;
let cn=this.state.existingName?"existing":"";
let rename=this.state.changed && ! this.state.existingName && (this.state.name !== this.props.current.name);
let schemeChanged=this.state.allowed.showScheme && (((this.props.current.scheme||"tms") !== this.state.scheme)|| this.props.current.originalScheme);
let extendedInfoRows=TYPE_INFO_ROWS[this.props.current.type];
let cn=existingName?"existing":"";
let rename=changed && ! existingName && (name !== props.current.name);
let schemeChanged=allowed.showScheme && (((props.current.scheme||"tms") !== scheme)|| props.current.originalScheme);
let extendedInfoRows=TYPE_INFO_ROWS[props.current.type];
return(
<React.Fragment>
<div className="fileDialog flexInner">
<h3 className="dialogTitle">{this.props.current.name}</h3>
{this.props.current.info !== undefined?
<div className="dialogRow">
<span className="itemInfo">{this.props.current.info}</span>
</div>
<DialogFrame className="fileDialog" title={props.current.name}>
{props.current.info !== undefined?
<DialogRow>
<span className="itemInfo">{props.current.info}</span>
</DialogRow>
:
null
}
{INFO_ROWS.map((row)=>{
return this.infoRowDisplay(row,this.props);
return infoRowDisplay(row,props);
})}
{extendedInfoRows && extendedInfoRows.map((row)=>{
return this.infoRowDisplay(row,this.extendedInfo.getState());
return infoRowDisplay(row,extendedInfo);
})}
{(this.state.allowed.showScheme && this.props.current.originalScheme) &&
<div className="dialogRow userAction">
{(allowed.showScheme && props.current.originalScheme) &&
<DialogRow className="userAction">
<span className="inputLabel">
original DB scheme
</span>
<span className="value">
{this.props.current.originalScheme}
{props.current.originalScheme}
</span>

</div>
</DialogRow>
}
{this.state.allowed.showScheme &&
{allowed.showScheme &&
<Radio
label="scheme"
value={this.state.scheme}
onChange={(v)=>{this.setState({changed:true,scheme:v})}}
value={scheme}
onChange={(v)=>{setChanged(true);setScheme(v)}}
itemList={[{label:"xyz",value:"xyz"},{label:"tms",value:"tms"}]}
className="mbtilesType"/>

}
{this.state.allowed.showRename ?
{allowed.showRename ?
<div className="dialogRow">
<Input
label={this.state.existingName?"existing":"new name"}
label={existingName?"existing":"new name"}
className={cn}
value={this.state.name}
onChange={this.onChange}
value={name}
onChange={onChange}
/>
</div>
: null
}
<div className="dialogButtons">
{(this.state.allowed.showRename || this.state.allowed.showScheme)?
<DialogButtons>
{(allowed.showRename || allowed.showScheme)?
<DB name="ok"
onClick={()=>{
self.props.closeCallback();
let action="";
if (rename) action+="rename";
if (schemeChanged){
if (this.props.current.scheme !== this.state.scheme) {
if (props.current.scheme !== scheme) {
if (action === "") action = "scheme";
else action += ",scheme";
}
}
self.props.okFunction(action,
assign({},this.props.current,{name:this.state.name,scheme:this.state.scheme}));
props.okFunction(action,
{...props.current,name:name,scheme:scheme});
}}
disabled={!rename && ! schemeChanged}
>
Expand All @@ -548,74 +533,69 @@ export default class FileDialog extends React.Component{
:
null
}
{this.state.allowed.showDelete?
{allowed.showDelete?
<DB name="delete"
onClick={()=>{
self.props.closeCallback();
self.props.okFunction('delete',this.props.current.name);
props.okFunction('delete',props.current.name);
}}
disabled={this.state.changed}
disabled={changed}
>
Delete
</DB>
:
null
}
</div>
<div className="dialogButtons">
{this.state.allowed.showImportLog &&
</DialogButtons>
<DialogButtons >
{allowed.showImportLog &&
<DB name={'log'}
onClick={()=>{
this.props.closeCallback();
OverlayDialog.dialog((dprops)=>{
return <LogDialog {...dprops}
baseUrl={getImportLogUrl(this.props.current.name)}
baseUrl={getImportLogUrl(props.current.name)}
title={'Import Log'}
/>
})
}}
>Log</DB>
}
{this.state.allowed.showConvertFunction &&
{allowed.showConvertFunction &&
<DB name="toroute"
onClick={()=>{
this.props.closeCallback()
this.props.okFunction('convert',this.props.current);
props.okFunction('convert',props.current);
}}
>Convert</DB>
}
{(this.state.allowed.showView )?
{(allowed.showView )?
<DB name="view"
onClick={()=>{
self.props.closeCallback();
self.props.okFunction('view',this.props.current);
props.okFunction('view',props.current);
}}
disabled={this.state.changed}
disabled={changed}
>
View
</DB>
:
null}
{(this.state.allowed.showEdit)?
{(allowed.showEdit)?
<DB name="edit"
onClick={()=>{
self.props.closeCallback();
self.props.okFunction('edit',this.props.current);
props.closeCallback();
props.okFunction('edit',props.current);
}}
disabled={this.state.changed}
disabled={changed}
>
Edit
</DB>
:
null
}
{(this.state.allowed.showOverlay)?
{(allowed.showOverlay)?
<DB name="overlays"
onClick={()=>{
self.props.closeCallback();
self.props.okFunction('overlay',this.props.current);
props.okFunction('overlay',props.current);
}}
disabled={this.state.changed}
disabled={changed}
>
Overlays
</DB>
Expand All @@ -624,35 +604,31 @@ export default class FileDialog extends React.Component{
}
<ItemDownloadButton
name="download"
disabled={this.state.changed}
item={this.props.current || {}}
disabled={changed}
item={props.current || {}}
useDialogButton={true}
onClick={this.props.closeCallback}
>
Download
</ItemDownloadButton>
{(this.state.allowed.showApp) &&
{(allowed.showApp) &&
<DB name="userApp"
onClick={()=>{
this.props.closeCallback();
this.props.okFunction('userapp',this.props.current);
props.okFunction('userapp',props.current);
}}
disabled={this.state.changed}
disabled={changed}
>
App
</DB>

}
<DB name="cancel"
onClick={self.props.closeCallback}
>
Cancel
</DB>
</div>
</div>
</React.Fragment>
</DialogButtons>
</DialogFrame>
);
}

}
const buildRequestParameters=(request,item,opt_additional)=>{
return assign({},Helper.filteredAssign(additionalUrlParameters,item),
Expand Down
4 changes: 3 additions & 1 deletion viewer/gui/ImporterPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,9 @@ class ImporterPage extends React.Component{
Toast(txt);
}}
src={undefined}
ref={(el) => this.downloadFrame = el}/>
ref={(el) => {
this.downloadFrame = el;
}}/>
</React.Fragment>;
}

Expand Down

0 comments on commit defb827

Please sign in to comment.