mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-10 15:15:34 +00:00
more react changes, incomplete
This commit is contained in:
Colin McLeod
20
src/app/components/ActiveLink.jsx
Normal file
20
src/app/components/ActiveLink.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import Link from './Link';
|
||||
import cn from 'classnames';
|
||||
|
||||
export default class ActiveLink extends Link {
|
||||
|
||||
isActive = () => {
|
||||
return encodeURI(this.props.href) == (window.location.pathname + window.location.search);
|
||||
}
|
||||
|
||||
render() {
|
||||
let className = this.props.className;
|
||||
if (this.isActive()) {
|
||||
className = cn(className, 'active');
|
||||
}
|
||||
|
||||
return <a {...this.props} className={className} onClick={this.handler}>{this.props.children}</a>
|
||||
}
|
||||
|
||||
}
|
||||
103
src/app/components/AvailableModulesMenu.jsx
Normal file
103
src/app/components/AvailableModulesMenu.jsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import cn from 'classnames';
|
||||
import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
|
||||
|
||||
export default class AvailableModulesMenu extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
modules: React.PropTypes.oneOfType([ React.PropTypes.object, React.PropTypes.array ]).isRequired,
|
||||
onSelect: React.PropTypes.func.isRequired,
|
||||
m: React.PropTypes.object,
|
||||
shipMass: React.PropTypes.number,
|
||||
warning: React.PropTypes.func
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
shipMass: 0
|
||||
};
|
||||
|
||||
buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules) {
|
||||
let prevClass = null, prevRating = null;
|
||||
let elems = [];
|
||||
|
||||
for (let i = 0; i < modules.length; i++) {
|
||||
let m = modules[i];
|
||||
let classRating = m.class + m.rating;
|
||||
let mount = null;
|
||||
let classes = cn(m.name ? 'lc' : 'c', {
|
||||
active: mountedModule && mountedModule.id === m.id,
|
||||
warning: warningFunc && warningFunc(m),
|
||||
disabled: m.maxmass && (mass + (m.mass ? m.mass : 0)) > m.maxmass
|
||||
});
|
||||
|
||||
switch(m.mode) {
|
||||
case 'F': mount = <MountFixed className={'lg'} />; break;
|
||||
case 'G': mount = <MountGimballed className={'lg'}/>; break;
|
||||
case 'T': mount = <MountTurret className={'lg'}/>; break;
|
||||
}
|
||||
|
||||
if (i > 0 && modules.length > 3 && m.class != prevClass && (m.rating != prevRating || m.mode) && m.grp != 'pa') {
|
||||
elems.push(<br key={m.grp + i} />);
|
||||
}
|
||||
|
||||
elems.push(
|
||||
<li key={m.id} className={classes} onClick={onSelect.bind(null, m)}>
|
||||
{mount}
|
||||
<span>{(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}</span>
|
||||
</li>
|
||||
);
|
||||
prevClass = m.class;
|
||||
prevRating = m.rating;
|
||||
}
|
||||
|
||||
return <ul key={'modules' + grp} >{elems}</ul>;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let m = this.props.m
|
||||
|
||||
if (!(this.props.modules instanceof Array) && m && m.grp) {
|
||||
findDOMNode(this).scrollTop = this.refs[m.grp].offsetTop; // Scroll to currently selected group
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
let m = this.props.m;
|
||||
let modules = this.props.modules;
|
||||
let list;
|
||||
let buildGroup = this.buildGroup.bind(
|
||||
null,
|
||||
translate,
|
||||
m,
|
||||
this.props.warning,
|
||||
this.props.shipMass - (m && m.mass ? m.mass : 0),
|
||||
this.props.onSelect
|
||||
);
|
||||
|
||||
if (modules instanceof Array) {
|
||||
console.log(modules[0].grp, modules);
|
||||
list = buildGroup(modules[0].grp, modules);
|
||||
} else {
|
||||
console.log('menu object')
|
||||
list = [];
|
||||
// At present time slots with grouped options (Hardpoints and Internal) can be empty
|
||||
list.push(<div className={'empty-c upp'} key={'empty'} onClick={this.props.onSelect.bind(null, null)} >{translate('empty')}</div>);
|
||||
for (let g in modules) {
|
||||
let grp = modules[g];
|
||||
let grpCode = grp[Object.keys(grp)[0]].grp; // Nasty operation to get the grp property of the first/any single component
|
||||
list.push(<div ref={g} key={g} className={'select-group cap'}>{translate(g)}</div>);
|
||||
list.push(buildGroup(g, modules[g]));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('select', this.props.className)} onClick={(e) => e.stopPropagation() }>
|
||||
{list}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
38
src/app/components/HardpointSlot.jsx
Normal file
38
src/app/components/HardpointSlot.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import Slot from './Slot';
|
||||
|
||||
export default class HardpointSlot extends Slot {
|
||||
|
||||
getClassNames() {
|
||||
return this.props.size > 0 ? 'hardpoint' : null;
|
||||
}
|
||||
|
||||
getSize(translate){
|
||||
return translate(['U','S','M','L','H'][this.props.size]);
|
||||
}
|
||||
|
||||
getSlotDetails(m, translate, formats, u) {
|
||||
if (m) {
|
||||
let classRating = `${m.class}${m.rating}${m.mode ? '/' + m.mode : ''}${m.missile ? m.missile : ''}`;
|
||||
return (
|
||||
<div>
|
||||
<div className={'l'}>{classRating + ' ' + translate(m.name || m.grp)}</div>
|
||||
<div className={'r'}>{m.mass}{u.T}</div>
|
||||
<div className={'cb'}>
|
||||
{ m.damage ? <div className={'l'}>{translate('damage')}: {m.damage} { m.ssdam ? <span>({formats.int(m.ssdam)} {u.MJ})</span> : null }</div> : null }
|
||||
{ m.dps ? <div className={'l'}>{translate('DPS')}: {m.dps} { m.mjdps ? <span>({formats.int(m.mjdps)} {u.MJ})</span> : null }</div> : null }
|
||||
{ m.thermload ? <div className={'l'}>{translate('T_LOAD')}: {m.thermload}</div> : null }
|
||||
{ m.type ? <div className={'l'}>{translate('type')}: {m.type}</div> : null }
|
||||
{ m.rof ? <div className={'l'}>{translate('ROF')}: {m.rof}{u.ps}</div> : null }
|
||||
{ m.armourpen ? <div className={'l'}>{translate('pen')}: {m.armourpen}</div> : null }
|
||||
{ m.shieldmul ? <div className={'l'}>+{formats.rPct(m.shieldmul)}</div> : null }
|
||||
{ m.range ? <div className={'l'}>{m.range} <u>km</u></div> : null }
|
||||
{ m.ammo >= 0 ? <div className={'l'}>{translate('ammo')}: {formats.int(m.clip)}+{formats.int(m.ammo)}</div> : null }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div className={'empty'}>{translate('empty')}</div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
87
src/app/components/HardpointsSlotSection.jsx
Normal file
87
src/app/components/HardpointsSlotSection.jsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import SlotSection from './SlotSection';
|
||||
import HardpointSlot from './HardpointSlot';
|
||||
import cn from 'classnames';
|
||||
import { MountFixed, MountGimballed, MountTurret } from '../components/SvgIcons';
|
||||
|
||||
export default class HardpointsSlotSection extends SlotSection {
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context, 'hardpoints', 'hardpoints');
|
||||
|
||||
this._empty = this._empty.bind(this);
|
||||
}
|
||||
|
||||
_empty() {
|
||||
|
||||
}
|
||||
|
||||
_fill(grp, mount) {
|
||||
|
||||
}
|
||||
|
||||
_getSlots() {
|
||||
let slots = [];
|
||||
let hardpoints = this.props.ship.hardpoints;
|
||||
let availableModules = this.props.ship.getAvailableModules();
|
||||
let currentMenu = this.state.currentMenu;
|
||||
|
||||
for (let i = 0, l = hardpoints.length; i < l; i++) {
|
||||
let h = hardpoints[i];
|
||||
if (h.maxClass) {
|
||||
slots.push(<HardpointSlot
|
||||
key={i}
|
||||
size={h.maxClass}
|
||||
modules={availableModules.getHps(h.maxClass)}
|
||||
onOpen={this._openMenu.bind(this,h)}
|
||||
onSelect={this._selectModule.bind(this, h)}
|
||||
selected={currentMenu == h}
|
||||
m={h.m}
|
||||
/>);
|
||||
}
|
||||
}
|
||||
|
||||
return slots;
|
||||
}
|
||||
|
||||
_getSectionMenu(translate) {
|
||||
let _fill = this._fill;
|
||||
|
||||
return <div className='select hardpoint' onClick={(e) => e.stopPropagation()}>
|
||||
<ul>
|
||||
<li className='lc' onClick={this._empty}>{translate('empty all')}</li>
|
||||
</ul>
|
||||
<div className='select-group cap'>{translate('pl')}</div>
|
||||
<ul>
|
||||
<li className='c' onClick={_fill.bind(this, 'pl', 'F')}><MountFixed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'pl', 'G')}><MountGimballed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'pl', 'T')}><MountTurret className='lg'/></li>
|
||||
</ul>
|
||||
<div className='select-group cap'>{translate('ul')}</div>
|
||||
<ul>
|
||||
<li className='c' onClick={_fill.bind(this, 'ul', 'F')}><MountFixed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'ul', 'G')}><MountGimballed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'ul', 'T')}><MountTurret className='lg'/></li>
|
||||
</ul>
|
||||
<div className='select-group cap'>{translate('bl')}</div>
|
||||
<ul>
|
||||
<li className='c' onClick={_fill.bind(this, 'bl', 'F')}><MountFixed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'bl', 'G')}><MountGimballed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'bl', 'T')}><MountTurret className='lg'/></li>
|
||||
</ul>
|
||||
<div className='select-group cap'>{translate('mc')}</div>
|
||||
<ul>
|
||||
<li className='c' onClick={_fill.bind(this, 'mc', 'F')}><MountFixed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'mc', 'G')}><MountGimballed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'mc', 'T')}><MountTurret className='lg'/></li>
|
||||
</ul>
|
||||
<div className='select-group cap'>{translate('c')}</div>
|
||||
<ul>
|
||||
<li className='c' onClick={_fill.bind(this, 'c', 'F')}><MountFixed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'c', 'G')}><MountGimballed className='lg'/></li>
|
||||
<li className='c' onClick={_fill.bind(this, 'c', 'T')}><MountTurret className='lg'/></li>
|
||||
</ul>
|
||||
</div>;
|
||||
}
|
||||
|
||||
}
|
||||
251
src/app/components/Header.jsx
Normal file
251
src/app/components/Header.jsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React from 'react';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import Link from './Link';
|
||||
import ActiveLink from './ActiveLink';
|
||||
import cn from 'classnames';
|
||||
import { Cogs, CoriolisLogo, Hammer, Rocket, StatsBars } from './SvgIcons';
|
||||
import Ships from '../shipyard/Ships';
|
||||
import InterfaceEvents from '../utils/InterfaceEvents';
|
||||
import Persist from '../stores/Persist';
|
||||
import ModalDeleteAll from './ModalDeleteAll';
|
||||
|
||||
export default class Header extends TranslatedComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
openedMenu: null
|
||||
};
|
||||
|
||||
this._close = this._close.bind(this);
|
||||
this.shipOrder = Object.keys(Ships).sort();
|
||||
}
|
||||
|
||||
_close() {
|
||||
this.setState({ openedMenu: null });
|
||||
}
|
||||
|
||||
_setInsurance(e) {
|
||||
e.stopPropagation();
|
||||
Persist.setInsurance('Beta'); // TODO: get insurance name
|
||||
}
|
||||
|
||||
_setModuleDiscount(e) {
|
||||
e.stopPropagation();
|
||||
Persist.setModuleDiscount(0); // TODO: get module discount
|
||||
}
|
||||
|
||||
_setShipDiscount(e) {
|
||||
e.stopPropagation();
|
||||
Persist.setShipDiscount(0); // TODO: get ship discount
|
||||
}
|
||||
|
||||
_showDeleteAll(e) {
|
||||
e.preventDefault();
|
||||
InterfaceEvents.showModal(<ModalDeleteAll />);
|
||||
this._close();
|
||||
};
|
||||
|
||||
_showBackup(e) {
|
||||
e.preventDefault();
|
||||
/*$state.go('modal.export', {
|
||||
title: 'backup',
|
||||
data: Persist.getAll(),
|
||||
description: 'PHRASE_BACKUP_DESC'
|
||||
});*/
|
||||
// TODO: implement modal
|
||||
};
|
||||
|
||||
_showDetailedExport(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
/*$state.go('modal.export', {
|
||||
title: 'detailed export',
|
||||
data: Serializer.toDetailedExport(Persist.getBuilds()),
|
||||
description: 'PHRASE_EXPORT_DESC'
|
||||
});*/
|
||||
// TODO: implement modal
|
||||
}
|
||||
|
||||
_setTextSize(size) {
|
||||
Persist.setSizeRatio(size); // TODO: implement properly
|
||||
}
|
||||
|
||||
_resetTextSize() {
|
||||
Persist.setSizeRatio(1);
|
||||
}
|
||||
|
||||
_openMenu(event, openedMenu) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (this.state.openedMenu == openedMenu) {
|
||||
openedMenu = null;
|
||||
}
|
||||
|
||||
this.setState({ openedMenu });
|
||||
}
|
||||
|
||||
_getShipsMenu() {
|
||||
let shipList = [];
|
||||
|
||||
for (let s in Ships) {
|
||||
shipList.push(<ActiveLink key={s} href={'/outfitting/' + s} className={'block'}>{Ships[s].properties.name}</ActiveLink>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'menu-list dbl no-wrap'} onClick={ (e) => e.stopPropagation() }>
|
||||
{shipList}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
_getBuildsMenu() {
|
||||
let builds = Persist.getBuilds();
|
||||
let buildList = [];
|
||||
for (let shipId of this.shipOrder) {
|
||||
if (builds[shipId]) {
|
||||
let shipBuilds = [];
|
||||
let buildNameOrder = Object.keys(builds[shipId]).sort();
|
||||
for (let buildName of buildNameOrder) {
|
||||
let href = ['/outfitting/', shipId, '/', builds[shipId][buildName], '?bn=', buildName].join('');
|
||||
shipBuilds.push(<li key={shipId + '-' + buildName} ><ActiveLink href={href} className={'block'}>{buildName}</ActiveLink></li>);
|
||||
}
|
||||
buildList.push(<ul key={shipId}>{Ships[shipId].properties.name}{shipBuilds}</ul>);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'menu-list'} onClick={ (e) => e.stopPropagation() }>
|
||||
<div className={'dbl'}>{buildList}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
_getComparisonsMenu() {
|
||||
let comparisons;
|
||||
let translate = this.context.language.translate;
|
||||
|
||||
if (Persist.hasComparisons()) {
|
||||
let comparisons = [];
|
||||
let comps = Object.keys(Persist.getComparisons()).sort();
|
||||
console.log(comps);
|
||||
|
||||
for (let name of comps) {
|
||||
comparisons.push(<ActiveLink key={name} href={'/compare/' + name} className={'block name'}>{name}</ActiveLink>);
|
||||
}
|
||||
} else {
|
||||
comparisons = <span className={'cap'}>{translate('none created')}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'menu-list'} onClick={ (e) => e.stopPropagation() } style={{ whiteSpace: 'nowrap' }}>
|
||||
{comparisons}
|
||||
<hr />
|
||||
<Link href='/compare/all' ui-sref="compare({name: 'all'})" className={'block cap'}>{translate('compare all')}</Link>
|
||||
<Link href='/compare' className={'block cap'}>{translate('create new')}</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
_getSettingsMenu() {
|
||||
let translate = this.context.language.translate;
|
||||
|
||||
return (
|
||||
<div className={'menu-list no-wrap cap'} onClick={ (e) => e.stopPropagation() }>
|
||||
<ul>
|
||||
{translate('language')}
|
||||
<li><select className={'cap'} ng-model="language.current" ng-options="langCode as langName for (langCode,langName) in language.opts" ng-change="changeLanguage()"></select></li>
|
||||
</ul><br/>
|
||||
<ul>
|
||||
{translate('insurance')}
|
||||
<li><select className={'cap'} ng-model="insurance.current" ng-options="ins.name | translate for (i,ins) in insurance.opts" ng-change="updateInsurance()"></select></li>
|
||||
</ul><br/>
|
||||
<ul>
|
||||
{translate('ship')} {translate('discount')}
|
||||
<li><select className={'cap'} ng-model="discounts.ship" ng-options="i for (i,d) in discounts.opts" ng-change="updateDiscount()"></select></li>
|
||||
</ul><br/>
|
||||
<ul>
|
||||
{translate('component')} {translate('discount')}
|
||||
<li><select className={'cap'} ng-model="discounts.components" ng-options="i for (i,d) in discounts.opts" ng-change="updateDiscount()"></select></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<ul>
|
||||
{translate('builds')} & {translate('comparisons')}
|
||||
<li><a href="#" className={'block'} ng-click="backup($event)">{translate('backup')}</a></li>
|
||||
<li><a href="#" className={'block'} ng-click="detailedExport($event)">{translate('detailed export')}</a></li>
|
||||
<li><a href="#" className={'block'} ui-sref="modal.import">{translate('import')}</a></li>
|
||||
<li><a href="#" onClick={this._showDeleteAll.bind(this)}>{translate('delete all')}</a></li>
|
||||
</ul>
|
||||
<hr />
|
||||
<table style={{width: 300, backgroundColor: 'transparent'}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{width: 20}}><u>A</u></td>
|
||||
<td slider min="0.65" def="sizeRatio" max="1.2" on-change="textSizeChange(val)" ignore-resize="true"></td>
|
||||
<td style={{width: 20}}><span style={{fontSize: 30}}>A</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td><td style={{ textAlign: 'center' }} className={'primary-disabled cap'} ng-click="resetTextSize()" translate="reset"></td><td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
<Link href="/about" className={'block'}>{translate('about')}</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.closeAllListener = InterfaceEvents.addListener('closeAll', this._close);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.closeAllListener.remove();
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
let openedMenu = this.state.openedMenu;
|
||||
let hasBuilds = Persist.hasBuilds();
|
||||
|
||||
if (this.props.appCacheUpdate) {
|
||||
return <div id="app-update" onClick={window.location.reload}>{ 'PHRASE_UPDATE_RDY' | translate }</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<header>
|
||||
<Link className={'l'} href="/" style={{marginRight: '1em'}} title="Home"><CoriolisLogo className={'icon xl'} /></Link>
|
||||
|
||||
<div className={'l menu'}>
|
||||
<div className={cn('menu-header', {selected: openedMenu == 's'})} onClick={ (e) => this._openMenu(e,'s') } >
|
||||
<Rocket className={'warning'} /><span className={'menu-item-label'}>{' ' + translate('ships')}</span>
|
||||
</div>
|
||||
{openedMenu == 's' ? this._getShipsMenu() : null}
|
||||
</div>
|
||||
|
||||
<div className={'l menu'}>
|
||||
<div className={cn('menu-header', {selected: openedMenu == 'b', disabled: !hasBuilds})} onClick={ hasBuilds ? (e) => this._openMenu(e,'b') : null }>
|
||||
<Hammer className={cn('warning', { 'warning-disabled': !hasBuilds})} /><span className={'menu-item-label'}>{' ' + translate('builds')}</span>
|
||||
</div>
|
||||
{openedMenu == 'b' ? this._getBuildsMenu() : null}
|
||||
</div>
|
||||
|
||||
<div className={'l menu'}>
|
||||
<div className={cn('menu-header', {selected: openedMenu == 'comp', disabled: !hasBuilds})} onClick={ hasBuilds ? (e) => this._openMenu(e,'comp') : null }>
|
||||
<StatsBars className={cn('warning', { 'warning-disabled': !hasBuilds})} /><span className={'menu-item-label'}>{' ' + translate('compare')}</span>
|
||||
</div>
|
||||
{openedMenu == 'comp' ? this._getComparisonsMenu() : null}
|
||||
</div>
|
||||
|
||||
<div className={'r menu'}>
|
||||
<div className={cn('menu-header', {selected: openedMenu == 'settings'})}onClick={ (e) => this._openMenu(e,'settings') }>
|
||||
<Cogs className={'xl warning'}/><span className={'menu-item-label'}>{translate('settings')}</span>
|
||||
</div>
|
||||
{openedMenu == 'settings' ? this._getSettingsMenu() : null}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
38
src/app/components/InternalSlot.jsx
Normal file
38
src/app/components/InternalSlot.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import Slot from './Slot';
|
||||
import { Infinite } from './SvgIcons';
|
||||
|
||||
export default class InternalSlot extends Slot {
|
||||
|
||||
getSlotDetails(m, translate, formats, u) {
|
||||
if (m) {
|
||||
let classRating = m.class + m.rating;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={'l'}>{classRating + ' ' + translate(m.name || m.grp)}</div>
|
||||
<div className={'r'}>{m.mass || m.capacity || 0}{u.T}</div>
|
||||
<div className={'cb'}>
|
||||
{ m.optmass ? <div className={'l'}>{translate('optimal mass') + ': '}{m.optmass}{u.T}</div> : null }
|
||||
{ m.maxmass ? <div className={'l'}>{translate('max mass') + ': '}{m.maxmass}{u.T}</div> : null }
|
||||
{ m.bins ? <div className={'l'}>{m.bins + ' '}<u>{translate('bins')}</u></div> : null }
|
||||
{ m.rate ? <div className={'l'}>{translate('rate')}: {m.rate}{u.kgs} {translate('refuel time')}: {formats.time(this.props.fuel * 1000 / m.rate)}</div> : null }
|
||||
{ m.ammo ? <div className={'l'}>{translate('ammo')}: {formats.gen(m.ammo)}</div> : null }
|
||||
{ m.cells ? <div className={'l'}>{translate('cells')}: {m.cells}</div> : null }
|
||||
{ m.recharge ? <div className={'l'}>{translate('recharge')}: {m.recharge} <u>MJ</u> {translate('total')}: {m.cells * m.recharge}{u.MJ}</div> : null }
|
||||
{ m.repair ? <div className={'l'}>{translate('repair')}: {m.repair}</div> : null }
|
||||
{ m.range ? <div className={'l'}>{translate('range')} {m.range}{u.km}</div> : null }
|
||||
{ m.time ? <div className={'l'}>{translate('time')}: {formats.time(m.time)}</div> : null }
|
||||
{ m.maximum ? <div className={'l'}>{translate('max')}: {(m.maximum)}</div> : null }
|
||||
{ m.rangeLS ? <div className={'l'}>{m.rangeLS}{u.Ls}</div> : null }
|
||||
{ m.rangeLS === null ? <div className={'l'}><Infinite/>{u.Ls}</div> : null }
|
||||
{ m.rangeRating ? <div className={'l'}>{translate('range')}: {m.rangeRating}</div> : null }
|
||||
{ m.armouradd ? <div className={'l'}>+{m.armouradd} <u>{translate('armour')}</u></div> : null }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div className={'empty'}>{translate('empty')}</div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
69
src/app/components/InternalSlotSection.jsx
Normal file
69
src/app/components/InternalSlotSection.jsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import SlotSection from './SlotSection';
|
||||
import InternalSlot from './InternalSlot';
|
||||
import cn from 'classnames';
|
||||
|
||||
|
||||
export default class InternalSlotSection extends SlotSection {
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context, 'internal', 'internal compartments');
|
||||
|
||||
this._empty = this._empty.bind(this);
|
||||
this._fillWithCargo = this._fillWithCargo.bind(this);
|
||||
this._fillWithCells = this._fillWithCells.bind(this);
|
||||
this._fillWithArmor = this._fillWithArmor.bind(this);
|
||||
}
|
||||
|
||||
_empty() {
|
||||
|
||||
}
|
||||
|
||||
_fillWithCargo() {
|
||||
|
||||
}
|
||||
|
||||
_fillWithCells() {
|
||||
|
||||
}
|
||||
|
||||
_fillWithArmor() {
|
||||
|
||||
}
|
||||
|
||||
_getSlots() {
|
||||
let slots = [];
|
||||
let {internal, fuelCapacity, ladenMass } = this.props.ship;
|
||||
let availableModules = this.props.ship.getAvailableModules();
|
||||
let currentMenu = this.state.currentMenu;
|
||||
|
||||
for (let i = 0, l = internal.length; i < l; i++) {
|
||||
let s = internal[i];
|
||||
slots.push(<InternalSlot
|
||||
key={i}
|
||||
size={s.maxClass}
|
||||
modules={availableModules.getInts(s.maxClass, s.eligible)}
|
||||
onOpen={this._openMenu.bind(this,s)}
|
||||
onSelect={this._selectModule.bind(this, i, s)}
|
||||
selected={currentMenu == s}
|
||||
m={s.m}
|
||||
fuel={fuelCapacity}
|
||||
shipMass={ladenMass}
|
||||
/>);
|
||||
}
|
||||
|
||||
return slots;
|
||||
}
|
||||
|
||||
_getSectionMenu(translate) {
|
||||
return <div className='select' onClick={e => e.stopPropagation()}>
|
||||
<ul>
|
||||
<li className='lc' onClick={this._empty}>{translate('empty all')}</li>
|
||||
<li className='lc' onClick={this._fillWithCargo}>{translate('cargo')}</li>
|
||||
<li className='lc' onClick={this._fillWithCells}>{translate('scb')}</li>
|
||||
<li className='lc' onClick={this._fillWithArmor}>{translate('hr')}</li>
|
||||
</ul>
|
||||
</div>;
|
||||
}
|
||||
|
||||
}
|
||||
31
src/app/components/Link.jsx
Normal file
31
src/app/components/Link.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import Router from '../Router';
|
||||
import shallowEqual from '../utils/shallowEqual';
|
||||
|
||||
export default class Link extends React.Component {
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !shallowEqual(this.props, nextProps);
|
||||
}
|
||||
|
||||
handler = (event) => {
|
||||
if (event.getModifierState
|
||||
&& ( event.getModifierState('Shift')
|
||||
|| event.getModifierState('Alt')
|
||||
|| event.getModifierState('Control')
|
||||
|| event.getModifierState('Meta')
|
||||
|| event.button > 1)) {
|
||||
return;
|
||||
}
|
||||
event.nativeEvent && event.preventDefault && event.preventDefault();
|
||||
|
||||
if (this.props.href) {
|
||||
Router.go(encodeURI(this.props.href));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <a {...this.props} onClick={this.handler}>{this.props.children}</a>
|
||||
}
|
||||
|
||||
}
|
||||
22
src/app/components/ModalDeleteAll.jsx
Normal file
22
src/app/components/ModalDeleteAll.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import InterfaceEvents from '../utils/InterfaceEvents';
|
||||
|
||||
export default class ModalDeleteAll extends TranslatedComponent {
|
||||
|
||||
_deleteAll() {
|
||||
Persist.deleteAll();
|
||||
InterfaceEvents.hideModal();
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
|
||||
return <div className='modal' onClick={(e) => e.stopPropagation()}>
|
||||
<h2>{translate('delete all')}</h2>
|
||||
<p style={{textAlign: 'center'}}>{translate('PHRASE_CONFIRMATION')}</p>
|
||||
<button className='l cap' onClick={this._deleteAll}>{translate('yes')}</button>
|
||||
<button className='r cap' onClick={InterfaceEvents.hideModal}>{translate('no')}</button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
49
src/app/components/ModalExport.jsx
Normal file
49
src/app/components/ModalExport.jsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import InterfaceEvents from '../utils/InterfaceEvents';
|
||||
|
||||
export default class DeleteAllModal extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
title: React.propTypes.string,
|
||||
promise: : React.propTypes.func,
|
||||
data: React.propTypes.oneOfType[React.propTypes.string, React.propTypes.object]
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let exportJson;
|
||||
|
||||
if (props.promise) {
|
||||
exportJson = 'Generating...';
|
||||
} else if(typeof props.data == 'string') {
|
||||
exportJson = props.data;
|
||||
} else {
|
||||
exportJson = JSON.stringify(this.props.data);
|
||||
}
|
||||
|
||||
this.state = { exportJson };
|
||||
}
|
||||
|
||||
componentWillMount(){
|
||||
// When promise is done update exportJson accordingly
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
let description;
|
||||
|
||||
if (this.props.description) {
|
||||
description = <div>{translate(this.props.description)}</div>
|
||||
}
|
||||
|
||||
return <div className='modal' onClick={ (e) => e.stopPropagation() }>
|
||||
<h2>{translate(this.props.title || 'Export')}</h2>
|
||||
{description}
|
||||
<div>
|
||||
<textarea className='cb json' onFocus={ (e) => e.target.select() }>{this.state.exportJson}</textarea>
|
||||
</div>
|
||||
<button className={'r dismiss cap'} onClick={InterfaceEvents.hideModal}>{translate('close')}</button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
439
src/app/components/ModalImport.jsx
Normal file
439
src/app/components/ModalImport.jsx
Normal file
@@ -0,0 +1,439 @@
|
||||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import InterfaceEvents from '../utils/InterfaceEvents';
|
||||
import Persist from '../stores/Persist';
|
||||
import Ships from '../shipyard/Ships';
|
||||
import Ship from '../shipyard/Ship';
|
||||
import * as ModuleUtils from '../shipyard/ModuleUtils';
|
||||
import { Download } from './SvgIcons';
|
||||
|
||||
|
||||
const textBuildRegex = new RegExp('^\\[([\\w \\-]+)\\]\n');
|
||||
const lineRegex = new RegExp('^([\\dA-Z]{1,2}): (\\d)([A-I])[/]?([FGT])?([SD])? ([\\w\\- ]+)');
|
||||
const mountMap = { 'H': 4, 'L': 3, 'M': 2, 'S': 1, 'U': 0 };
|
||||
const standardMap = { 'RB': 0, 'TM': 1, 'FH': 2, 'EC': 3, 'PC': 4, 'SS': 5, 'FS': 6 };
|
||||
const bhMap = { 'lightweight alloy': 0, 'reinforced alloy': 1, 'military grade composite': 2, 'mirrored surface composite': 3, 'reactive surface composite': 4 };
|
||||
|
||||
function isEmptySlot(slot) {
|
||||
return slot.maxClass == this && slot.m === null;
|
||||
}
|
||||
|
||||
function equalsIgnoreCase(str) {
|
||||
return str.toLowerCase() == this.toLowerCase();
|
||||
}
|
||||
|
||||
function validateBuild(shipId, code, name) {
|
||||
let shipData = Ships[shipId];
|
||||
|
||||
if (!shipData) {
|
||||
throw '"' + shipId + '" is not a valid Ship Id!';
|
||||
}
|
||||
if (typeof name != 'string' || name.length == 0) {
|
||||
throw shipData.properties.name + ' build "' + name + '" must be a string at least 1 character long!';
|
||||
}
|
||||
if (typeof code != 'string' || code.length < 10) {
|
||||
throw shipData.properties.name + ' build "' + name + '" is not valid!';
|
||||
}
|
||||
try {
|
||||
Serializer.toShip(new Ship(shipId, shipData.properties, shipData.slots), code);
|
||||
} catch (e) {
|
||||
throw shipData.properties.name + ' build "' + name + '" is not valid!';
|
||||
}
|
||||
}
|
||||
|
||||
function detailedJsonToBuild(detailedBuild) {
|
||||
let ship;
|
||||
if (!detailedBuild.name) {
|
||||
throw 'Build Name missing!';
|
||||
}
|
||||
|
||||
if (!detailedBuild.name.trim()) {
|
||||
throw 'Build Name must be a string at least 1 character long!';
|
||||
}
|
||||
|
||||
try {
|
||||
ship = Serializer.fromDetailedBuild(detailedBuild);
|
||||
} catch (e) {
|
||||
throw detailedBuild.ship + ' Build "' + detailedBuild.name + '": Invalid data';
|
||||
}
|
||||
|
||||
return { shipId: ship.id, name: detailedBuild.name, code: Serializer.fromShip(ship) };
|
||||
}
|
||||
|
||||
export default class ModalImport extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
title: React.propTypes.string,
|
||||
promise: : React.propTypes.func,
|
||||
data: React.propTypes.oneOfType[React.propTypes.string, React.propTypes.object]
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
builds: null,
|
||||
canEdit: true,
|
||||
comparisons: null,
|
||||
discounts: null,
|
||||
errorMsg: null,
|
||||
importString: null,
|
||||
importValid: false,
|
||||
insurance: null
|
||||
};
|
||||
|
||||
this._process = this._process.bind(this);
|
||||
this._importBackup = this._importBackup.bind(this);
|
||||
}
|
||||
|
||||
_importBackup(importData) {
|
||||
if (importData.builds && typeof importData.builds == 'object') {
|
||||
for (let shipId in importData.builds) {
|
||||
for (let buildName in importData.builds[shipId]) {
|
||||
validateBuild(shipId, importData.builds[shipId][buildName], buildName);
|
||||
}
|
||||
}
|
||||
this.setState({ builds: importData.builds });
|
||||
} else {
|
||||
throw 'builds must be an object!';
|
||||
}
|
||||
if (importData.comparisons) {
|
||||
for (let compName in importData.comparisons) {
|
||||
let comparison = importData.comparisons[compName];
|
||||
for (let i = 0, l = comparison.builds.length; i < l; i++) {
|
||||
let build = comparison.builds[i];
|
||||
if (!importData.builds[build.shipId] || !importData.builds[build.shipId][build.buildName]) {
|
||||
throw build.shipId + ' build "' + build.buildName + '" data is missing!';
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setState({ comparisons: importData.comparisons });
|
||||
}
|
||||
if (importData.discounts instanceof Array && importData.discounts.length == 2) {
|
||||
this.setState({ discounts: importData.discounts });
|
||||
}
|
||||
if (typeof importData.insurance == 'string' && importData.insurance.length > 3) {
|
||||
this.setState({ insurance: importData.insurance });
|
||||
}
|
||||
}
|
||||
|
||||
_importDetailedArray(importArr) {
|
||||
let builds = {};
|
||||
for (let i = 0, l = importArr.length; i < l; i++) {
|
||||
let build = this._detailedJsonToBuild(importArr[i]);
|
||||
if (!builds[build.shipId]) {
|
||||
builds[build.shipId] = {};
|
||||
}
|
||||
builds[build.shipId][build.name] = build.code;
|
||||
}
|
||||
this.setState({ builds });
|
||||
}
|
||||
|
||||
_importTextBuild(buildStr) {
|
||||
let buildName = textBuildRegex.exec(buildStr)[1].trim();
|
||||
let shipName = buildName.toLowerCase();
|
||||
let shipId = null;
|
||||
|
||||
for (let sId in Ships) {
|
||||
if (Ships[sId].properties.name.toLowerCase() == shipName) {
|
||||
shipId = sId;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!shipId) {
|
||||
throw 'No such ship found: "' + buildName + '"';
|
||||
}
|
||||
|
||||
let lines = buildStr.split('\n');
|
||||
let ship = new Ship(shipId, Ships[shipId].properties, Ships[shipId].slots);
|
||||
ship.buildWith(null);
|
||||
|
||||
for (let i = 1; i < lines.length; i++) {
|
||||
let line = lines[i].trim();
|
||||
|
||||
if (!line) { continue; }
|
||||
if (line.substring(0, 3) == '---') { break; }
|
||||
|
||||
let parts = lineRegex.exec(line);
|
||||
|
||||
if (!parts) { throw 'Error parsing: "' + line + '"'; }
|
||||
|
||||
let typeSize = parts[1];
|
||||
let cl = parts[2];
|
||||
let rating = parts[3];
|
||||
let mount = parts[4];
|
||||
let missile = parts[5];
|
||||
let name = parts[6].trim();
|
||||
let slot, group;
|
||||
|
||||
if (isNaN(typeSize)) { // Standard or Hardpoint
|
||||
if (typeSize.length == 1) { // Hardpoint
|
||||
let slotClass = mountMap[typeSize];
|
||||
|
||||
if (cl > slotClass) { throw cl + rating + ' ' + name + ' exceeds slot size: "' + line + '"'; }
|
||||
|
||||
slot = _.find(ship.hardpoints, isEmptySlot, slotClass);
|
||||
|
||||
if (!slot) { throw 'No hardpoint slot available for: "' + line + '"'; }
|
||||
|
||||
group = _.find(GroupMap, equalsIgnoreCase, name);
|
||||
|
||||
let hp = ModuleUtils.findHardpoint(group, cl, rating, group ? null : name, mount, missile);
|
||||
|
||||
if (!hp) { throw 'Unknown component: "' + line + '"'; }
|
||||
|
||||
ship.use(slot, hp, true);
|
||||
|
||||
} else if (typeSize == 'BH') {
|
||||
let bhId = bhMap[name.toLowerCase()];
|
||||
|
||||
if (bhId === undefined) { throw 'Unknown bulkhead: "' + line + '"'; }
|
||||
|
||||
ship.useBulkhead(bhId, true);
|
||||
|
||||
} else if (standardMap[typeSize] != undefined) {
|
||||
let standardIndex = standardMap[typeSize];
|
||||
|
||||
if (ship.standard[standardIndex].maxClass < cl) { throw name + ' exceeds max class for the ' + ship.name; }
|
||||
|
||||
ship.use(ship.standard[standardIndex], cl + rating, ModuleUtils.standard(standardIndex, cl + rating), true);
|
||||
|
||||
} else {
|
||||
throw 'Unknown component: "' + line + '"';
|
||||
}
|
||||
} else {
|
||||
if (cl > typeSize) { throw cl + rating + ' ' + name + ' exceeds slot size: "' + line + '"'; }
|
||||
|
||||
slot = _.find(ship.internal, isEmptySlot, typeSize);
|
||||
|
||||
if (!slot) { throw 'No internal slot available for: "' + line + '"'; }
|
||||
|
||||
group = _.find(GroupMap, equalsIgnoreCase, name);
|
||||
|
||||
let intComp = ModuleUtils.findInternal(group, cl, rating, group ? null : name);
|
||||
|
||||
if (!intComp) { throw 'Unknown component: "' + line + '"'; }
|
||||
|
||||
ship.use(slot, intComp.id, intComp);
|
||||
}
|
||||
}
|
||||
|
||||
let builds = {};
|
||||
builds[shipId] = {};
|
||||
builds[shipId]['Imported ' + buildName] = Serializer.fromShip(ship);
|
||||
this.setState({ builds });
|
||||
}
|
||||
|
||||
_validateImport() {
|
||||
let importData = null;
|
||||
let importString = $scope.importString.trim();
|
||||
this.setState({
|
||||
builds: null,
|
||||
comparisons: null,
|
||||
discounts: null,
|
||||
errorMsg: null,
|
||||
importValid: false,
|
||||
insurance: null
|
||||
});
|
||||
|
||||
if (!importString) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (textBuildRegex.test(importString)) { // E:D Shipyard build text
|
||||
importTextBuild(importString);
|
||||
} else { // JSON Build data
|
||||
importData = angular.fromJson($scope.importString);
|
||||
|
||||
if (!importData || typeof importData != 'object') {
|
||||
throw 'Must be an object or array!';
|
||||
}
|
||||
|
||||
if (importData instanceof Array) { // Must be detailed export json
|
||||
this._importDetailedArray(importData);
|
||||
} else if (importData.ship && typeof importData.name !== undefined) { // Using JSON from a single ship build export
|
||||
this._importDetailedArray([importData]); // Convert to array with singleobject
|
||||
} else { // Using Backup JSON
|
||||
this._importBackup(importData);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
this.setState({ errorMsg: (typeof e == 'string') ? e : 'Cannot Parse the data!' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ importValid: true });
|
||||
};
|
||||
|
||||
_process() {
|
||||
let builds = null, comparisons = null;
|
||||
|
||||
if (this.state.builds) {
|
||||
builds = $scope.builds;
|
||||
for (let shipId in builds) {
|
||||
for (let buildName in builds[shipId]) {
|
||||
let code = builds[shipId][buildName];
|
||||
// Update builds object such that orginal name retained, but can be renamed
|
||||
builds[shipId][buildName] = {
|
||||
code: code,
|
||||
useName: buildName
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.comparisons) {
|
||||
let comparisons = $scope.comparisons;
|
||||
for (let name in comparisons) {
|
||||
comparisons[name].useName = name;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ processed: true, builds, comparisons });
|
||||
};
|
||||
|
||||
_import() {
|
||||
|
||||
if (this.state.builds) {
|
||||
let builds = this.state.builds;
|
||||
for (let shipId in builds) {
|
||||
for (let buildName in builds[shipId]) {
|
||||
let build = builds[shipId][buildName];
|
||||
let name = build.useName.trim();
|
||||
if (name) {
|
||||
Persist.saveBuild(shipId, name, build.code);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.comparisons) {
|
||||
let comparisons = this.state.comparisons;
|
||||
for (let comp in comparisons) {
|
||||
let comparison = comparisons[comp];
|
||||
let useName = comparison.useName.trim();
|
||||
if (useName) {
|
||||
Persist.saveComparison(useName, comparison.builds, comparison.facets);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.discounts) {
|
||||
Persist.setDiscount((this.state.discounts);
|
||||
}
|
||||
|
||||
if (this.state.insurance) {
|
||||
Persist.setInsurance(this.state.insurance);
|
||||
}
|
||||
|
||||
InterfaceEvents.hideModal();
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
if (this.props.importingBuilds) {
|
||||
this.setState({ builds: this.props.importingBuilds, canEdit : false});
|
||||
this._process();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
let importStage;
|
||||
|
||||
if (this.state.processed) {
|
||||
importStage = (
|
||||
<div>
|
||||
<textarea className='cb json' onCange={this.validateImport.bind(this)} placeholder={translate('PHRASE_IMPORT') | translate} />
|
||||
<button className='l cap' onClick={this.process.bind(this)} disabled={!this.state.importValid} >{translate('proceed')}</button>
|
||||
<div className='l warning' style={{ marginLeft:'3em' }}>{this.state.errorMsg}</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
let comparisonTable, edit, buildRows = [];
|
||||
if (this.state.comparisons) {
|
||||
let comparisonRows = [];
|
||||
|
||||
for (let name in comparisons) {
|
||||
let comparison = comparisons[name];
|
||||
let hasComparison = Persist.hasComparison(name);
|
||||
comparisonRows.push(
|
||||
<tr key={name} className='cb'>
|
||||
<td>
|
||||
<input type='text' value={comparison.useName}/>
|
||||
</td>
|
||||
<td style={{ textAlign:'center' }} className={ cn({ warning: hasComparison, disabled: comparison.useName == '' }) }>
|
||||
<span>{translate(comparison.useName == '' ? 'skip' : (hasComparison ? 'overwrite' : 'create'))}></span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
comparisonTable = (
|
||||
<table className='l' style={{ overflow:'hidden', margin: '1em 0', width: '100%'}} >
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ textAlign:'left' }}>{translate('comparison')}</th>
|
||||
<th >{translate('action')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonRows}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
if(this.state.canEdit) {
|
||||
edit = <button className='l cap' style={{ marginLeft: '2em' }} ng-click={() => this.setState({processed: false})}>{translate('edit data')}</button>
|
||||
}
|
||||
|
||||
let builds = this.state.builds;
|
||||
for (let shipId in builds) {
|
||||
let shipBuilds = builds[shipId];
|
||||
for (let buildName in shipBuilds) {
|
||||
let b = shipBuilds[buildName];
|
||||
let hasBuild = Persist.hasBuild(shipId, b.useName);
|
||||
buildRows.push(
|
||||
<tr className='cb'>
|
||||
<td>{{Ships[shipId].properties.name}}</td>
|
||||
<td><input type='text' value={b.useName}/></td>
|
||||
<td style={{ textAlign: 'center' }} className={cn({ warning: hasBuild, disabled: b.useName == ''})}>
|
||||
<span>{translate(b.useName == '' ? 'skip' : (hasBuild ? 'overwrite' : 'create'))}></span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
importStage = (
|
||||
<div>
|
||||
<table className='l' style='overflow:hidden;margin: 1em 0; width: 100%;'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style='text-align:left' >{translate('ship')}</th>
|
||||
<th style='text-align:left' >{translate('build name')}</th>
|
||||
<th >{translate('action')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{buildRows}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{comparisonTable}
|
||||
|
||||
<button className='cl l' onClick={this._import}><Download/> {translate('import')}</button>
|
||||
{edit}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className='modal' onClick={ (e) => e.stopPropagation() }>
|
||||
<h2 >{translate('import')}</h2>
|
||||
{importStage}
|
||||
<button className={'r dismiss cap'} onClick={InterfaceEvents.hideModal}>{translate('close')}</button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
41
src/app/components/ModalPermalink.jsx
Normal file
41
src/app/components/ModalPermalink.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import InterfaceEvents from '../utils/InterfaceEvents';
|
||||
|
||||
export default class ModalPermalink extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
url: React.propTypes.string.isRequired
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
shortenedUrl: 'Shortening...'
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount(){
|
||||
ShortenUrl(this.props.url,
|
||||
(shortenedUrl) => this.setState({ shortenedUrl }),
|
||||
(error) => this.setState({ shortenedUrl: 'Error - ' + e.statusText })
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
|
||||
return <div className='modal' onClick={ (e) => e.stopPropagation() }>
|
||||
<h2>{translate('permalink')}</h2>
|
||||
<br/>
|
||||
<h3>{translate('URL')}</h3>
|
||||
<input value={this.props.url} size=40 onFocus={ (e) => e.target.select() }/>
|
||||
<br/><br/>
|
||||
<h3 >{translate('shortened')}</h3>
|
||||
<input value={this.state.shortenedUrl} size=25 onFocus={ (e) => e.target.select() }/>
|
||||
<br/><br/>
|
||||
<button className={'r dismiss cap'} onClick={InterfaceEvents.hideModal}>{translate('close')}</button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
94
src/app/components/ShipSummaryTable.jsx
Normal file
94
src/app/components/ShipSummaryTable.jsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import cn from 'classnames';
|
||||
import { SizeMap } from '../shipyard/Constants';
|
||||
import { Warning } from './SvgIcons';
|
||||
import shallowEqual from '../utils/shallowEqual';
|
||||
|
||||
export default class ShipSummaryTable extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
ship: React.PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
shouldComponentUpdate() {
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
let ship = this.props.ship;
|
||||
let language = this.context.language;
|
||||
let translate = language.translate;
|
||||
let u = language.units;
|
||||
let formats = language.formats;
|
||||
let round = formats.round;
|
||||
let int = formats.int;
|
||||
let armourDetails = null;
|
||||
|
||||
if (ship.armourMultiplier > 1 || ship.armourAdded) {
|
||||
armourDetails = <u>({
|
||||
(ship.armourMultiplier > 1 ? formats.rPct(ship.armourMultiplier) : '')
|
||||
+ (ship.armourAdded ? ' + ' + ship.armourAdded : '')
|
||||
})</u>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div id='summary'>
|
||||
<table id='summaryTable'>
|
||||
<thead>
|
||||
<tr className='main'>
|
||||
<th rowSpan={2}>{translate('size')}</th>
|
||||
<th rowSpan={2}>{translate('agility')}</th>
|
||||
<th rowSpan={2} className={ cn({ 'bg-warning-disabled': !ship.canThrust() }) }>{translate('speed')}</th>
|
||||
<th rowSpan={2} className={ cn({ 'bg-warning-disabled': !ship.canBoost() }) }>{translate('boost')}</th>
|
||||
<th rowSpan={2}>{translate('DPS')}</th>
|
||||
<th rowSpan={2}>{translate('armour')}</th>
|
||||
<th rowSpan={2}>{translate('shields')}</th>
|
||||
<th colSpan={3}>{translate('mass')}</th>
|
||||
<th rowSpan={2}>{translate('cargo')}</th>
|
||||
<th rowSpan={2}>{translate('fuel')}</th>
|
||||
<th colSpan={3}>{translate('jump range')}</th>
|
||||
<th colSpan={3}>{translate('total range')}</th>
|
||||
<th rowSpan={2}>{translate('lock factor')}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className='lft'>{translate('hull')}</th>
|
||||
<th>{translate('unladen')}</th>
|
||||
<th>{translate('laden')}</th>
|
||||
<th className='lft'>{translate('max')}</th>
|
||||
<th>{translate('full tank')}</th>
|
||||
<th>{translate('laden')}</th>
|
||||
<th className='lft'>{translate('jumps')}</th>
|
||||
<th>{translate('unladen')}</th>
|
||||
<th>{translate('laden')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='cap'>{translate(SizeMap[ship.class])}</td>
|
||||
<td>{ship.agility}/10</td>
|
||||
<td>{ ship.canThrust() ? <span>{int(ship.topSpeed)} {u.ms}</span> : <span className='warning'>0 <Warning/></span> }</td>
|
||||
<td>{ ship.canBoost() ? <span>{int(ship.topBoost)} {u.ms}</span> : <span className='warning'>0 <Warning/></span> }</td>
|
||||
<td>{round(ship.totalDps)}</td>
|
||||
<td>{int(ship.armour)} {armourDetails}</td>
|
||||
<td>{int(ship.shieldStrength)} {u.MJ} { ship.shieldMultiplier > 1 && ship.shieldStrength > 0 ? <u>({formats.rPct(ship.shieldMultiplier)})</u> : null }</td>
|
||||
<td>{ship.hullMass} {u.T}</td>
|
||||
<td>{round(ship.unladenMass)} {u.T}</td>
|
||||
<td>{round(ship.ladenMass)} {u.T}</td>
|
||||
<td>{round(ship.cargoCapacity)} {u.T}</td>
|
||||
<td>{round(ship.fuelCapacity)} {u.T}</td>
|
||||
<td>{round(ship.unladenRange)} {u.LY}</td>
|
||||
<td>{round(ship.fullTankRange)} {u.LY}</td>
|
||||
<td>{round(ship.ladenRange)} {u.LY}</td>
|
||||
<td>{round(ship.maxJumpCount)}</td>
|
||||
<td>{round(ship.unladenTotalRange)} {u.LY}</td>
|
||||
<td>{round(ship.ladenTotalRange)} {u.LY}</td>
|
||||
<td>{ship.masslock}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
61
src/app/components/Slot.jsx
Normal file
61
src/app/components/Slot.jsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import cn from 'classnames';
|
||||
import AvailableModulesMenu from './AvailableModulesMenu';
|
||||
import { contextMenuHandler } from '../utils/InterfaceEvents';
|
||||
|
||||
export default class Slot extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
modules: React.PropTypes.oneOfType([ React.PropTypes.object, React.PropTypes.array ]).isRequired,
|
||||
onSelect: React.PropTypes.func.isRequired,
|
||||
onOpen: React.PropTypes.func.isRequired,
|
||||
size: React.PropTypes.number.isRequired,
|
||||
selected: React.PropTypes.bool,
|
||||
m: React.PropTypes.object,
|
||||
shipMass: React.PropTypes.number,
|
||||
warning: React.PropTypes.func,
|
||||
};
|
||||
|
||||
getClassNames() {
|
||||
return null;
|
||||
}
|
||||
|
||||
getSize() {
|
||||
return this.props.size;
|
||||
}
|
||||
|
||||
render() {
|
||||
let language = this.context.language;
|
||||
let translate = language.translate;
|
||||
let m = this.props.m;
|
||||
let slotDetails, menu;
|
||||
|
||||
if (m) {
|
||||
slotDetails = this.getSlotDetails(m, translate, language.formats, language.units); // Must be implemented by sub classes
|
||||
} else {
|
||||
slotDetails = <div className={'empty'}>{translate('empty')}</div>;
|
||||
}
|
||||
|
||||
if (this.props.selected) {
|
||||
menu = <AvailableModulesMenu
|
||||
className={this.getClassNames()}
|
||||
modules={this.props.modules}
|
||||
shipMass={this.props.shipMass}
|
||||
m={m}
|
||||
onSelect={this.props.onSelect}
|
||||
warning={this.props.warning}
|
||||
/>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('slot', {selected: this.props.selected})} onClick={this.props.onOpen} onContextMenu={ this.contextmenu === false ? null : contextMenuHandler(this.props.onSelect.bind(null, null))}>
|
||||
<div className={'details'}>
|
||||
<div className={'sz'}>{this.getSize(translate)}</div>
|
||||
{slotDetails}
|
||||
</div>
|
||||
{menu}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
73
src/app/components/SlotSection.jsx
Normal file
73
src/app/components/SlotSection.jsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import InterfaceEvents from '../utils/InterfaceEvents';
|
||||
import { Equalizer } from '../components/SvgIcons';
|
||||
import cn from 'classnames';
|
||||
|
||||
export default class SlotSection extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
ship: React.PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
constructor(props, context, sectionId, sectionName) {
|
||||
super(props);
|
||||
this.sectionId = sectionId;
|
||||
this.sectionName = sectionName;
|
||||
|
||||
this._getSlots = this._getSlots.bind(this);
|
||||
this._selectModule = this._selectModule.bind(this);
|
||||
this._getSectionMenu = this._getSectionMenu.bind(this);
|
||||
|
||||
this.state = {
|
||||
currentMenu: null
|
||||
}
|
||||
}
|
||||
|
||||
// Must be implemented by subclasses:
|
||||
// _getSlots()
|
||||
// _getSectionMenu()
|
||||
|
||||
_openMenu(menu) {
|
||||
this.setState({ currentMenu: menu });
|
||||
InterfaceEvents.closeAll(menu);
|
||||
}
|
||||
|
||||
_closeMenu() {
|
||||
if (this.state.currentMenu) {
|
||||
this.setState({ currentMenu: null });
|
||||
}
|
||||
}
|
||||
|
||||
_selectModule(index, slot, m) {
|
||||
this.props.ship.use(slot, m);
|
||||
this._closeMenu();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
this.setState({ currentMenu: null });
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.closeAllListener = InterfaceEvents.addListener('closeAll', this._closeMenu.bind(this));
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.closeAllListener.remove();
|
||||
}
|
||||
|
||||
render() {
|
||||
let translate = this.context.language.translate;
|
||||
let sectionMenuOpened = this.state.currentMenu === this.sectionName;
|
||||
|
||||
return (
|
||||
<div id={this.sectionId} className={'group'}>
|
||||
<div className={cn('section-menu', {selected: sectionMenuOpened})} onClick={this._openMenu.bind(this, this.sectionName)}>
|
||||
<h1>{translate(this.sectionName)} <Equalizer/></h1>
|
||||
{sectionMenuOpened ? this._getSectionMenu(translate) : null }
|
||||
</div>
|
||||
{this._getSlots()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
60
src/app/components/StandardSlot.jsx
Normal file
60
src/app/components/StandardSlot.jsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import TranslatedComponent from './TranslatedComponent';
|
||||
import AvailableModulesMenu from './AvailableModulesMenu';
|
||||
|
||||
export default class StandardSlot extends TranslatedComponent {
|
||||
|
||||
static propTypes = {
|
||||
slot: React.PropTypes.object,
|
||||
modules: React.PropTypes.oneOfType([ React.PropTypes.object, React.PropTypes.array ]).isRequired,
|
||||
onSelect: React.PropTypes.func.isRequired,
|
||||
onOpen: React.PropTypes.func.isRequired,
|
||||
selected: React.PropTypes.bool,
|
||||
shipMass: React.PropTypes.number,
|
||||
warning: React.PropTypes.func,
|
||||
};
|
||||
|
||||
render() {
|
||||
let { translate, formats, units } = this.context.language;
|
||||
let slot = this.props.slot
|
||||
let m = slot.m;
|
||||
let classRating = m.class + m.rating;
|
||||
let menu;
|
||||
|
||||
if (this.props.selected) {
|
||||
menu = <AvailableModulesMenu
|
||||
modules={this.props.modules}
|
||||
shipMass={this.props.shipMass}
|
||||
m={m}
|
||||
onSelect={this.props.onSelect}
|
||||
warning={this.props.warning}
|
||||
/>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('slot', {selected: this.props.selected})} onClick={this.props.onOpen}>
|
||||
<div className={'details'}>
|
||||
<div className={'sz'}>{slot.maxClass}</div>
|
||||
<div>
|
||||
<div className={'l'}>{classRating + ' ' + translate(m.grp)}</div>
|
||||
<div className={'r'}>{m.mass || m.capacity}{units.T}</div>
|
||||
<div className={'cb'}>
|
||||
{ m.optmass ? <div className={'l'}>{translate('optimal mass') + ': '}{m.optmass}{units.T}</div> : null }
|
||||
{ m.maxmass ? <div className={'l'}>{translate('max mass') + ': '}{m.maxmass}{units.T}</div> : null }
|
||||
{ m.range ? <div className={'l'}>{translate('range')} {m.range}{units.km}</div> : null }
|
||||
{ m.time ? <div className={'l'}>{translate('time')}: {formats.time(m.time)}</div> : null }
|
||||
{ m.eff ? <div className={'l'}>{translate('efficiency')}: {m.eff}</div> : null }
|
||||
{ m.pGen ? <div className={'l'}>{translate('power')}: {m.pGen}{units.MW}</div> : null }
|
||||
{ m.maxfuel ? <div className={'l'}>{translate('max') + ' ' + translate('fuel') + ': '}{m.maxfuel}{units.T}</div> : null }
|
||||
{ m.weaponcapacity ? <div className={'l'}>{translate('WEP')}: {m.weaponcapacity}{units.MJ} / {m.weaponrecharge}{units.MW}</div> : null }
|
||||
{ m.systemcapacity ? <div className={'l'}>{translate('SYS')}: {m.systemcapacity}{units.MJ} / {m.systemrecharge}{units.MW}</div> : null }
|
||||
{ m.enginecapacity ? <div className={'l'}>{translate('ENG')}: {m.enginecapacity}{units.MJ} / {m.enginerecharge}{units.MW}</div> : null }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{menu}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
167
src/app/components/StandardSlotSection.jsx
Normal file
167
src/app/components/StandardSlotSection.jsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React from 'react';
|
||||
import SlotSection from './SlotSection';
|
||||
import StandardSlot from './StandardSlot';
|
||||
import cn from 'classnames';
|
||||
import { ArmourMultiplier } from '../shipyard/Constants';
|
||||
|
||||
export default class StandardSlotSection extends SlotSection {
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context, 'standard', 'standard');
|
||||
|
||||
this._optimizeStandard = this._optimizeStandard.bind(this);
|
||||
this._optimizeCargo = this._optimizeCargo.bind(this);
|
||||
this._optimizeExplorer = this._optimizeExplorer.bind(this);
|
||||
}
|
||||
|
||||
_fill(rating) {
|
||||
|
||||
}
|
||||
|
||||
_optimizeStandard() {
|
||||
|
||||
}
|
||||
|
||||
_optimizeCargo() {
|
||||
|
||||
}
|
||||
|
||||
_optimizeExplorer() {
|
||||
|
||||
}
|
||||
|
||||
_selectBulkhead(bulkheadIndex) {
|
||||
this.props.ship.useBulkhead(bulkheadIndex);
|
||||
this._closeMenu();
|
||||
}
|
||||
|
||||
_getSlots() {
|
||||
let { formats, translate, units } = this.context.language;
|
||||
let slots = new Array(8);
|
||||
let open = this._openMenu;
|
||||
let select = this._selectModule;
|
||||
let selBulkhead = this._selectBulkhead;
|
||||
let ship = this.props.ship
|
||||
let st = ship.standard;
|
||||
let avail = ship.getAvailableModules().standard;
|
||||
let bulkheads = ship.bulkheads;
|
||||
let bulkheadIndex = bulkheads.id;
|
||||
let currentMenu = this.state.currentMenu;
|
||||
|
||||
slots[0] = (
|
||||
<div key='bh' className={cn('slot', {selected: currentMenu === bulkheads})} onClick={open.bind(this, bulkheads)}>
|
||||
<div className={'details'}>
|
||||
<div className={'sz'}>8</div>
|
||||
<div>
|
||||
<div className={'l'}>{translate('bh')}</div>
|
||||
<div className={'r'}>{bulkheads.m.mass}{units.T}</div>
|
||||
<div className={'cl l'}>{translate(bulkheads.m.name)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{currentMenu === bulkheads &&
|
||||
<div className='select' onClick={ e => e.stopPropagation() }>
|
||||
<ul>
|
||||
<li onClick={selBulkhead.bind(this, 0)} className={cn('lc', { active: bulkheads.id=='0' })}>{translate('Lightweight Alloy')}</li>
|
||||
<li onClick={selBulkhead.bind(this, 1)} className={cn('lc', { active: bulkheads.id=='1' })}>{translate('Reinforced Alloy')}</li>
|
||||
<li onClick={selBulkhead.bind(this, 2)} className={cn('lc', { active: bulkheads.id=='2' })}>{translate('Military Grade Composite')}</li>
|
||||
<li onClick={selBulkhead.bind(this, 3)} className={cn('lc', { active: bulkheads.id=='3' })}>{translate('Mirrored Surface Composite')}</li>
|
||||
<li onClick={selBulkhead.bind(this, 4)} className={cn('lc', { active: bulkheads.id=='4' })}>{translate('Reactive Surface Composite')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
slots[1] = <StandardSlot
|
||||
key='pp'
|
||||
slot={st[0]}
|
||||
modules={avail[0]}
|
||||
onOpen={open.bind(this, st[0])}
|
||||
onSelect={select.bind(this, 1, st[0])}
|
||||
selected={currentMenu == st[0]}
|
||||
warning={(m) => m.pGen < ship.powerRetracted}
|
||||
/>;
|
||||
|
||||
slots[2] = <StandardSlot
|
||||
key='th'
|
||||
slot={st[1]}
|
||||
modules={avail[1]}
|
||||
onOpen={open.bind(this, st[1])}
|
||||
onSelect={select.bind(this, 2, st[1])}
|
||||
selected={currentMenu == st[1]}
|
||||
warning={(m) => m.maxmass < ship.ladenMass}
|
||||
/>;
|
||||
|
||||
|
||||
slots[3] = <StandardSlot
|
||||
key='fsd'
|
||||
slot={st[2]}
|
||||
modules={avail[2]}
|
||||
onOpen={open.bind(this, st[2])}
|
||||
onSelect={select.bind(this, 3, st[2])}
|
||||
selected={currentMenu == st[2]}
|
||||
/>;
|
||||
|
||||
slots[4] = <StandardSlot
|
||||
key='ls'
|
||||
slot={st[3]}
|
||||
modules={avail[3]}
|
||||
onOpen={open.bind(this, st[3])}
|
||||
onSelect={select.bind(this, 4, st[3])}
|
||||
selected={currentMenu == st[3]}
|
||||
/>;
|
||||
|
||||
slots[5] = <StandardSlot
|
||||
key='pd'
|
||||
slot={st[4]}
|
||||
modules={avail[4]}
|
||||
onOpen={open.bind(this, st[4])}
|
||||
onSelect={select.bind(this, 5, st[4])}
|
||||
selected={currentMenu == st[4]}
|
||||
warning= {m => m.enginecapacity < ship.boostEnergy}
|
||||
/>;
|
||||
|
||||
slots[6] = <StandardSlot
|
||||
key='ss'
|
||||
slot={st[5]}
|
||||
modules={avail[5]}
|
||||
onOpen={open.bind(this, st[5])}
|
||||
onSelect={select.bind(this, 6, st[5])}
|
||||
selected={currentMenu == st[5]}
|
||||
warning= {m => m.enginecapacity < ship.boostEnergy}
|
||||
/>;
|
||||
|
||||
slots[7] = <StandardSlot
|
||||
key='ft'
|
||||
slot={st[6]}
|
||||
modules={avail[6]}
|
||||
onOpen={open.bind(this, st[6])}
|
||||
onSelect={select.bind(this, 7, st[6])}
|
||||
selected={currentMenu == st[6]}
|
||||
warning= {m => m.capacity < st[2].m.maxfuel} // Show warning when fuel tank is smaller than FSD Max Fuel
|
||||
/>;
|
||||
|
||||
return slots;
|
||||
}
|
||||
|
||||
_getSectionMenu(translate) {
|
||||
let _fill = this._fill;
|
||||
|
||||
return <div className='select' onClick={(e) => e.stopPropagation()}>
|
||||
<ul>
|
||||
<li className='lc' onClick={this._optimizeStandard}>{translate('Optimize')}</li>
|
||||
<li className='c' onClick={_fill.bind(this, 'E')}>E</li>
|
||||
<li className='c' onClick={_fill.bind(this, 'D')}>D</li>
|
||||
<li className='c' onClick={_fill.bind(this, 'C')}>C</li>
|
||||
<li className='c' onClick={_fill.bind(this, 'B')}>B</li>
|
||||
<li className='c' onClick={_fill.bind(this, 'A')}>A</li>
|
||||
</ul>
|
||||
<div className='select-group cap'>{translate('builds / roles')}</div>
|
||||
<ul>
|
||||
<li className='lc' onClick={this._optimizeCargo}>{translate('Trader')}</li>
|
||||
<li className='lc' onClick={this._optimizeExplorer}>{translate('Explorer')}</li>
|
||||
</ul>
|
||||
</div>;
|
||||
}
|
||||
|
||||
}
|
||||
302
src/app/components/SvgIcons.jsx
Normal file
302
src/app/components/SvgIcons.jsx
Normal file
@@ -0,0 +1,302 @@
|
||||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import shallowEqual from '../utils/shallowEqual';
|
||||
|
||||
class SvgIcon extends React.Component {
|
||||
|
||||
shouldComponentUpdate(nextProps) { return !shallowEqual(this.props, nextProps); }
|
||||
|
||||
svg() { return null; }
|
||||
|
||||
viewBox() { return '0 0 32 32'; }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<svg className={cn('icon', this.props.className)} style={this.props.style} viewBox={this.viewBox()}>
|
||||
{this.svg()}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class Bin extends SvgIcon {
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z'/>
|
||||
<path d='M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class CoriolisLogo extends SvgIcon {
|
||||
svg() {
|
||||
return <g transform='translate(1,1)'>
|
||||
<path stroke='#ff3b00' transform='rotate(45 15 15)' d='m4,4 l 11,-4 l 11,4 l 4,11 l -4,11 l -11,4 l -11,-4 l -4,-11 l 4,-11 l 22,0 l 0,22 l -22,0 z' strokeWidth='1' fill='#000000'/>
|
||||
<rect height='3' width='10' y='13.5' x='10' strokeWidth='1' stroke='#ff3b00'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Download extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M16 18l8-8h-6v-8h-4v8h-6zM23.273 14.727l-2.242 2.242 8.128 3.031-13.158 4.907-13.158-4.907 8.127-3.031-2.242-2.242-8.727 3.273v8l16 6 16-6v-8z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Eddb extends SvgIcon {
|
||||
render() {
|
||||
return <svg className={cn(this.props.className)} style={this.props.style} viewBox='0 0 90 32'>
|
||||
<path d='M19.1,25.2c0.3,0,0.6,0.1,0.7,0.2c0.2,0.1,0.3,0.3,0.4,0.4c0.1,0.2,0.2,0.4,0.2,0.6v3.3c0,0.3-0.1,0.6-0.2,0.7c-0.1,0.2-0.3,0.3-0.4,0.3c-0.2,0.1-0.4,0.2-0.6,0.1H3.6c-0.3,0-0.6-0.1-0.7-0.2c-0.2-0.1-0.3-0.3-0.3-0.4c-0.1-0.2-0.2-0.4-0.1-0.6V10.2c0-0.3,0.1-0.5,0.2-0.7C2.7,9.4,2.9,9.3,3,9.2C3.2,9.1,3.4,9,3.6,9h15.5c0.3,0,0.6,0.1,0.7,0.2c0.2,0.1,0.3,0.3,0.4,0.4c0.1,0.2,0.2,0.4,0.2,0.6V22c0,0.3-0.1,0.6-0.2,0.7c-0.1,0.2-0.3,0.3-0.4,0.3c-0.2,0.1-0.4,0.2-0.6,0.1h-6.8v-6.8c0.3-0.2,0.6-0.4,0.8-0.7c0.2-0.3,0.3-0.7,0.3-1c0-0.6-0.2-1.1-0.6-1.4c-0.4-0.4-0.9-0.6-1.4-0.6c-0.5,0-1,0.2-1.4,0.6c-0.4,0.4-0.6,0.9-0.6,1.4c0,0.8,0.3,1.4,1,1.8v8.7H19.1z'/>
|
||||
<path d='M24.6,29.7V10.2c0-0.2,0-0.4,0.1-0.6c0.1-0.1,0.2-0.3,0.3-0.4C25.3,9.1,25.5,9,25.8,9h5.5c0.2,0,0.4,0.1,0.6,0.2c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.2,0.4,0.2,0.7v13.2c-0.7,0.4-1,1-1,1.8c0,0.5,0.2,1,0.6,1.4c0.4,0.4,0.9,0.6,1.4,0.6c0.6,0,1.1-0.2,1.4-0.6c0.4-0.4,0.6-0.9,0.6-1.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.4-0.5-0.8-0.7V2.3c0-0.2,0-0.4,0.1-0.6c0.1-0.1,0.2-0.3,0.3-0.4C35.2,1.1,35.4,1,35.8,1h5.5c0.2,0,0.4,0.1,0.6,0.2c0.1,0.1,0.3,0.2,0.4,0.4c0.1,0.2,0.2,0.4,0.2,0.7v27.4c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.2,0.3-0.4,0.4c-0.2,0.1-0.4,0.2-0.7,0.2H25.8c-0.2,0-0.4,0-0.6-0.1c-0.1-0.1-0.3-0.2-0.4-0.3C24.7,30.3,24.6,30,24.6,29.7z'/>
|
||||
<path d='M46.9,29.7V10.2c0-0.2,0-0.4,0.1-0.6c0.1-0.1,0.2-0.3,0.3-0.4C47.5,9.1,47.7,9,48.1,9h5.5c0.2,0,0.4,0.1,0.6,0.2c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.2,0.4,0.2,0.7v13.2c-0.7,0.4-1,1-1,1.8c0,0.5,0.2,1,0.6,1.4c0.4,0.4,0.9,0.6,1.4,0.6c0.6,0,1.1-0.2,1.4-0.6c0.4-0.4,0.6-0.9,0.6-1.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.4-0.5-0.8-0.7V2.3c0-0.2,0-0.4,0.1-0.6c0.1-0.1,0.2-0.3,0.3-0.4C57.4,1.1,57.7,1,58,1h5.5c0.2,0,0.4,0.1,0.6,0.2c0.1,0.1,0.3,0.2,0.4,0.4c0.1,0.2,0.2,0.4,0.2,0.7v27.4c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.2,0.3-0.4,0.4s-0.4,0.2-0.7,0.2H48.1c-0.2,0-0.4,0-0.6-0.1c-0.1-0.1-0.3-0.2-0.4-0.3C46.9,30.3,46.9,30,46.9,29.7z'/>
|
||||
<path d='M87,29.7c0,0.3-0.1,0.6-0.2,0.7c-0.1,0.2-0.3,0.3-0.4,0.3c-0.2,0.1-0.4,0.2-0.6,0.1H70.3c-0.3,0-0.6-0.1-0.7-0.2s-0.3-0.3-0.3-0.4c-0.1-0.2-0.2-0.4-0.1-0.6V2.3c0-0.3,0.1-0.6,0.2-0.7c0.1-0.2,0.3-0.3,0.4-0.4C69.9,1.1,70.1,1,70.3,1h5.5c0.3,0,0.6,0.1,0.7,0.2c0.2,0.1,0.3,0.3,0.4,0.4c0.1,0.2,0.2,0.4,0.2,0.6v21.2c-0.7,0.4-1,1-1,1.8c0,0.5,0.2,1,0.6,1.4c0.4,0.4,0.8,0.6,1.4,0.6c0.6,0,1.1-0.2,1.4-0.6c0.4-0.4,0.6-0.9,0.6-1.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.4-0.5-0.8-0.7V10.2c0-0.3,0.1-0.5,0.2-0.7c0.1-0.1,0.3-0.3,0.4-0.3C79.8,9.1,80,9,80.2,9h5.5c0.3,0,0.6,0.1,0.7,0.2c0.2,0.1,0.3,0.3,0.4,0.4C87,9.8,87,10,87,10.2V29.7z'/>
|
||||
</svg>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Embed extends SvgIcon {
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M18 23l3 3 10-10-10-10-3 3 7 7z'/>
|
||||
<path d='M14 9l-3-3-10 10 10 10 3-3-7-7z'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Equalizer extends SvgIcon {
|
||||
viewBox () { return '0 0 1024 1024'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M448 128v-16c0-26.4-21.6-48-48-48h-160c-26.4 0-48 21.6-48 48v16h-192v128h192v16c0 26.4 21.6 48 48 48h160c26.4 0 48-21.6 48-48v-16h576v-128h-576zM256 256v-128h128v128h-128zM832 432c0-26.4-21.6-48-48-48h-160c-26.4 0-48 21.6-48 48v16h-576v128h576v16c0 26.4 21.6 48 48 48h160c26.4 0 48-21.6 48-48v-16h192v-128h-192v-16zM640 576v-128h128v128h-128zM448 752c0-26.4-21.6-48-48-48h-160c-26.4 0-48 21.6-48 48v16h-192v128h192v16c0 26.4 21.6 48 48 48h160c26.4 0 48-21.6 48-48v-16h576v-128h-576v-16zM256 896v-128h128v128h-128z'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class FloppyDisk extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M28 0h-28v32h32v-28l-4-4zM16 4h4v8h-4v-8zM28 28h-24v-24h2v10h18v-10h2.343l1.657 1.657v22.343z' />;
|
||||
}
|
||||
}
|
||||
|
||||
export class Fuel extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM9.464 26.067c0.347-0.957 0.536-1.99 0.536-3.067 0-3.886-2.463-7.197-5.913-8.456 0.319-2.654 1.508-5.109 3.427-7.029 2.267-2.266 5.28-3.515 8.485-3.515s6.219 1.248 8.485 3.515c1.92 1.92 3.108 4.375 3.428 7.029-3.45 1.26-5.913 4.57-5.913 8.456 0 1.077 0.189 2.11 0.536 3.067-1.928 1.258-4.18 1.933-6.536 1.933s-4.608-0.675-6.536-1.933zM17.242 20.031c0.434 0.109 0.758 0.503 0.758 0.969v2c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1v-2c0-0.466 0.324-0.86 0.758-0.969l0.742-14.031h1l0.742 14.031z' />;
|
||||
}
|
||||
}
|
||||
|
||||
export class GitHub extends SvgIcon {
|
||||
viewBox() { return '0 0 1024 1024' };
|
||||
svg() {
|
||||
return <path d='M512 0C229.252 0 0 229.25199999999995 0 512c0 226.251 146.688 418.126 350.155 485.813 25.593 4.686 34.937-11.125 34.937-24.626 0-12.188-0.469-52.562-0.718-95.314-128.708 23.46-161.707-31.541-172.469-60.373-5.525-14.809-30.407-60.249-52.398-72.263-17.988-9.828-43.26-33.237-0.917-33.735 40.434-0.476 69.348 37.308 78.471 52.75 45.938 77.749 119.876 55.627 148.999 42.5 4.654-32.999 17.902-55.627 32.501-68.373-113.657-12.939-233.22-56.875-233.22-253.063 0-55.94 19.968-101.561 52.658-137.404-5.22-12.999-22.844-65.095 5.063-135.563 0 0 42.937-13.749 140.811 52.501 40.811-11.406 84.594-17.031 128.124-17.22 43.499 0.188 87.314 5.874 128.188 17.28 97.689-66.311 140.686-52.501 140.686-52.501 28 70.532 10.375 122.564 5.124 135.499 32.811 35.844 52.626 81.468 52.626 137.404 0 196.686-119.751 240-233.813 252.686 18.439 15.876 34.748 47.001 34.748 94.748 0 68.437-0.686 123.627-0.686 140.501 0 13.625 9.312 29.561 35.25 24.562C877.436 929.998 1024 738.126 1024 512 1024 229.25199999999995 794.748 0 512 0z' />;
|
||||
}
|
||||
}
|
||||
|
||||
export class Infinite extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M24.5 23.5c-2.003 0-3.887-0.78-5.303-2.197l-3.197-3.196-3.196 3.196c-1.417 1.417-3.3 2.197-5.303 2.197s-3.887-0.78-5.304-2.197c-1.417-1.417-2.197-3.3-2.197-5.303s0.78-3.887 2.197-5.304c1.417-1.417 3.3-2.197 5.304-2.197s3.887 0.78 5.303 2.197l3.196 3.196 3.196-3.196c1.417-1.417 3.3-2.197 5.303-2.197s3.887 0.78 5.303 2.197c1.417 1.417 2.197 3.3 2.197 5.304s-0.78 3.887-2.197 5.303c-1.416 1.417-3.3 2.197-5.303 2.197zM21.304 19.197c0.854 0.853 1.989 1.324 3.196 1.323s2.342-0.47 3.196-1.324c0.854-0.854 1.324-1.989 1.324-3.196s-0.47-2.342-1.324-3.196c-0.854-0.854-1.989-1.324-3.196-1.324s-2.342 0.47-3.196 1.324l-3.196 3.196 3.196 3.197zM7.5 11.48c-1.207 0-2.342 0.47-3.196 1.324s-1.324 1.989-1.324 3.196c0 1.207 0.47 2.342 1.324 3.196s1.989 1.324 3.196 1.324c1.207 0 2.342-0.47 3.196-1.324l3.196-3.196-3.196-3.196c-0.854-0.854-1.989-1.324-3.196-1.324v0z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Info extends SvgIcon {
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M14 9.5c0-0.825 0.675-1.5 1.5-1.5h1c0.825 0 1.5 0.675 1.5 1.5v1c0 0.825-0.675 1.5-1.5 1.5h-1c-0.825 0-1.5-0.675-1.5-1.5v-1z'/>
|
||||
<path d='M20 24h-8v-2h2v-6h-2v-2h6v8h2z'/>
|
||||
<path d='M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class LinkIcon extends SvgIcon {
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z'/>
|
||||
<path d='M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class NoPower extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M437.020 74.98c-48.353-48.351-112.64-74.98-181.020-74.98s-132.667 26.629-181.020 74.98c-48.351 48.353-74.98 112.64-74.98 181.020s26.629 132.667 74.98 181.020c48.353 48.351 112.64 74.98 181.020 74.98s132.667-26.629 181.020-74.98c48.351-48.353 74.98-112.64 74.98-181.020s-26.629-132.667-74.98-181.020zM448 256c0 41.407-13.177 79.794-35.556 111.19l-267.633-267.634c31.396-22.379 69.782-35.556 111.189-35.556 105.869 0 192 86.131 192 192zM64 256c0-41.407 13.177-79.793 35.556-111.189l267.635 267.634c-31.397 22.378-69.784 35.555-111.191 35.555-105.869 0-192-86.131-192-192z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Notification extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M16 3c-3.472 0-6.737 1.352-9.192 3.808s-3.808 5.72-3.808 9.192c0 3.472 1.352 6.737 3.808 9.192s5.72 3.808 9.192 3.808c3.472 0 6.737-1.352 9.192-3.808s3.808-5.72 3.808-9.192c0-3.472-1.352-6.737-3.808-9.192s-5.72-3.808-9.192-3.808zM16 0v0c8.837 0 16 7.163 16 16s-7.163 16-16 16c-8.837 0-16-7.163-16-16s7.163-16 16-16zM14 22h4v4h-4zM14 6h4v12h-4z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Power extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M192 0l-192 256h192l-128 256 448-320h-256l192-192z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Question extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M14 22h4v4h-4zM22 8c1.105 0 2 0.895 2 2v6l-6 4h-4v-2l6-4v-2h-10v-4h12zM16 3c-3.472 0-6.737 1.352-9.192 3.808s-3.808 5.72-3.808 9.192c0 3.472 1.352 6.737 3.808 9.192s5.72 3.808 9.192 3.808c3.472 0 6.737-1.352 9.192-3.808s3.808-5.72 3.808-9.192c0-3.472-1.352-6.737-3.808-9.192s-5.72-3.808-9.192-3.808zM16 0v0c8.837 0 16 7.163 16 16s-7.163 16-16 16c-8.837 0-16-7.163-16-16s7.163-16 16-16z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Reload extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M32 12h-12l4.485-4.485c-2.267-2.266-5.28-3.515-8.485-3.515s-6.219 1.248-8.485 3.515c-2.266 2.267-3.515 5.28-3.515 8.485s1.248 6.219 3.515 8.485c2.267 2.266 5.28 3.515 8.485 3.515s6.219-1.248 8.485-3.515c0.189-0.189 0.371-0.384 0.546-0.583l3.010 2.634c-2.933 3.349-7.239 5.464-12.041 5.464-8.837 0-16-7.163-16-16s7.163-16 16-16c4.418 0 8.418 1.791 11.313 4.687l4.687-4.687v12z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Warning extends SvgIcon {
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M16 2.899l13.409 26.726h-26.819l13.409-26.726zM16 0c-0.69 0-1.379 0.465-1.903 1.395l-13.659 27.222c-1.046 1.86-0.156 3.383 1.978 3.383h27.166c2.134 0 3.025-1.522 1.978-3.383h0l-13.659-27.222c-0.523-0.93-1.213-1.395-1.903-1.395v0z'/>
|
||||
<path d='M18 26c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z'/>
|
||||
<path d='M16 22c-1.105 0-2-0.895-2-2v-6c0-1.105 0.895-2 2-2s2 0.895 2 2v6c0 1.105-0.895 2-2 2z'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class MountFixed extends SvgIcon {
|
||||
viewBox () { return '0 0 200 200'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<circle fillOpacity='0' r='70' cy='100' cx='100' strokeWidth='5' />
|
||||
<line y2='60' x2='101' y1='0' x1='101' strokeWidth='5' />
|
||||
<line y2='101' x2='200' y1='101' x1='140' strokeWidth='5' />
|
||||
<line y2='101' x2='60' y1='101' x1='0' strokeWidth='5' />
|
||||
<line y2='200' x2='101' y1='140' x1='101' strokeWidth='5' />
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class MountGimballed extends SvgIcon {
|
||||
viewBox () { return '0 0 200 200'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<ellipse ry='25' rx='95' cy='100' cx='100' fillOpacity='0' strokeWidth='5' />
|
||||
<ellipse ry='95' rx='25' cy='100' cx='100' fillOpacity='0' strokeWidth='5' />
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class MountTurret extends SvgIcon {
|
||||
viewBox () { return '0 0 200 200'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<line y2='170' x2='162' y1='170' x1='8' strokeWidth='6' />
|
||||
<path d='m13,138l144,0l0,-50l-27,-40l-90,0l-27,40l0,50z' id='svg_12' fillOpacity='0' strokeWidth='6' />
|
||||
<line y2='91' x2='200' y1='91' x1='159' strokeWidth='6' />
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Rocket extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M22 2l-10 10h-6l-6 8c0 0 6.357-1.77 10.065-0.94l-10.065 12.94 13.184-10.255c1.839 4.208-1.184 10.255-1.184 10.255l8-6v-6l10-10 2-10-10 2z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class Hammer extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M31.562 25.905l-9.423-9.423c-0.583-0.583-1.538-0.583-2.121 0l-0.707 0.707-5.75-5.75 9.439-9.439h-10l-4.439 4.439-0.439-0.439h-2.121v2.121l0.439 0.439-6.439 6.439 5 5 6.439-6.439 5.75 5.75-0.707 0.707c-0.583 0.583-0.583 1.538 0 2.121l9.423 9.423c0.583 0.583 1.538 0.583 2.121 0l3.535-3.535c0.583-0.583 0.583-1.538 0-2.121z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class StatsBars extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M0 26h32v4h-32zM4 18h4v6h-4zM10 10h4v14h-4zM16 16h4v8h-4zM22 4h4v20h-4z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Cogs extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M11.366 22.564l1.291-1.807-1.414-1.414-1.807 1.291c-0.335-0.187-0.694-0.337-1.071-0.444l-0.365-2.19h-2l-0.365 2.19c-0.377 0.107-0.736 0.256-1.071 0.444l-1.807-1.291-1.414 1.414 1.291 1.807c-0.187 0.335-0.337 0.694-0.443 1.071l-2.19 0.365v2l2.19 0.365c0.107 0.377 0.256 0.736 0.444 1.071l-1.291 1.807 1.414 1.414 1.807-1.291c0.335 0.187 0.694 0.337 1.071 0.444l0.365 2.19h2l0.365-2.19c0.377-0.107 0.736-0.256 1.071-0.444l1.807 1.291 1.414-1.414-1.291-1.807c0.187-0.335 0.337-0.694 0.444-1.071l2.19-0.365v-2l-2.19-0.365c-0.107-0.377-0.256-0.736-0.444-1.071zM7 27c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM32 12v-2l-2.106-0.383c-0.039-0.251-0.088-0.499-0.148-0.743l1.799-1.159-0.765-1.848-2.092 0.452c-0.132-0.216-0.273-0.426-0.422-0.629l1.219-1.761-1.414-1.414-1.761 1.219c-0.203-0.149-0.413-0.29-0.629-0.422l0.452-2.092-1.848-0.765-1.159 1.799c-0.244-0.059-0.492-0.109-0.743-0.148l-0.383-2.106h-2l-0.383 2.106c-0.251 0.039-0.499 0.088-0.743 0.148l-1.159-1.799-1.848 0.765 0.452 2.092c-0.216 0.132-0.426 0.273-0.629 0.422l-1.761-1.219-1.414 1.414 1.219 1.761c-0.149 0.203-0.29 0.413-0.422 0.629l-2.092-0.452-0.765 1.848 1.799 1.159c-0.059 0.244-0.109 0.492-0.148 0.743l-2.106 0.383v2l2.106 0.383c0.039 0.251 0.088 0.499 0.148 0.743l-1.799 1.159 0.765 1.848 2.092-0.452c0.132 0.216 0.273 0.426 0.422 0.629l-1.219 1.761 1.414 1.414 1.761-1.219c0.203 0.149 0.413 0.29 0.629 0.422l-0.452 2.092 1.848 0.765 1.159-1.799c0.244 0.059 0.492 0.109 0.743 0.148l0.383 2.106h2l0.383-2.106c0.251-0.039 0.499-0.088 0.743-0.148l1.159 1.799 1.848-0.765-0.452-2.092c0.216-0.132 0.426-0.273 0.629-0.422l1.761 1.219 1.414-1.414-1.219-1.761c0.149-0.203 0.29-0.413 0.422-0.629l2.092 0.452 0.765-1.848-1.799-1.159c0.059-0.244 0.109-0.492 0.148-0.743l2.106-0.383zM21 15.35c-2.402 0-4.35-1.948-4.35-4.35s1.948-4.35 4.35-4.35 4.35 1.948 4.35 4.35c0 2.402-1.948 4.35-4.35 4.35z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Switch extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M20 4.581v4.249c1.131 0.494 2.172 1.2 3.071 2.099 1.889 1.889 2.929 4.4 2.929 7.071s-1.040 5.182-2.929 7.071c-1.889 1.889-4.4 2.929-7.071 2.929s-5.182-1.040-7.071-2.929c-1.889-1.889-2.929-4.4-2.929-7.071s1.040-5.182 2.929-7.071c0.899-0.899 1.94-1.606 3.071-2.099v-4.249c-5.783 1.721-10 7.077-10 13.419 0 7.732 6.268 14 14 14s14-6.268 14-14c0-6.342-4.217-11.698-10-13.419zM14 0h4v16h-4z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class StationCoriolis extends SvgIcon {
|
||||
viewBox () { return '0 0 200 200'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<rect x='73.001' y='94.017' width='53.997' height='11.945'/>
|
||||
<path d='M10.324,185.445l89.217,14.348l0.458,0.077l89.677-14.43L200,99.998l-10.338-89.765L100,0.129L10.34,10.233 L-0.001,99.986L10.324,185.445z M193.206,99.986L100,191.108L6.795,99.986L100,8.868L193.206,99.986z M6.82,107.775l87.583,85.624 l-78.983-12.702L6.82,107.775z M184.583,180.692l-78.992,12.712l87.587-85.634L184.583,180.692z M193.745,92.746L105.26,6.245l79.339,8.938L193.745,92.746z M15.41,15.185L94.736,6.25L6.255,92.751L15.41,15.185z'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class StationOcellus extends SvgIcon {
|
||||
viewBox () { return '0 0 200 200'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M100.002,200C155.139,200,200,155.142,200,100.001c0-55.143-44.861-100.002-99.998-100.002C44.86-0.001-0.002,44.857-0.002,100.001C-0.001,155.142,44.86,200,100.002,200z M100.002,5.574c52.063,0,94.423,42.359,94.423,94.427c0,52.067-42.361,94.422-94.423,94.422c-52.07,0-94.428-42.358-94.428-94.422C5.574,47.933,47.933,5.574,100.002,5.574z'/>
|
||||
<path d='M100.002,148.557c26.771,0,48.558-21.783,48.558-48.555c0-26.771-21.786-48.556-48.558-48.556c-26.777,0-48.557,21.782-48.557,48.556C51.446,126.778,73.225,148.557,100.002,148.557z M100.002,57.015c23.699,0,42.986,19.283,42.986,42.986c0,23.7-19.282,42.987-42.986,42.987c-23.705,0-42.991-19.282-42.991-42.987C57.011,76.298,76.302,57.015,100.002,57.015z'/>
|
||||
<rect x='73.404' y='93.985' width='53.197' height='12.033'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class StationOrbis extends SvgIcon {
|
||||
viewBox () { return '0 0 200 200'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M100.002,200c55.138,0,99.996-44.861,99.996-100c0-55.141-44.858-100-99.996-100C44.861,0-0.001,44.857-0.001,100C0,155.139,44.861,200,100.002,200z M100.002,194.424c-35.465,0-66.413-19.663-82.552-48.651l44.426-23.388c7.704,13.067,21.888,21.884,38.127,21.884c16.054,0,30.096-8.621,37.853-21.446l44.441,23.389C166.092,174.961,135.282,194.424,100.002,194.424zM100.002,61.306c21.335,0,38.691,17.356,38.691,38.694c0,21.338-17.364,38.691-38.691,38.691c-21.339,0-38.696-17.354-38.696-38.691C61.307,78.662,78.663,61.306,100.002,61.306zM194.422,100c0,14.802-3.427,28.808-9.521,41.287l-44.447-23.4c2.433-5.477,3.812-11.521,3.812-17.89c0-23.578-18.539-42.852-41.8-44.145V5.636C153.392,6.956,194.422,48.762,194.422,100z M96.895,5.655v50.233C73.938,57.491,55.73,76.635,55.73,100c0,6.187,1.286,12.081,3.592,17.434l-44.455,23.402C8.911,128.472,5.571,114.619,5.571,100C5.577,48.972,46.261,7.297,96.895,5.655z'/>
|
||||
<rect x='73.403' y='93.983' width='53.196' height='12.032'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class StationOutpost extends SvgIcon {
|
||||
viewBox () { return '0 0 200 200'; }
|
||||
svg() {
|
||||
return <g>
|
||||
<path d='M145.137,59.126h4.498v6.995h5.576V46.556h-5.576v6.994h-4.498V16.328h-5.574v57.667h-15.411v14.824h-7.63v-14.58h-13.044v14.58h-8.295v-14.58H82.138v14.58h-6.573v-14.58H59.072v14.58h-6.573v-14.58H39.458v36.338h13.041V94.391h6.573v16.186h16.493V94.391h6.573v16.186h13.044V94.391h8.295v16.186h13.044V94.391h7.63v40.457l17.634,17.637h13.185v31.182h5.577V73.996H145.14v-14.87H145.137z M154.97,146.907h-10.871l-14.376-14.376V79.57h25.247V146.907z'/>
|
||||
<rect fill='#999999' x='147.703' y='16.328' width='5.572' height='7.345'/>
|
||||
<rect fill='#999999' x='131.295' y='16.328' width='5.577' height='7.345'/>
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Upload extends SvgIcon {
|
||||
svg() {
|
||||
return <path d='M14 18h4v-8h6l-8-8-8 8h6zM20 13.5v3.085l9.158 3.415-13.158 4.907-13.158-4.907 9.158-3.415v-3.085l-12 4.5v8l16 6 16-6v-8z'/>;
|
||||
}
|
||||
}
|
||||
|
||||
export class Loader extends SvgIcon {
|
||||
viewBox () { return '0 0 40 40'; }
|
||||
svg() {
|
||||
return <g className={'loader'}>
|
||||
<path d='m5,8l5,8l5,-8z' className={'l1 d1'} />
|
||||
<path d='m5,8l5,-8l5,8z' className={'l1 d2'} />
|
||||
<path d='m10,0l5,8l5,-8z' className={'l1 d3'} />
|
||||
<path d='m15,8l5,-8l5,8z' className={'l1 d4'} />
|
||||
<path d='m20,0l5,8l5,-8z' className={'l1 d5'} />
|
||||
<path d='m25,8l5,-8l5,8z' className={'l1 d6'} />
|
||||
<path d='m25,8l5,8l5,-8z' className={'l1 d7'} />
|
||||
<path d='m30,16l5,-8l5,8z' className={'l1 d8'} />
|
||||
<path d='m30,16l5,8l5,-8z' className={'l1 d9'} />
|
||||
<path d='m25,24l5,-8l5,8z' className={'l1 d10'} />
|
||||
<path d='m25,24l5,8l5,-8z' className={'l1 d11'} />
|
||||
<path d='m20,32l5,-8l5,8z' className={'l1 d13'} />
|
||||
<path d='m15,24l5,8l5,-8z' className={'l1 d14'} />
|
||||
<path d='m10,32l5,-8l5,8z' className={'l1 d15'} />
|
||||
<path d='m5,24l5,8l5,-8z' className={'l1 d16'} />
|
||||
<path d='m5,24l5,-8l5,8z' className={'l1 d17'} />
|
||||
<path d='m0,16l5,8l5,-8z' className={'l1 d18'} />
|
||||
<path d='m0,16l5,-8l5,8z' className={'l1 d20'} />
|
||||
<path d='m10,16l5,-8l5,8z' className={'l2 d0'} />
|
||||
<path d='m15,8l5,8l5,-8z' className={'l2 d3'} />
|
||||
<path d='m20,16l5,-8l5,8z' className={'l2 d6'} />
|
||||
<path d='m20,16l5,8l5,-8z' className={'l2 d9'} />
|
||||
<path d='m15,24l5,-8l5,8z' className={'l2 d12'} />
|
||||
<path d='m10,16l5,8l5,-8z' className={'l2 d15'} />
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
24
src/app/components/TranslatedComponent.jsx
Normal file
24
src/app/components/TranslatedComponent.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import shallowEqual from '../utils/shallowEqual';
|
||||
|
||||
export default class TranslatedComponent extends React.Component {
|
||||
|
||||
static contextTypes = {
|
||||
language: React.PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.didContextChange = this.didContextChange.bind(this);
|
||||
}
|
||||
|
||||
didContextChange(nextContext){
|
||||
return nextContext.language !== this.context.language;
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState, nextContext) {
|
||||
return !shallowEqual(this.props, nextProps)
|
||||
|| !shallowEqual(this.state, nextState)
|
||||
|| this.didContextChange(nextContext);
|
||||
}
|
||||
}
|
||||
64
src/app/components/UtilitySlotSection.jsx
Normal file
64
src/app/components/UtilitySlotSection.jsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import SlotSection from './SlotSection';
|
||||
import HardpointSlot from './HardpointSlot';
|
||||
import cn from 'classnames';
|
||||
|
||||
export default class UtilitySlotSection extends SlotSection {
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context, 'utility', 'utility mounts');
|
||||
|
||||
this._empty = this._empty.bind(this);
|
||||
}
|
||||
|
||||
_empty() {
|
||||
|
||||
}
|
||||
|
||||
_use(grp, rating) {
|
||||
|
||||
}
|
||||
|
||||
_getSlots() {
|
||||
let slots = [];
|
||||
let hardpoints = this.props.ship.hardpoints;
|
||||
let availableModules = this.props.ship.getAvailableModules();
|
||||
let currentMenu = this.state.currentMenu;
|
||||
|
||||
for (let i = 0, l = hardpoints.length; i < l; i++) {
|
||||
let h = hardpoints[i];
|
||||
if (h.maxClass === 0) {
|
||||
slots.push(<HardpointSlot
|
||||
key={i}
|
||||
size={h.maxClass}
|
||||
modules={availableModules.getHps(h.maxClass)}
|
||||
onOpen={this._openMenu.bind(this,h)}
|
||||
onSelect={this._selectModule.bind(this, h)}
|
||||
selected={currentMenu == h}
|
||||
m={h.m}
|
||||
/>);
|
||||
}
|
||||
}
|
||||
|
||||
return slots;
|
||||
}
|
||||
|
||||
_getSectionMenu(translate) {
|
||||
let _use = this._use;
|
||||
|
||||
return <div className='select' onClick={(e) => e.stopPropagation()}>
|
||||
<ul>
|
||||
<li className='lc' onClick={this._empty}>{translate('empty all')}</li>
|
||||
</ul>
|
||||
<div className='select-group cap'>{translate('sb')}</div>
|
||||
<ul>
|
||||
<li className='c' onClick={_use.bind(this, 'sb', 'E')}>E</li>
|
||||
<li className='c' onClick={_use.bind(this, 'sb', 'D')}>D</li>
|
||||
<li className='c' onClick={_use.bind(this, 'sb', 'C')}>C</li>
|
||||
<li className='c' onClick={_use.bind(this, 'sb', 'B')}>B</li>
|
||||
<li className='c' onClick={_use.bind(this, 'sb', 'A')}>A</li>
|
||||
</ul>
|
||||
</div>;
|
||||
}
|
||||
|
||||
}
|
||||
164
src/app/components/directive-area-chart.js
Executable file
164
src/app/components/directive-area-chart.js
Executable file
@@ -0,0 +1,164 @@
|
||||
angular.module('app').directive('areaChart', ['$window', '$translate', function($window, $translate) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
config: '=',
|
||||
series: '='
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var series = scope.series,
|
||||
config = scope.config,
|
||||
labels = config.labels,
|
||||
margin = { top: 15, right: 15, bottom: 35, left: 60 },
|
||||
fmt = d3.format('.3r'),
|
||||
fmtLong = d3.format('.2f'),
|
||||
func = series.func,
|
||||
drag = d3.behavior.drag(),
|
||||
dragging = false,
|
||||
// Define Axes
|
||||
xAxis = d3.svg.axis().outerTickSize(0).orient('bottom').tickFormat(d3.format('.2r')),
|
||||
yAxis = d3.svg.axis().ticks(6).outerTickSize(0).orient('left').tickFormat(fmt),
|
||||
x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
data = [];
|
||||
|
||||
// Create chart
|
||||
var svg = d3.select(element[0]).append('svg');
|
||||
var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
// Define Area
|
||||
var area = d3.svg.area();
|
||||
|
||||
var gradient = vis.append('defs')
|
||||
.append('linearGradient')
|
||||
.attr('id', 'gradient')
|
||||
.attr('x1', '0%').attr('y1', '0%')
|
||||
.attr('x2', '100%').attr('y2', '100%')
|
||||
.attr('spreadMethod', 'pad');
|
||||
gradient.append('stop')
|
||||
.attr('offset', '0%')
|
||||
.attr('stop-color', '#ff8c0d')
|
||||
.attr('stop-opacity', 1);
|
||||
gradient.append('stop')
|
||||
.attr('offset', '100%')
|
||||
.attr('stop-color', '#ff3b00')
|
||||
.attr('stop-opacity', 1);
|
||||
|
||||
// Create Y Axis SVG Elements
|
||||
var yTxt = vis.append('g').attr('class', 'y axis')
|
||||
.append('text')
|
||||
.attr('class', 'cap')
|
||||
.attr('transform', 'rotate(-90)')
|
||||
.attr('y', -50)
|
||||
.attr('dy', '.1em')
|
||||
.style('text-anchor', 'middle')
|
||||
.text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')');
|
||||
// Create X Axis SVG Elements
|
||||
var xLbl = vis.append('g').attr('class', 'x axis');
|
||||
var xTxt = xLbl.append('text')
|
||||
.attr('y', 30)
|
||||
.attr('dy', '.1em')
|
||||
.style('text-anchor', 'middle')
|
||||
.text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
|
||||
|
||||
// Create and Add tooltip
|
||||
var tip = vis.append('g').style('display', 'none');
|
||||
tip.append('rect').attr('width', '4.5em').attr('height', '2em').attr('x', '0.5em').attr('y', '-1em').attr('class', 'tip');
|
||||
tip.append('circle')
|
||||
.attr('class', 'marker')
|
||||
.attr('r', 4);
|
||||
tip.append('text').attr('class', 'label x').attr('y', '-0.25em');
|
||||
tip.append('text').attr('class', 'label y').attr('y', '0.85em');
|
||||
|
||||
vis.insert('path', ':first-child') // Area/Path to appear behind everything else
|
||||
.data([data])
|
||||
.attr('class', 'area')
|
||||
.attr('fill', 'url(#gradient)')
|
||||
.attr('d', area)
|
||||
.on('mouseover', showTip)
|
||||
.on('mouseout', hideTip)
|
||||
.on('mousemove', moveTip)
|
||||
.call(drag);
|
||||
|
||||
drag
|
||||
.on('dragstart', function() {
|
||||
dragging = true;
|
||||
moveTip.call(this);
|
||||
showTip();
|
||||
})
|
||||
.on('dragend', function() {
|
||||
dragging = false;
|
||||
hideTip();
|
||||
})
|
||||
.on('drag', moveTip);
|
||||
|
||||
/**
|
||||
* Watch for changes in the series data (mass changes, etc)
|
||||
*/
|
||||
scope.$watchCollection('series', render);
|
||||
angular.element($window).bind('orientationchange resize render', render);
|
||||
|
||||
function render() {
|
||||
var width = element[0].parentElement.offsetWidth,
|
||||
height = width * 0.5,
|
||||
w = width - margin.left - margin.right,
|
||||
h = height - margin.top - margin.bottom;
|
||||
|
||||
data.length = 0; // Reset Data array
|
||||
|
||||
if (series.xMax == series.xMin) {
|
||||
var yVal = func(series.xMin);
|
||||
data.push([ series.xMin, yVal ]);
|
||||
data.push([ series.xMin, yVal ]);
|
||||
area.x(function(d, i) { return i * w; }).y0(h).y1(function(d) { return y(d[1]); });
|
||||
} else {
|
||||
for (var val = series.xMin; val <= series.xMax; val += 1) {
|
||||
data.push([ val, func(val) ]);
|
||||
}
|
||||
area.x(function(d) { return x(d[0]); }).y0(h).y1(function(d) { return y(d[1]); });
|
||||
}
|
||||
|
||||
// Update Chart Size
|
||||
svg.attr('width', width).attr('height', height);
|
||||
// Update domain and scale for axes
|
||||
x.range([0, w]).domain([series.xMin, series.xMax]).clamp(true);
|
||||
xAxis.scale(x);
|
||||
xLbl.attr('transform', 'translate(0,' + h + ')');
|
||||
xTxt.attr('x', w / 2);
|
||||
y.range([h, 0]).domain([series.yMin, series.yMax]);
|
||||
yAxis.scale(y);
|
||||
yTxt.attr('x', -h / 2);
|
||||
vis.selectAll('.y.axis').call(yAxis);
|
||||
vis.selectAll('.x.axis').call(xAxis);
|
||||
|
||||
vis.selectAll('path.area') // Area/Path to appear behind everything else
|
||||
.data([data])
|
||||
.attr('d', area);
|
||||
}
|
||||
|
||||
function showTip() {
|
||||
tip.style('display', null);
|
||||
}
|
||||
|
||||
function hideTip() {
|
||||
if (!dragging) {
|
||||
tip.style('display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
function moveTip() {
|
||||
var xPos = d3.mouse(this)[0], x0 = x.invert(xPos), y0 = func(x0), flip = (x0 / x.domain()[1] > 0.65);
|
||||
tip.attr('transform', 'translate(' + x(x0) + ',' + y(y0) + ')');
|
||||
tip.selectAll('rect').attr('x', flip ? '-5.75em' : '0.5em').style('text-anchor', flip ? 'end' : 'start');
|
||||
tip.selectAll('text.label').attr('x', flip ? '-2em' : '1em').style('text-anchor', flip ? 'end' : 'start');
|
||||
tip.select('text.label.x').text(fmtLong(x0) + ' ' + $translate.instant(labels.xAxis.unit));
|
||||
tip.select('text.label.y').text(fmtLong(y0) + ' ' + $translate.instant(labels.yAxis.unit));
|
||||
}
|
||||
|
||||
scope.$on('$destroy', function() {
|
||||
angular.element($window).unbind('orientationchange resize render', render);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
}]);
|
||||
134
src/app/components/directive-bar-chart.js
Executable file
134
src/app/components/directive-bar-chart.js
Executable file
@@ -0,0 +1,134 @@
|
||||
angular.module('app').directive('barChart', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
|
||||
|
||||
function bName(build) {
|
||||
return build.buildName + '\n' + build.name;
|
||||
}
|
||||
|
||||
function insertLinebreaks(d) {
|
||||
var el = d3.select(this);
|
||||
var lines = d.split('\n');
|
||||
el.text('').attr('y', -6);
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
var tspan = el.append('tspan').text(lines[i].length > 18 ? lines[i].substring(0, 15) + '...' : lines[i]);
|
||||
if (i > 0) {
|
||||
tspan.attr('x', -9).attr('dy', '1em');
|
||||
} else {
|
||||
tspan.attr('class', 'primary');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
data: '=',
|
||||
facet: '='
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var color = d3.scale.ordinal().range([ '#7b6888', '#6b486b', '#3182bd', '#a05d56', '#d0743c']),
|
||||
labels = scope.facet.lbls,
|
||||
fmt = null,
|
||||
unit = null,
|
||||
properties = scope.facet.props,
|
||||
margin = { top: 10, right: 20, bottom: 40, left: 150 },
|
||||
y0 = d3.scale.ordinal(),
|
||||
y1 = d3.scale.ordinal(),
|
||||
x = d3.scale.linear(),
|
||||
yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient('left'),
|
||||
xAxis = d3.svg.axis().scale(x).ticks(5).outerTickSize(0).orient('bottom');
|
||||
|
||||
// Create chart
|
||||
var svg = d3.select(element[0]).append('svg');
|
||||
var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
// Create and Add tooltip
|
||||
var tip = d3.tip()
|
||||
.attr('class', 'd3-tip')
|
||||
.html(function(property, propertyIndex) {
|
||||
return (labels ? ($translate.instant(labels[propertyIndex]) + ': ') : '') + fmt(property.value) + ' ' + unit;
|
||||
});
|
||||
|
||||
vis.call(tip);
|
||||
|
||||
// Create Y Axis SVG Elements
|
||||
vis.append('g').attr('class', 'y axis');
|
||||
vis.selectAll('g.y.axis g text').each(insertLinebreaks);
|
||||
// Create X Axis SVG Elements
|
||||
var xAxisLbl = vis.append('g')
|
||||
.attr('class', 'x axis cap')
|
||||
.append('text')
|
||||
.attr('y', 33)
|
||||
.attr('dy', '.1em')
|
||||
.style('text-anchor', 'middle');
|
||||
|
||||
updateFormats();
|
||||
|
||||
function render() {
|
||||
var data = scope.data,
|
||||
width = element[0].offsetWidth,
|
||||
w = width - margin.left - margin.right,
|
||||
height = 50 + (30 * data.length * $rootScope.sizeRatio),
|
||||
h = height - margin.top - margin.bottom,
|
||||
maxVal = d3.max(data, function(d) { return d3.max(properties, function(p) {return d[p]; }); });
|
||||
|
||||
// Update chart size
|
||||
svg.attr('width', width).attr('height', height);
|
||||
|
||||
// Remove existing elements
|
||||
vis.selectAll('.ship').remove();
|
||||
vis.selectAll('rect').remove();
|
||||
|
||||
// Update X & Y Axis
|
||||
x.range([0, w]).domain([0, maxVal]);
|
||||
y0.domain(data.map(bName)).rangeRoundBands([0, h], 0.3);
|
||||
y1.domain(properties).rangeRoundBands([0, y0.rangeBand()]);
|
||||
vis.selectAll('.y.axis').call(yAxis);
|
||||
vis.selectAll('.x.axis').attr('transform', 'translate(0,' + h + ')').call(xAxis);
|
||||
xAxisLbl.attr('x', w / 2);
|
||||
// Update Y-Axis labels
|
||||
vis.selectAll('g.y.axis g text').each(insertLinebreaks);
|
||||
|
||||
var group = vis.selectAll('.ship')
|
||||
.data(scope.data, bName)
|
||||
.enter().append('g')
|
||||
.attr('class', 'g')
|
||||
.attr('transform', function(build) { return 'translate(0,' + y0(bName(build)) + ')'; });
|
||||
|
||||
group.selectAll('rect')
|
||||
.data(function(build) {
|
||||
var o = [];
|
||||
for (var i = 0; i < properties.length; i++) {
|
||||
o.push({ name: properties[i], value: build[properties[i]] });
|
||||
}
|
||||
return o;
|
||||
})
|
||||
.enter().append('rect')
|
||||
.attr('height', y1.rangeBand())
|
||||
.attr('x', 0)
|
||||
.attr('y', function(d) {return y1(d.name); })
|
||||
.attr('width', function(d) { return x(d.value); })
|
||||
.on('mouseover', tip.show)
|
||||
.on('mouseout', tip.hide)
|
||||
.style('fill', function(d) { return color(d.name); });
|
||||
|
||||
}
|
||||
|
||||
function updateFormats() {
|
||||
fmt = $rootScope[scope.facet.fmt];
|
||||
unit = $translate.instant(scope.facet.unit);
|
||||
xAxisLbl.text($translate.instant(scope.facet.title) + (unit ? (' (' + $translate.instant(unit) + ')') : ''));
|
||||
xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2s'));
|
||||
render();
|
||||
}
|
||||
|
||||
angular.element($window).bind('orientationchange resize render', render);
|
||||
scope.$watchCollection('data', render); // Watch for changes in the comparison array
|
||||
scope.$on('languageChanged', updateFormats);
|
||||
scope.$on('$destroy', function() {
|
||||
angular.element($window).unbind('orientationchange resize render', render);
|
||||
tip.destroy(); // Remove the tooltip from the DOM
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
}]);
|
||||
80
src/app/components/directive-comparison-table.js
Executable file
80
src/app/components/directive-comparison-table.js
Executable file
@@ -0,0 +1,80 @@
|
||||
angular.module('app').directive('comparisonTable', ['$state', '$translate', '$rootScope', function($state, $translate, $rootScope) {
|
||||
|
||||
function tblHeader(facets) {
|
||||
var r1 = ['<tr class="main"><th rowspan="2" class="prop" prop="name">', $translate.instant('SHIP'), '</th><th rowspan="2" class="prop" prop="buildName">', $translate.instant('BUILD'), '</th>'];
|
||||
var r2 = [];
|
||||
for (var i = 0, l = facets.length; i < l; i++) {
|
||||
if (facets[i].active) {
|
||||
var f = facets[i];
|
||||
var p = f.props;
|
||||
var pl = p.length;
|
||||
r1.push('<th rowspan="', f.props.length == 1 ? 2 : 1, '" colspan="', pl, '"');
|
||||
|
||||
if (pl == 1) {
|
||||
r1.push(' prop="', p[0], '" class="prop"');
|
||||
} else {
|
||||
for (var j = 0; j < pl; j++) {
|
||||
r2.push('<th prop="', p[j], '" class="prop ', j === 0 ? 'lft' : '', '">', $translate.instant(f.lbls[j]), '</th>');
|
||||
}
|
||||
}
|
||||
|
||||
r1.push('>', $translate.instant(f.title), '</th>');
|
||||
}
|
||||
}
|
||||
r1.push('</tr><tr>');
|
||||
r1.push(r2.join(''));
|
||||
r1.push('</tr>');
|
||||
return r1.join('');
|
||||
}
|
||||
|
||||
function tblBody(facets, builds) {
|
||||
var body = [];
|
||||
|
||||
if (builds.length === 0) {
|
||||
return '<td colspan="100" class="cen">No builds added to comparison!</td';
|
||||
}
|
||||
|
||||
for (var i = 0, l = builds.length; i < l; i++) {
|
||||
var b = builds[i];
|
||||
body.push('<tr class="tr">');
|
||||
var href = $state.href('outfit', { shipId: b.id, code: b.code, bn: b.buildName });
|
||||
body.push('<td class="tl"><a href="', href, '">', b.name, '</a></td>');
|
||||
body.push('<td class="tl"><a href="', href, '">', b.buildName, '</a></td>');
|
||||
|
||||
for (var j = 0, fl = facets.length; j < fl; j++) {
|
||||
if (facets[j].active) {
|
||||
var f = facets[j];
|
||||
var p = f.props;
|
||||
for (var k = 0, pl = p.length; k < pl; k++) {
|
||||
body.push('<td>', $rootScope[f.fmt](b[p[k]]), '<u> ', $translate.instant(f.unit), '</u></td>');
|
||||
}
|
||||
}
|
||||
}
|
||||
body.push('</tr>');
|
||||
}
|
||||
|
||||
return body.join('');
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
|
||||
link: function(scope, element) {
|
||||
var header = angular.element('<thead></thead>');
|
||||
var body = angular.element('<tbody></tbody>');
|
||||
element.append(header);
|
||||
element.append(body);
|
||||
|
||||
var updateAll = function() {
|
||||
header.html(tblHeader(scope.facets));
|
||||
body.html(tblBody(scope.facets, scope.builds));
|
||||
};
|
||||
|
||||
scope.$watchCollection('facets', updateAll);
|
||||
scope.$watch('tblUpdate', updateAll);
|
||||
scope.$watchCollection('builds', function() {
|
||||
body.html(tblBody(scope.facets, scope.builds));
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
247
src/app/components/directive-line-chart.js
Normal file
247
src/app/components/directive-line-chart.js
Normal file
@@ -0,0 +1,247 @@
|
||||
angular.module('app').directive('lineChart', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
|
||||
|
||||
var RENDER_POINTS = 20; // Only render 20 points on the graph
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
config: '=',
|
||||
series: '='
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var seriesConfig = scope.series,
|
||||
series = seriesConfig.series,
|
||||
color = d3.scale.ordinal().range(scope.series.colors ? scope.series.colors : ['#ff8c0d']),
|
||||
config = scope.config,
|
||||
labels = config.labels,
|
||||
margin = { top: 15, right: 15, bottom: 35, left: 60 },
|
||||
fmtLong = null,
|
||||
func = seriesConfig.func,
|
||||
drag = d3.behavior.drag(),
|
||||
dragging = false,
|
||||
// Define Scales
|
||||
x = d3.scale.linear(),
|
||||
y = d3.scale.linear(),
|
||||
// Define Axes
|
||||
xAxis = d3.svg.axis().scale(x).outerTickSize(0).orient('bottom'),
|
||||
yAxis = d3.svg.axis().scale(y).ticks(6).outerTickSize(0).orient('left'),
|
||||
data = [];
|
||||
|
||||
// Create chart
|
||||
var svg = d3.select(element[0]).append('svg');
|
||||
var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
var lines = vis.append('g');
|
||||
|
||||
// Define Area
|
||||
var line = d3.svg.line().y(function(d) { return y(d[1]); });
|
||||
|
||||
// Create Y Axis SVG Elements
|
||||
var yTxt = vis.append('g').attr('class', 'y axis')
|
||||
.append('text')
|
||||
.attr('class', 'cap')
|
||||
.attr('transform', 'rotate(-90)')
|
||||
.attr('y', -50)
|
||||
.attr('dy', '.1em')
|
||||
.style('text-anchor', 'middle');
|
||||
|
||||
// Create X Axis SVG Elements
|
||||
var xLbl = vis.append('g').attr('class', 'x axis');
|
||||
var xTxt = xLbl.append('text')
|
||||
.attr('class', 'cap')
|
||||
.attr('y', 30)
|
||||
.attr('dy', '.1em')
|
||||
.style('text-anchor', 'middle');
|
||||
|
||||
// xTxt.append('tspan').attr('class', 'metric');
|
||||
// yTxt.append('tspan').attr('class', 'metric');
|
||||
|
||||
// Create and Add tooltip
|
||||
var tipHeight = 2 + (1.25 * (series ? series.length : 0.75));
|
||||
var tips = vis.append('g').style('display', 'none').attr('class', 'tooltip');
|
||||
var markers = vis.append('g').style('display', 'none');
|
||||
|
||||
tips.append('rect')
|
||||
.attr('height', tipHeight + 'em')
|
||||
.attr('y', (-tipHeight / 2) + 'em')
|
||||
.attr('class', 'tip');
|
||||
|
||||
tips.append('text')
|
||||
.attr('class', 'label x')
|
||||
.attr('dy', (-tipHeight / 2) + 'em')
|
||||
.attr('y', '1.25em');
|
||||
|
||||
var background = vis.append('rect') // Background to capture hover/drag
|
||||
.attr('fill-opacity', 0)
|
||||
.on('mouseover', showTip)
|
||||
.on('mouseout', hideTip)
|
||||
.on('mousemove', moveTip)
|
||||
.call(drag);
|
||||
|
||||
drag
|
||||
.on('dragstart', function() {
|
||||
dragging = true;
|
||||
moveTip.call(this);
|
||||
showTip();
|
||||
})
|
||||
.on('dragend', function() {
|
||||
dragging = false;
|
||||
hideTip();
|
||||
})
|
||||
.on('drag', moveTip);
|
||||
|
||||
updateFormats();
|
||||
|
||||
function render() {
|
||||
var width = element[0].parentElement.offsetWidth,
|
||||
height = width * 0.5 * $rootScope.sizeRatio,
|
||||
xMax = seriesConfig.xMax,
|
||||
xMin = seriesConfig.xMin,
|
||||
yMax = seriesConfig.yMax,
|
||||
yMin = seriesConfig.yMin,
|
||||
w = width - margin.left - margin.right,
|
||||
h = height - margin.top - margin.bottom,
|
||||
c, s, val, yVal, delta;
|
||||
|
||||
data.length = 0; // Reset Data array
|
||||
|
||||
if (seriesConfig.xMax == seriesConfig.xMin) {
|
||||
line.x(function(d, i) { return i * w; });
|
||||
} else {
|
||||
line.x(function(d) { return x(d[0]); });
|
||||
}
|
||||
|
||||
if (series) {
|
||||
for (s = 0; s < series.length; s++) {
|
||||
data.push([]);
|
||||
}
|
||||
|
||||
if (xMax == xMin) {
|
||||
yVal = func(xMin);
|
||||
for (s = 0; s < series.length; s++) {
|
||||
data[s].push( [ xMin, yVal[ series[s] ] ], [ 1, yVal[ series[s] ] ]);
|
||||
}
|
||||
} else {
|
||||
delta = (xMax - xMin) / RENDER_POINTS;
|
||||
val = 0;
|
||||
for (c = 0; c <= RENDER_POINTS; c++) {
|
||||
yVal = func(val);
|
||||
for (s = 0; s < series.length; s++) {
|
||||
data[s].push([ val, yVal[ series[s] ] ]);
|
||||
}
|
||||
val += delta;
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
var seriesData = [];
|
||||
if (xMax == xMin) {
|
||||
yVal = func(xMin);
|
||||
seriesData.push([ xMin, yVal ], [ 1, yVal ]);
|
||||
} else {
|
||||
delta = (xMax - xMin) / RENDER_POINTS;
|
||||
val = 0;
|
||||
for (c = 0; c <= RENDER_POINTS; c++) {
|
||||
seriesData.push([val, func(val) ]);
|
||||
val += delta;
|
||||
}
|
||||
}
|
||||
|
||||
data.push(seriesData);
|
||||
}
|
||||
|
||||
// Update Chart Size
|
||||
svg.attr('width', width).attr('height', height);
|
||||
background.attr('height', h).attr('width', w);
|
||||
|
||||
// Update domain and scale for axes
|
||||
x.range([0, w]).domain([xMin, xMax]).clamp(true);
|
||||
xLbl.attr('transform', 'translate(0,' + h + ')');
|
||||
xTxt.attr('x', w / 2);
|
||||
y.range([h, 0]).domain([yMin, yMax]);
|
||||
yTxt.attr('x', -h / 2);
|
||||
vis.selectAll('.y.axis').call(yAxis);
|
||||
vis.selectAll('.x.axis').call(xAxis);
|
||||
|
||||
lines.selectAll('path.line')
|
||||
.data(data)
|
||||
.attr('d', line) // Update existing series
|
||||
.enter() // Add new series
|
||||
.append('path')
|
||||
.attr('class', 'line')
|
||||
.attr('stroke', function(d, i) { return color(i); })
|
||||
.attr('stroke-width', 2)
|
||||
.attr('d', line);
|
||||
|
||||
tips.selectAll('text.label.y').data(data).enter()
|
||||
.append('text')
|
||||
.attr('class', 'label y')
|
||||
.attr('dy', (-tipHeight / 2) + 'em')
|
||||
.attr('y', function(d, i) { return 1.25 * (i + 2) + 'em'; });
|
||||
|
||||
markers.selectAll('circle.marker').data(data).enter().append('circle').attr('class', 'marker').attr('r', 4);
|
||||
}
|
||||
|
||||
function showTip() {
|
||||
tips.style('display', null);
|
||||
markers.style('display', null);
|
||||
}
|
||||
|
||||
function hideTip() {
|
||||
if (!dragging) {
|
||||
tips.style('display', 'none');
|
||||
markers.style('display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
function moveTip() {
|
||||
var xPos = d3.mouse(this)[0],
|
||||
x0 = x.invert(xPos),
|
||||
y0 = func(x0),
|
||||
yTotal = 0,
|
||||
flip = (x0 / x.domain()[1] > 0.65),
|
||||
tipWidth = 0,
|
||||
minTransY = (tips.selectAll('rect').node().getBoundingClientRect().height / 2) - margin.top;
|
||||
|
||||
tips.selectAll('text.label.y').text(function(d, i) {
|
||||
var yVal = series ? y0[series[i]] : y0;
|
||||
yTotal += yVal;
|
||||
return (series ? $translate.instant(series[i]) : '') + ' ' + fmtLong(yVal);
|
||||
}).append('tspan').attr('class', 'metric').text(' ' + $translate.instant(labels.yAxis.unit));
|
||||
|
||||
tips.selectAll('text').each(function() {
|
||||
if (this.getBBox().width > tipWidth) {
|
||||
tipWidth = Math.ceil(this.getBBox().width);
|
||||
}
|
||||
});
|
||||
|
||||
tipWidth += 8;
|
||||
markers.selectAll('circle.marker').attr('cx', x(x0)).attr('cy', function(d, i) { return y(series ? y0[series[i]] : y0); });
|
||||
tips.selectAll('text.label').attr('x', flip ? -12 : 12).style('text-anchor', flip ? 'end' : 'start');
|
||||
tips.selectAll('text.label.x').text(fmtLong(x0)).append('tspan').attr('class', 'metric').text(' ' + $translate.instant(labels.xAxis.unit));
|
||||
tips.attr('transform', 'translate(' + x(x0) + ',' + Math.max(minTransY, y(yTotal / (series ? series.length : 1))) + ')');
|
||||
tips.selectAll('rect')
|
||||
.attr('width', tipWidth + 4)
|
||||
.attr('x', flip ? -tipWidth - 12 : 8)
|
||||
.style('text-anchor', flip ? 'end' : 'start');
|
||||
|
||||
}
|
||||
|
||||
function updateFormats() {
|
||||
xTxt.text($translate.instant(labels.xAxis.title)).append('tspan').attr('class', 'metric').text(' (' + $translate.instant(labels.xAxis.unit) + ')');
|
||||
yTxt.text($translate.instant(labels.yAxis.title)).append('tspan').attr('class', 'metric').text(' (' + $translate.instant(labels.yAxis.unit) + ')');
|
||||
fmtLong = $rootScope.localeFormat.numberFormat('.2f');
|
||||
xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
|
||||
yAxis.tickFormat($rootScope.localeFormat.numberFormat('.3r'));
|
||||
render();
|
||||
}
|
||||
|
||||
angular.element($window).bind('orientationchange resize render', render);
|
||||
scope.$watchCollection('series', render); // Watch for changes in the series data
|
||||
scope.$on('languageChanged', updateFormats);
|
||||
scope.$on('$destroy', function() {
|
||||
angular.element($window).unbind('orientationchange resize render', render);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
}]);
|
||||
209
src/app/components/directive-power-bands.js
Normal file
209
src/app/components/directive-power-bands.js
Normal file
@@ -0,0 +1,209 @@
|
||||
angular.module('app').directive('powerBands', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
bands: '=',
|
||||
available: '='
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var bands = null,
|
||||
available = 0,
|
||||
maxBand,
|
||||
maxPwr,
|
||||
deployedSum = 0,
|
||||
retractedSum = 0,
|
||||
retBandsSelected = false,
|
||||
depBandsSelected = false,
|
||||
wattScale = d3.scale.linear(),
|
||||
pctScale = d3.scale.linear().domain([0, 1]),
|
||||
wattFmt,
|
||||
pctFmt,
|
||||
wattAxis = d3.svg.axis().scale(wattScale).outerTickSize(0).orient('top'),
|
||||
pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom'),
|
||||
// Create chart
|
||||
svg = d3.select(element[0]).append('svg'),
|
||||
vis = svg.append('g'),
|
||||
deployed = vis.append('g').attr('class', 'power-band'),
|
||||
retracted = vis.append('g').attr('class', 'power-band');
|
||||
|
||||
svg.on('contextmenu', function() {
|
||||
if (!d3.event.shiftKey) {
|
||||
d3.event.preventDefault();
|
||||
for (var i = 0, l = bands.length; i < l; i++) {
|
||||
bands[i].retSelected = false;
|
||||
bands[i].depSelected = false;
|
||||
}
|
||||
dataChange();
|
||||
}
|
||||
});
|
||||
|
||||
// Create Y Axis SVG Elements
|
||||
var wattAxisGroup = vis.append('g').attr('class', 'watt axis');
|
||||
vis.append('g').attr('class', 'pct axis');
|
||||
var retText = vis.append('text').attr('x', -3).style('text-anchor', 'end').attr('dy', '0.5em').attr('class', 'primary upp');
|
||||
var depText = vis.append('text').attr('x', -3).style('text-anchor', 'end').attr('dy', '0.5em').attr('class', 'primary upp');
|
||||
var retLbl = vis.append('text').attr('dy', '0.5em');
|
||||
var depLbl = vis.append('text').attr('dy', '0.5em');
|
||||
|
||||
updateFormats(true);
|
||||
|
||||
function dataChange() {
|
||||
bands = scope.bands;
|
||||
available = scope.available;
|
||||
maxBand = bands[bands.length - 1];
|
||||
deployedSum = 0;
|
||||
retractedSum = 0;
|
||||
retBandsSelected = false;
|
||||
depBandsSelected = false;
|
||||
maxPwr = Math.max(available, maxBand.retractedSum, maxBand.deployedSum);
|
||||
|
||||
for (var b = 0, l = bands.length; b < l; b++) {
|
||||
if (bands[b].retSelected) {
|
||||
retractedSum += bands[b].retracted + bands[b].retOnly;
|
||||
retBandsSelected = true;
|
||||
}
|
||||
if (bands[b].depSelected) {
|
||||
deployedSum += bands[b].deployed + bands[b].retracted;
|
||||
depBandsSelected = true;
|
||||
}
|
||||
}
|
||||
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
var size = $rootScope.sizeRatio,
|
||||
mTop = Math.round(25 * size),
|
||||
mRight = Math.round(130 * size),
|
||||
mBottom = Math.round(25 * size),
|
||||
mLeft = Math.round(45 * size),
|
||||
barHeight = Math.round(20 * size),
|
||||
width = element[0].offsetWidth,
|
||||
innerHeight = (barHeight * 2) + 2,
|
||||
height = innerHeight + mTop + mBottom,
|
||||
w = width - mLeft - mRight,
|
||||
repY = (barHeight / 2),
|
||||
depY = (barHeight * 1.5) - 1;
|
||||
|
||||
// Update chart size
|
||||
svg.attr('width', width).attr('height', height);
|
||||
vis.attr('transform', 'translate(' + mLeft + ',' + mTop + ')');
|
||||
|
||||
// Remove existing elements
|
||||
retracted.selectAll('rect').remove();
|
||||
retracted.selectAll('text').remove();
|
||||
deployed.selectAll('rect').remove();
|
||||
deployed.selectAll('text').remove();
|
||||
wattAxisGroup.selectAll('line.threshold').remove();
|
||||
|
||||
// Update X & Y Axis
|
||||
wattScale.range([0, w]).domain([0, maxPwr]).clamp(true);
|
||||
pctScale.range([0, w]).domain([0, maxPwr / available]).clamp(true);
|
||||
wattAxisGroup.call(wattAxis);
|
||||
vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
|
||||
|
||||
var pwrWarningClass = 'threshold' + (bands[0].retractedSum * 2 >= available ? ' exceeded' : '');
|
||||
vis.select('.pct.axis g:nth-child(6)').selectAll('line, text').attr('class', pwrWarningClass);
|
||||
|
||||
wattAxisGroup.append('line')
|
||||
.attr('x1', pctScale(0.5))
|
||||
.attr('x2', pctScale(0.5))
|
||||
.attr('y1', 0)
|
||||
.attr('y2', innerHeight)
|
||||
.attr('class', pwrWarningClass);
|
||||
|
||||
retText.attr('y', repY);
|
||||
depText.attr('y', depY);
|
||||
updateLabel(retLbl, w, repY, retBandsSelected, retBandsSelected ? retractedSum : maxBand.retractedSum, available);
|
||||
updateLabel(depLbl, w, depY, depBandsSelected, depBandsSelected ? deployedSum : maxBand.deployedSum, available);
|
||||
|
||||
retracted.selectAll('rect').data(bands).enter().append('rect')
|
||||
.attr('height', barHeight)
|
||||
.attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.retracted + d.retOnly), 0)); })
|
||||
.attr('x', function(d) { return Math.floor(Math.max(wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly), 0)); })
|
||||
.attr('y', 1)
|
||||
.on('click', function(d) {
|
||||
d.retSelected = !d.retSelected;
|
||||
dataChange();
|
||||
})
|
||||
.attr('class', function(d) { return getClass(d.retSelected, d.retractedSum, available); });
|
||||
|
||||
retracted.selectAll('text').data(bands).enter().append('text')
|
||||
.attr('x', function(d) { return wattScale(d.retractedSum) - (wattScale(d.retracted + d.retOnly) / 2); })
|
||||
.attr('y', repY)
|
||||
.attr('dy', '0.5em')
|
||||
.style('text-anchor', 'middle')
|
||||
.attr('class', 'primary-bg')
|
||||
.on('click', function(d) {
|
||||
d.retSelected = !d.retSelected;
|
||||
dataChange();
|
||||
})
|
||||
.text(function(d, i) { return bandText(d.retracted + d.retOnly, i); });
|
||||
|
||||
deployed.selectAll('rect').data(bands).enter().append('rect')
|
||||
.attr('height', barHeight)
|
||||
.attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.deployed + d.retracted), 0)); })
|
||||
.attr('x', function(d) { return Math.floor(Math.max(wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed), 0)); })
|
||||
.attr('y', barHeight + 1)
|
||||
.on('click', function(d) {
|
||||
d.depSelected = !d.depSelected;
|
||||
dataChange();
|
||||
})
|
||||
.attr('class', function(d) { return getClass(d.depSelected, d.deployedSum, available); });
|
||||
|
||||
deployed.selectAll('text').data(bands).enter().append('text')
|
||||
.attr('x', function(d) { return wattScale(d.deployedSum) - ((wattScale(d.retracted) + wattScale(d.deployed)) / 2); })
|
||||
.attr('y', depY)
|
||||
.attr('dy', '0.5em')
|
||||
.style('text-anchor', 'middle')
|
||||
.attr('class', 'primary-bg')
|
||||
.on('click', function(d) {
|
||||
d.depSelected = !d.depSelected;
|
||||
dataChange();
|
||||
})
|
||||
.text(function(d, i) { return bandText(d.deployed + d.retracted, i); });
|
||||
}
|
||||
|
||||
function updateLabel(lbl, width, y, selected, sum, avail) {
|
||||
lbl
|
||||
.attr('x', width + 5 )
|
||||
.attr('y', y)
|
||||
.attr('class', getClass(selected, sum, avail))
|
||||
.text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / avail)) + ')');
|
||||
}
|
||||
|
||||
function getClass(selected, sum, avail) {
|
||||
// Round to avoid floating point precision errors
|
||||
return selected ? 'secondary' : ((Math.round(sum * 100) / 100) >= avail) ? 'warning' : 'primary';
|
||||
}
|
||||
|
||||
function bandText(val, index) {
|
||||
if (val > 0 && wattScale(val) > 13) {
|
||||
return index + 1;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function updateFormats(preventRender) {
|
||||
retText.text($translate.instant('ret'));
|
||||
depText.text($translate.instant('dep'));
|
||||
wattFmt = $rootScope.localeFormat.numberFormat('.2f');
|
||||
pctFmt = $rootScope.localeFormat.numberFormat('.1%');
|
||||
wattAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
|
||||
pctAxis.tickFormat($rootScope.localeFormat.numberFormat('%'));
|
||||
if (!preventRender) {
|
||||
render();
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for changes to data and events
|
||||
angular.element($window).bind('pwrchange', dataChange);
|
||||
angular.element($window).bind('orientationchange resize', render);
|
||||
scope.$watchCollection('available', dataChange);
|
||||
scope.$on('languageChanged', updateFormats);
|
||||
scope.$on('$destroy', function() {
|
||||
angular.element($window).unbind('orientationchange resize pwrchange', render);
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
90
src/app/components/directive-slider.js
Normal file
90
src/app/components/directive-slider.js
Normal file
@@ -0,0 +1,90 @@
|
||||
angular.module('app').directive('slider', ['$window', function($window) {
|
||||
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
min: '=',
|
||||
def: '=',
|
||||
max: '=',
|
||||
unit: '=',
|
||||
change: '&onChange',
|
||||
ignoreResize: '='
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var unit = scope.unit,
|
||||
margin = unit ? { top: -10, right: 145, left: 50 } : { top: 0, right: 10, left: 10 },
|
||||
height = unit ? 40 : 20, // Height is fixed
|
||||
h = height - margin.top,
|
||||
fmt = d3.format('.2f'),
|
||||
pct = d3.format('.1%'),
|
||||
def = scope.def !== undefined ? scope.def : scope.max,
|
||||
val = def,
|
||||
svg = d3.select(element[0]).append('svg'),
|
||||
vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
|
||||
xAxisContainer = vis.append('g').attr('class', 'x slider-axis').attr('transform', 'translate(0,' + h / 2 + ')'),
|
||||
x = d3.scale.linear(),
|
||||
xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12),
|
||||
slider = vis.append('g').attr('class', 'slider'),
|
||||
filled = slider.append('path').attr('class', 'filled').attr('transform', 'translate(0,' + h / 2 + ')'),
|
||||
brush = d3.svg.brush().x(x).extent([scope.max, scope.max]).on('brush', brushed),
|
||||
handle = slider.append('circle').attr('class', 'handle').attr('r', '0.6em'),
|
||||
lbl = unit ? slider.append('g').append('text').attr('y', h / 2) : null;
|
||||
|
||||
slider.call(brush);
|
||||
slider.select('.background').attr('height', h);
|
||||
handle.attr('transform', 'translate(0,' + h / 2 + ')');
|
||||
|
||||
function render() {
|
||||
var width = element[0].offsetWidth, w = width - margin.left - margin.right;
|
||||
svg.attr('width', width).attr('height', height);
|
||||
x.domain([scope.min || 0, scope.max]).range([0, w]).clamp(true);
|
||||
handle.attr('cx', x(val));
|
||||
if (unit) {
|
||||
xAxisContainer.call(xAxis.tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max]));
|
||||
lbl.attr('x', w + 20);
|
||||
}
|
||||
slider.call(brush.extent([val, val]));
|
||||
drawBrush();
|
||||
slider.selectAll('.extent,.resize').remove();
|
||||
}
|
||||
|
||||
function brushed() {
|
||||
val = x.invert(d3.mouse(this)[0]);
|
||||
brush.extent([val, val]);
|
||||
scope.change({ val: val });
|
||||
drawBrush();
|
||||
}
|
||||
|
||||
function drawBrush() {
|
||||
if (unit) {
|
||||
lbl.text(fmt(val) + ' ' + unit + ' ' + pct(val / scope.max));
|
||||
}
|
||||
handle.attr('cx', x(val));
|
||||
filled.attr('d', 'M0,0V0H' + x(val) + 'V0');
|
||||
}
|
||||
|
||||
/**
|
||||
* Watch for changes in the max, window size
|
||||
*/
|
||||
scope.$watch('max', function(newMax, oldMax) {
|
||||
val = newMax * (val / oldMax); // Retain percentage filled
|
||||
scope.change({ val: val });
|
||||
render();
|
||||
});
|
||||
|
||||
if (!scope.ignoreResize) {
|
||||
angular.element($window).bind('orientationchange resize', render);
|
||||
}
|
||||
|
||||
scope.$on('reset', function(e, resetVal) {
|
||||
val = resetVal;
|
||||
drawBrush();
|
||||
});
|
||||
|
||||
scope.$on('$destroy', function() {
|
||||
angular.element($window).unbind('orientationchange resize render', render);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
}]);
|
||||
Reference in New Issue
Block a user