Skip to content

Commit 75fa2f3

Browse files
committed
Feature: Create Development tab
Cleanup: Remove commented-out test code
1 parent 787bd17 commit 75fa2f3

File tree

8 files changed

+158
-5
lines changed

8 files changed

+158
-5
lines changed

locales/en/messages.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,9 @@
340340
"tabOptions": {
341341
"message": "Options"
342342
},
343+
"tabDevelopment": {
344+
"message": "Development"
345+
},
343346

344347
"tabSetup": {
345348
"message": "Setup"
@@ -6279,7 +6282,7 @@
62796282
"message": "RSSI dBm",
62806283
"description": "Text of the RSSI dBm alarm"
62816284
},
6282-
6285+
62836286
"osdWarningTextArmingDisabled": {
62846287
"message": "Arming disabled",
62856288
"description": "One of the warnings that can be selected to be shown in the OSD"

src/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@
133133
<li class="tab_help" id="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help" i18n_title="tabHelp"></a></li>
134134
<li class="tab_options" id="tab_options"><a href="#" i18n="tabOptions" class="tabicon ic_config" i18n_title="tabOptions"></a></li>
135135
<li class="tab_firmware_flasher" id="tabFirmware"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher" i18n_title="tabFirmwareFlasher"></a></li>
136+
<li class="tab_development" id="tab_development"><a href="#" i18n="tabDevelopment" class="tabicon ic_config" i18n_title="tabDevelopment"></a></li>
136137
</ul>
137138
<ul class="mode-connected">
138139
<li class="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup" i18n_title="tabSetup"></a></li>

src/js/gui.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Switchery from 'switchery-latest';
44
import jBox from 'jbox';
55
import $ from 'jquery';
66

7+
const appMode = import.meta.env.MODE;
8+
79
const TABS = {};
810

911
const GUI_MODES = {
@@ -60,6 +62,10 @@ class GuiControl {
6062
'transponder',
6163
];
6264

65+
if (appMode === 'development') {
66+
this.defaultAllowedTabsWhenDisconnected.push('development');
67+
}
68+
6369
this.defaultAllowedFCTabsWhenConnected = [ ...this.defaultAllowedTabs, ...this.defaultCloudBuildTabOptions];
6470

6571
this.allowedTabs = this.defaultAllowedTabsWhenDisconnected;

src/js/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ function appReady() {
9191

9292
cleanupLocalStorage();
9393

94+
updateTabList();
95+
9496
i18n.init(function() {
9597

9698
// pass the configurator version as a custom header for every AJAX request.
@@ -435,6 +437,11 @@ function startProcess() {
435437
presets.initialize(content_ready),
436438
);
437439
break;
440+
case 'development':
441+
import("./tabs/development").then(({ development }) =>
442+
development.initialize(content_ready),
443+
);
444+
break;
438445

439446
default:
440447
console.log(`Tab not found: ${tab}`);

src/js/tabs/development.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import GUI, { TABS } from '../gui';
2+
import { i18n } from '../localization';
3+
import $ from 'jquery';
4+
5+
const development = {};
6+
development.initialize = function (callback) {
7+
8+
if (GUI.active_tab != 'development') {
9+
GUI.active_tab = 'development';
10+
}
11+
12+
$('#content').load("./tabs/development.html", function () {
13+
i18n.localizePage();
14+
15+
GUI.content_ready(callback);
16+
});
17+
};
18+
19+
development.cleanup = function (callback) {
20+
if (callback) callback();
21+
};
22+
23+
TABS.development = development;
24+
25+
export { development };

src/js/utils/updateTabList.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import $ from 'jquery';
22
import FC from '../fc';
33

4+
const appMode = import.meta.env.MODE;
5+
46
export function updateTabList(features) {
57
const isExpertModeEnabled = $('input[name="expertModeCheckbox"]').is(':checked');
8+
const isDevelopmentMode = appMode === 'development';
9+
10+
$('#tabs ul.mode-disconnected li.tab_development').toggle(isDevelopmentMode);
611

712
$('#tabs ul.mode-connected li.tab_failsafe').toggle(isExpertModeEnabled);
813
$('#tabs ul.mode-connected li.tab_adjustments').toggle(isExpertModeEnabled);
914
$('#tabs ul.mode-connected li.tab_sensors').toggle(isExpertModeEnabled);
1015
$('#tabs ul.mode-connected li.tab_logging').toggle(isExpertModeEnabled);
1116
$('#tabs ul.mode-connected li.tab_servos').toggle(isExpertModeEnabled && FC.CONFIG?.buildOptions?.includes('USE_SERVOS'));
1217

13-
$('#tabs ul.mode-connected li.tab_gps').toggle(features.isEnabled('GPS'));
14-
$('#tabs ul.mode-connected li.tab_led_strip').toggle(features.isEnabled('LED_STRIP'));
15-
$('#tabs ul.mode-connected li.tab_transponder').toggle(features.isEnabled('TRANSPONDER'));
16-
$('#tabs ul.mode-connected li.tab_osd').toggle(features.isEnabled('OSD'));
18+
$('#tabs ul.mode-connected li.tab_gps').toggle(features?.isEnabled('GPS'));
19+
$('#tabs ul.mode-connected li.tab_led_strip').toggle(features?.isEnabled('LED_STRIP'));
20+
$('#tabs ul.mode-connected li.tab_transponder').toggle(features?.isEnabled('TRANSPONDER'));
21+
$('#tabs ul.mode-connected li.tab_osd').toggle(features?.isEnabled('OSD'));
1722
}

src/main.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,7 @@
223223
<li class="tab_help" id="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help" i18n_title="tabHelp"></a></li>
224224
<li class="tab_options" id="tab_options"><a href="#" i18n="tabOptions" class="tabicon ic_config" i18n_title="tabOptions"></a></li>
225225
<li class="tab_firmware_flasher" id="tabFirmware"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher" i18n_title="tabFirmwareFlasher"></a></li>
226+
<li class="tab_development" id="tab_development"><a href="#" i18n="tabDevelopment" class="tabicon ic_config" i18n_title="tabDevelopment"></a></li>
226227
</ul>
227228
<ul class="mode-connected">
228229
<li class="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup" i18n_title="tabSetup"></a></li>

src/tabs/development.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<div class="tab-development">
2+
<div class="content_wrapper">
3+
4+
<div class="grid-box col1">
5+
<div class="grid-box col2">
6+
<div class="col-span-2">
7+
<div class="gui_box">
8+
<div class="gui_box_titlebar">
9+
<div class="spacer_box_title">Wide GUI Box</div>
10+
</div>
11+
<div class="spacer_box">
12+
<div>Spacer Box Content</div>
13+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates reiciendis magnam tempora eligendi, nobis sapiente consectetur commodi harum. Debitis voluptatibus iure provident ea esse eveniet eaque inventore? Consequatur, sapiente iste?
14+
</div>
15+
</div>
16+
</div>
17+
<div class="col-span-1">
18+
<div class="gui_box">
19+
<div class="gui_box_titlebar">
20+
<div class="spacer_box_title">GUI Box</div>
21+
</div>
22+
<div class="spacer_box">
23+
<div>Spacer Box Content</div>
24+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates reiciendis magnam tempora eligendi, nobis sapiente consectetur commodi harum. Debitis voluptatibus iure provident ea esse eveniet eaque inventore? Consequatur, sapiente iste?
25+
</div>
26+
</div>
27+
</div>
28+
<div class="col-span-1">
29+
<div class="gui_box">
30+
<div class="gui_box_titlebar">
31+
<div class="spacer_box_title">GUI Box</div>
32+
</div>
33+
<div class="spacer_box">
34+
<div>Spacer Box Content</div>
35+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates reiciendis magnam tempora eligendi, nobis sapiente consectetur commodi harum. Debitis voluptatibus iure provident ea esse eveniet eaque inventore? Consequatur, sapiente iste?
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div class="note">
42+
<div>
43+
Note Content
44+
</div>
45+
<div>
46+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloribus amet voluptas error corporis veniam recusandae adipisci a rerum distinctio asperiores omnis inventore eum, illum aut delectus vel pariatur alias.
47+
</div>
48+
</div>
49+
50+
<div class="danger">
51+
<div>
52+
Danger Content
53+
</div>
54+
<div>
55+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloribus amet voluptas error corporis veniam recusandae adipisci a rerum distinctio asperiores omnis inventore eum, illum aut delectus vel pariatur alias.
56+
</div>
57+
</div>
58+
59+
<div class="default_btn">
60+
<a href="#">Button</a>
61+
</div>
62+
63+
<div class="default_btn" style="width: fit-content">
64+
<a href="#">Button</a>
65+
</div>
66+
67+
<div class="default_btn" style="width: fit-content">
68+
<a href="#" class="disabled">Button</a>
69+
</div>
70+
71+
<label>
72+
<input class="toggle" type="checkbox" />
73+
<span></span>
74+
</label>
75+
76+
<label>
77+
<input class="togglesmall" type="checkbox" />
78+
<span></span>
79+
</label>
80+
81+
<select style="width: fit-content">
82+
<option value="0">Option 1</option>
83+
<option value="1">Option 2</option>
84+
<option value="2">Option 3</option>
85+
<option value="3">Option 4 with more text</option>
86+
</select>
87+
88+
<input type="text" style="width: fit-content">
89+
90+
</div>
91+
92+
</div>
93+
94+
</div>
95+
<div class="content_toolbar toolbar_fixed_bottom">
96+
<div class="btn">
97+
<a href="#">B</a>
98+
</div>
99+
<div class="btn">
100+
<a href="#">Button</a>
101+
</div>
102+
<div class="btn">
103+
<a href="#">Very Long Button With A Lot Of Text To Break On Small Screens</a>
104+
</div>
105+
</div>

0 commit comments

Comments
 (0)