refactor(efb): few fixes and restructuring 🥚 (flybywiresim#3344)

* some refactoring 🥚 * add smooth transition in navbar 😺 * fix wrong status bar time ⌛
Mickepilot · Feb 6, 2021 · 359af5b · 359af5b
1 parent aff960b
commit 359af5b
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 123 deletions.
diff --git a/A32NX/SimObjects/AirPlanes/Asobo_A320_NEO/model/A320_NEO_INTERIOR.xml b/A32NX/SimObjects/AirPlanes/Asobo_A320_NEO/model/A320_NEO_INTERIOR.xml
@@ -43,7 +43,7 @@
             </DefaultTemplateParameters>
 
             <UseTemplate Name="ASOBO_GT_Material_Emissive_Code">
-                <EMISSIVE_CODE>0.7</EMISSIVE_CODE>
+                <EMISSIVE_CODE>0.6</EMISSIVE_CODE>
             </UseTemplate>
 
             <UseTemplate Name="ASOBO_GT_Interaction_LeftSingle_Code">
@@ -1411,7 +1411,7 @@
 
                     <SEQ1_CODE>(L:A32NX_APU_MASTER_FAULT, Bool)</SEQ1_CODE>
                     <SEQ2_CODE>(L:A32NX_APU_MASTER_SW_ACTIVATED, Bool)</SEQ2_CODE>
-                    
+
                     <TOOLTIPID>%((L:A32NX_APU_MASTER_SW_ACTIVATED, Bool))%{if}TT:COCKPIT.TOOLTIPS.APU_SWITCH_TURN_OFF%{else}TT:COCKPIT.TOOLTIPS.APU_SWITCH_TURN_ON%{end}</TOOLTIPID>
                 </UseTemplate>
 

diff --git a/package.json b/package.json
@@ -57,19 +57,19 @@
     "webpack-dev-server": "^3.11.1"
   },
   "dependencies": {
-    "byte-data": "^19.0.1",
     "@flybywiresim/api-client": "~0.7.0",
     "@flybywiresim/map": "~0.4.2",
     "@tabler/icons": "^1.38.0",
+    "@tailwindcss/postcss7-compat": "^2.0.2",
     "aewx-metar-parser": "~0.10.1",
+    "byte-data": "^19.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-leaflet": "~3.0.5",
     "react-router": "~5.2.0",
     "react-router-dom": "~5.2.0",
-    "react-leaflet": "~3.0.5",
     "rollup-plugin-scss": "^2.6.1",
     "sass": "~1.30.0",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"
   }
 }
diff --git a/src/instruments/src/EFB/Assets/Boot.scss b/src/instruments/src/EFB/Assets/Boot.scss
diff --git a/src/instruments/src/EFB/Assets/Efb.scss b/src/instruments/src/EFB/Assets/Efb.scss
@@ -16,6 +16,63 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+  font-family: 'Nunito Sans', sans-serif;
+  letter-spacing: .35px;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+  Custom CSS for a32nx [EFB]
+
+*/
+
+.loading-screen {
+  @apply bg-black text-4xl font-thin text-gray-100;
+
+  .center {
+    padding: 475px 0;
+    @apply text-center;
+
+    .placeholder {
+      @apply w-full flex justify-center items-center;
+    }
+  }
+
+  .loading-bar {
+    @apply flex justify-center mx-auto bg-gray-500;
+    margin-top: 16px;
+    height: 3px;
+    width: 200px;
+  }
+
+  .loaded {
+    @apply w-full h-full bg-white;
+    animation: 6s linear infinite loading;
+    transform-origin: 0%;
+  }
+
+  @keyframes loading {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(100%);
+    }
+  }
+}
+
+.fbw-logo {
+  width: 5rem;
+  margin-right: 16px;
+}
+
 .flip-vertical {
   transform: scaleX(-1);
-}
+}
diff --git a/src/instruments/src/EFB/Components/Navbar.tsx b/src/instruments/src/EFB/Components/Navbar.tsx
@@ -25,7 +25,7 @@ export type NavbarProps = {
 
 const c = {
     active: "border-b-2 text-white px-3 pb-2 font-medium",
-    inactive: "text-white hover:text-blue-light px-3 pb-2 font-medium"
+    inactive: "text-white hover:text-blue-light px-3 pb-2 font-medium transition duration-300"
 };
 
 export const Navbar = (props: NavbarProps) => {
@@ -53,4 +53,4 @@ export const Navbar = (props: NavbarProps) => {
             </div>
         </nav>
     );
-};
+};
diff --git a/src/instruments/src/EFB/Dashboard/Dashboard.tsx b/src/instruments/src/EFB/Dashboard/Dashboard.tsx
@@ -91,10 +91,8 @@ class Dashboard extends React.Component<DashboardProps, DashboardState> {
                 <div className="w-5/12 ml-4">
                     <h1 className="text-white font-medium mb-4 text-2xl">Map</h1>
 
-                    <div className="bg-gray-800 rounded-xl text-white overflow-hidden">
-                        <div className="w-full h-map rounded-lg overflow-hidden">
-                            <Map currentFlight={this.props.currentFlight} disableMenu={true} hideOthers={true} />
-                        </div>
+                    <div className="w-full h-map rounded-lg overflow-hidden">
+                        <Map currentFlight={this.props.currentFlight} disableMenu={true} hideOthers={true} />
                     </div>
                 </div>
             </div>

diff --git a/src/instruments/src/EFB/Dashboard/Widgets/WeatherWidget.tsx b/src/instruments/src/EFB/Dashboard/Widgets/WeatherWidget.tsx
@@ -138,23 +138,6 @@ const Barometer = {
     mb:     0,
 };
 
-const MetarParserTypeState: MetarParserType = {
-    raw_text: "",
-    raw_parts: [""],
-    icao: "",
-    observed: new Date,
-    wind: MetarParserTypeWindState,
-    visibility: Visibility,
-    conditions: [ConditionCode],
-    clouds: [Cloud],
-    ceiling: Ceiling,
-    temperature: Temperature,
-    dewpoint: Dewpoint,
-    humidity_percent: 0,
-    barometer: Barometer,
-    flight_category: "",
-};
-
 const MetarParserTypeProp: MetarParserType = {
     raw_text: "",
     raw_parts: [""],
@@ -177,7 +160,6 @@ type WeatherWidgetProps = { name: string, editIcao: string, icao: string };
 const WeatherWidget = (props: WeatherWidgetProps) => {
 
     const [metar, setMetar] = useState<MetarParserType>(MetarParserTypeProp);
-    const [modalStatus, setModalStatus] = useState(false);
 
     // This could be modified using the Settings tab perhaps?
     const source = "vatsim";
@@ -211,10 +193,6 @@ const WeatherWidget = (props: WeatherWidgetProps) => {
         getMetar(props.icao, source);
     }, [props.icao]);
 
-    function showModal() {
-        setModalStatus(!modalStatus);
-    }
-
     return (
         <div className="bg-gray-800 rounded-xl p-6 text-white mb-4 shadow-lg" id={'weather-card-' + props.name}>
             {metar === undefined ?
@@ -225,7 +203,7 @@ const WeatherWidget = (props: WeatherWidgetProps) => {
                         {props.editIcao == "yes" ?
                             <>
                                 <IconAccessPoint size={35} stroke={1.5} strokeLinejoin="miter" />
-                                <input className="ml-12 border-none focus:outline-none text-2xl bg-transparent font-medium uppercase"
+                                <input className="input ml-2 border-none focus:outline-none text-2xl bg-transparent font-medium uppercase"
                                     type="text"
                                     placeholder={props.icao}
                                     onChange={handleIcao} />
@@ -247,25 +225,25 @@ const WeatherWidget = (props: WeatherWidgetProps) => {
                             <div className="flex justify-center">
                                 <IconWind className="mb-2" size={35} stroke={1.5} strokeLinejoin="miter" />
                             </div>
-                            {metar.wind.degrees.toFixed(0)} <IconPoint className="inline-block -mx-1" size={20} stroke={1.5} strokeLinejoin="miter" /> / {metar.wind.speed_kts.toFixed(0)} kts
+                            {metar.wind.degrees.toFixed(0)} <IconPoint className="inline-block -mx-1 -mt-3" size={20} stroke={2} strokeLinejoin="miter" /> / {metar.wind.speed_kts.toFixed(0)} kts
                         </div>
                         <div className="text-center text-lg mt-3">
                             <div className="flex justify-center">
                                 <IconTemperature className="mb-2" size={35} stroke={1.5} strokeLinejoin="miter" />
                             </div>
-                            {metar.temperature.celsius.toFixed(0)} <IconPoint className="inline-block -mx-1" size={20} stroke={1.5} strokeLinejoin="miter" /> C
+                            {metar.temperature.celsius.toFixed(0)} <IconPoint className="inline-block -mx-1 -mt-3" size={20} stroke={2} strokeLinejoin="miter" /> C
                         </div>
                         <div className="text-center text-lg mt-3">
                             <div className="flex justify-center">
                                 <IconDroplet className="mb-2" size={35} stroke={1.5} strokeLinejoin="miter" />
                             </div>
-                            {metar.dewpoint.celsius.toFixed(0)} <IconPoint className="inline-block -mx-1" size={20} stroke={1.5} strokeLinejoin="miter" /> C
+                            {metar.dewpoint.celsius.toFixed(0)} <IconPoint className="inline-block -mx-1 -mt-3" size={20} stroke={2} strokeLinejoin="miter" /> C
                         </div>
                     </div>
                 </div>
                 <div>
                     {
-                        <span className="font-medium leading-7"><IconRouter className="mr-2 inline-block" size={23} stroke={1.5} strokeLinejoin="miter" /> {metar.raw_text !== "" ? metar.raw_text : '-------------------------------------------------'}</span>
+                        <span className="font-medium leading-4"><IconRouter className="mr-2 inline-block -mt-2" size={23} stroke={1.5} strokeLinejoin="miter" /> {metar.raw_text !== "" ? metar.raw_text : '-------------------------------------------------'}</span>
                     }
                 </div>
                 </>

diff --git a/src/instruments/src/EFB/StatusBar/StatusBar.tsx b/src/instruments/src/EFB/StatusBar/StatusBar.tsx
@@ -70,7 +70,7 @@ export default class StatusBar extends React.Component<TimeProps, any> {
         return (
             <div className="flex items-center justify-between px-6 py-1 text-white font-medium leading-none">
                 <div>flyPad</div>
-                <div>{formatTime(([this.state.currentTime.getUTCHours(), this.state.currentTime.getMinutes()])) + 'z'}</div>
+                <div>{formatTime(([this.state.currentTime.getUTCHours(), this.state.currentTime.getUTCMinutes()])) + 'z'}</div>
                 <div className="flex items-center">
                     <IconWifi className="mr-2" size={22} stroke={1.5} strokeLinejoin="miter" />
                     100%

diff --git a/src/instruments/src/EFB/index-web.tsx b/src/instruments/src/EFB/index-web.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import './Assets/Boot.scss';
+import './Assets/Efb.scss';
 
 import React from "react";
 import ReactDOM from "react-dom";

diff --git a/src/instruments/src/EFB/index.jsx b/src/instruments/src/EFB/index.jsx
@@ -24,7 +24,7 @@ import {
 } from '../util.mjs';
 import logo from './Assets/fbw-logo.svg';
 
-import './Assets/Boot.scss';
+import './Assets/Efb.scss';
 
 function ScreenLoading() {
     return (
@@ -61,7 +61,7 @@ function EFBLoad() {
                     setLoadingTimeout(setTimeout(() => {
                         setSimVar('L:A32NX_EFB_TURNED_ON', 2, 'number');
                         setLoadingTimeout(undefined);
-                    }, 6_000));
+                    }, 6000));
                 }
                 break;
             case 2: