Kilian/xkhofmann-fss-aircraft-boeing-727-200f-sb-fplan
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ensure proper 2024

Browse Source
This commit is contained in:
Kilian Hofmann
2025-02-22 19:17:54 +01:00
parent eb3c96361a
commit 8d91bcbe74
8 changed files with 167 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gauge/src/App.tsx
+17 -10
View File
@@ -9,17 +9,21 @@ interface AppProps {
const App: FC<AppProps> = ({ type }) => {
const [contentOFP, setContentOFP] = useState('');
const [contentTLR, setContentTLR] = useState('');
const [page, setPage] = useState(0);
const [position, setPosition] = useState(1);
const [loading, setLoading] = useState(false);
const loopRef = useRef<number | undefined>(undefined);
useEffect(() => {
loopRef.current = setInterval(() => {
const flag = SimVar.GetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'bool');
const flag = SimVar.GetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'number');
const pos = SimVar.GetSimVarValue('L:KH_FE_FPLAN_BOARD', 'number');
if (flag) {
SimVar.SetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'bool', 0);
SimVar.SetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'number', 0);
getSB();
}
// does not rerender if prev === pos since state set with identical value
// does not trigger rerender
setPosition((prev) => (prev !== pos ? pos : prev));
}, 100);
return () => clearInterval(loopRef.current);
@@ -31,12 +35,14 @@ const App: FC<AppProps> = ({ type }) => {
return JSON.parse(config).simBriefId as string;
} catch (e) {
console.error('Failed loading config.', e);
return null;
throw e;
}
};
const getSB = async () => {
try {
setLoading(true);
const res = await fetch(`https://www.simbrief.com/api/xml.fetcher.php?username=${sbID()}&json=1`);
if (res.ok) {
try {
@@ -53,10 +59,13 @@ const App: FC<AppProps> = ({ type }) => {
}
} catch (e) {
console.error('FETCH ERR', e);
} finally {
setLoading(false);
}
};
const reloadSB = () => {
if (loading) return;
SimVar.SetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'bool', 1);
};
@@ -66,20 +75,18 @@ const App: FC<AppProps> = ({ type }) => {
<OFP
content={contentOFP}
position={position}
page={page}
page={0}
loading={loading}
reload={reloadSB}
setPosition={setPosition}
setPage={setPage}
/>
)}
{type === 'tlr' && (
<TLR
content={contentTLR}
position={position}
page={page}
page={1}
loading={loading}
reload={reloadSB}
setPosition={setPosition}
setPage={setPage}
/>
)}
</>
Gauge/src/components/controls/controls.scss
+35 -9
View File
@@ -10,21 +10,47 @@
padding-left: 7px;
padding-right: 7px;
.icon {
width: 30px;
margin-top: 6px;
}
&:hover:not([disabled]) {
background-color: var(--buttonHoverColor);
}
&.d180 {
transform: rotate(180deg);
.icon-container {
margin: 6px;
width: 30px;
height: 30px;
.icon {
width: 30px;
height: 30px;
&.d180 {
transform: rotate(180deg);
}
&.d90 {
transform: rotate(90deg);
}
}
.loader {
width: 30px;
height: 30px;
border: 5px solid black;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
}
&.d90 {
transform: rotate(90deg);
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
}
Gauge/src/components/controls/controls.tsx
+40 -32
View File
@@ -1,22 +1,19 @@
import { Dispatch, FC, RefObject, SetStateAction } from 'react';
import { FC, RefObject } from 'react';
import './controls.scss';
interface ControlsProps {
containerRef: RefObject<HTMLDivElement | null>;
position: number;
page: number;
loading: boolean;
reload: () => void;
setPosition: Dispatch<SetStateAction<number>>;
setPage: Dispatch<SetStateAction<number>>;
}
const Controls: FC<ControlsProps> = ({ containerRef, position, page, reload, setPosition, setPage }) => {
const Controls: FC<ControlsProps> = ({ containerRef, position, page, loading, reload }) => {
const cycle = () => {
setPage((prev) => {
const _new = (prev + 1) % 2;
SimVar.SetSimVarValue('KH_FE_FPLAN_P1', 'bool', _new);
return _new;
});
if (page === 0) SimVar.SetSimVarValue('L:KH_FE_FPLAN_P1', 'number', 1);
if (page === 1) SimVar.SetSimVarValue('L:KH_FE_FPLAN_P1', 'number', 0);
};
const toTop = () => {
@@ -26,43 +23,54 @@ const Controls: FC<ControlsProps> = ({ containerRef, position, page, reload, set
};
const switchPosition = () => {
setPosition((prev) => {
let _new = prev;
if (position === 1) _new = 2;
else if (position === 2) _new = 1;
SimVar.SetSimVarValue('KH_FE_FPLAN_BOARD', 'number', _new);
return _new;
});
let _position = SimVar.GetSimVarValue('L:KH_FE_FPLAN_BOARD', 'number');
if (_position === 1) _position = 2;
else if (_position === 2) _position = 1;
SimVar.SetSimVarValue('L:KH_FE_FPLAN_BOARD', 'number', _position);
};
return (
<div id="KH_CTRL">
{page === 1 && (
<div className="button" onClick={cycle}>
<img className="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
<div className="icon-container">
<img className="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
</div>
</div>
)}
<div className="button d90" onClick={toTop}>
<img className="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
<div className="button" onClick={toTop}>
<div className="icon-container">
<img className="icon d90" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
</div>
</div>
<div className="button" onClick={reload}>
<img className="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/cloud.png" />
<div className="icon-container">
{loading ? (
<span className="loader" />
) : (
<img className="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/cloud.png" />
)}
</div>
</div>
<div className="button" onClick={switchPosition}>
<img
className="icon"
src={
position === 1
? '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/compass.png'
: position === 2
? '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/wrench.png'
: ''
}
/>
<div className="icon-container">
<img
className="icon"
src={
position === 1
? '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/compass.png'
: position === 2
? '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/wrench.png'
: ''
}
/>
</div>
</div>
{page === 0 && (
<div className="button d180" onClick={cycle}>
<img className="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
<div className="button" onClick={cycle}>
<div className="icon-container">
<img className="icon d180" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
</div>
</div>
)}
</div>
Gauge/src/components/ofp/ofp.tsx
+13 -15
View File
@@ -1,20 +1,21 @@
import { createRef, Dispatch, FC, SetStateAction, useEffect } from 'react';
import { createRef, FC, useEffect } from 'react';
import Controls from '../controls/controls';
interface TLRProps {
content: string;
position: number;
page: number;
loading: boolean;
reload: () => void;
setPosition: Dispatch<SetStateAction<number>>;
setPage: Dispatch<SetStateAction<number>>;
}
const OFP: FC<TLRProps> = ({ content, position, page, reload, setPosition, setPage }) => {
const OFP: FC<TLRProps> = ({ content, position, page, loading, reload }) => {
const containerRef = createRef<HTMLDivElement>();
const defineDragScroll = (horizontalScroll = true, verticalScroll = true) => {
if (!containerRef.current) return;
if (!containerRef.current) return () => {};
const refCopy = containerRef.current;
let pos = { top: 0, left: 0, x: 0, y: 0 };
@@ -53,25 +54,22 @@ const OFP: FC<TLRProps> = ({ content, position, page, reload, setPosition, setPa
};
containerRef.current.addEventListener('mousedown', mouseDownHandler);
return () => {
refCopy.removeEventListener('mousedown', mouseDownHandler);
};
};
useEffect(() => {
defineDragScroll();
}, [containerRef.current]);
return defineDragScroll();
});
return (
<>
<div ref={containerRef} id="KH_FE_FPLAN" className="p2">
<div id="OFP" dangerouslySetInnerHTML={{ __html: content }} />
</div>
<Controls
containerRef={containerRef}
position={position}
page={page}
reload={reload}
setPosition={setPosition}
setPage={setPage}
/>
<Controls containerRef={containerRef} position={position} page={page} loading={loading} reload={reload} />
</>
);
};
Gauge/src/components/tlr/tlr.tsx
+4 -12
View File
@@ -1,16 +1,15 @@
import { createRef, Dispatch, FC, SetStateAction, useEffect } from 'react';
import { createRef, FC, useEffect } from 'react';
import Controls from '../controls/controls';
interface TLRProps {
content: string;
position: number;
page: number;
loading: boolean;
reload: () => void;
setPosition: Dispatch<SetStateAction<number>>;
setPage: Dispatch<SetStateAction<number>>;
}
const TLR: FC<TLRProps> = ({ content, position, page, reload, setPosition, setPage }) => {
const TLR: FC<TLRProps> = ({ content, position, page, loading, reload }) => {
const containerRef = createRef<HTMLDivElement>();
const defineDragScroll = (horizontalScroll = true, verticalScroll = true) => {
@@ -68,14 +67,7 @@ const TLR: FC<TLRProps> = ({ content, position, page, reload, setPosition, setPa
</div>
</div>
</div>
<Controls
containerRef={containerRef}
position={position}
page={page}
reload={reload}
setPosition={setPosition}
setPage={setPage}
/>
<Controls containerRef={containerRef} position={position} page={page} loading={loading} reload={reload} />
</>
);
};
Gauge/src/index.tsx
+1 -11
View File
@@ -4,8 +4,8 @@
/// <reference types="@microsoft/msfs-types/js/simvar" />
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.scss';
class KH_FE_FPLAN extends BaseInstrument {
@@ -37,16 +37,6 @@ class KH_FE_FPLAN extends BaseInstrument {
const root = createRoot(container);
root.render(<App type={type} />);
}
/*
FSComponent.render(
<>
{type === 'ofp' && <OFP content={this.contentOFP} position={this.position} reload={this.reloadSB} />}
{type === 'tlr' && <TLR content={this.contentTLR} position={this.position} reload={this.reloadSB} />}
</>,
document.getElementById('root')
);
*/
}
}