Add support for multiple presets repositories to be active at once

locales/en/messages.json

@@ -6833,6 +6833,10 @@
         "message": "Keywords:",
         "description": "Hint text in the presets detailed dialog"
     },
+    "presetsSourceRepository": {
+        "message": "Source:",
+        "description": "Text prefixing user defined name of the preset repository containing a preset"
+    },
     "presetsVersions": {
         "message": "Firmware:",
         "description": "Hint text in the presets detailed dialog"
@@ -6981,6 +6985,10 @@
         "message": "Make Active",
         "description": "Presets tab, sources dialog, button to make selected source active"
     },
+    "presetsSourcesDialogMakeSourceDisable": {
+        "message": "Make disabled",
+        "description": "Presets tab, sources dialog, button to make selected source disabled"
+    },
     "presetsSourcesDialogDeleteSource": {
         "message": "Delete",
         "description": "Presets tab, sources dialog, button to delete selected source"
@@ -6989,6 +6997,10 @@
         "message": "<span class=\"message-negative\">WARNING!</span> A third party preset source is selected.",
         "description": "Warning message that shows up when a third party preset source is selected"
     },
+    "presetsFailedToLoadRepositories": {
+        "message": "<span class=\"message-negative\">WARNING!</span> Failed to load following repositories: <b>{{repos}}</b>",
+        "description": "Warning message that shows up when we fail to load some repositories"
+    },
     "presetsWarningBackup": {
         "message": "Please make sure you backup your current configuration ('$t(presetsBackupSave.message)' button or via CLI if the button is disabled) <strong>before</strong> picking and applying presets. Otherwise there is no way to return to previous configuration after applying presets.",
         "description": "Warning message that shows up at the top of the presets tab"

src/tabs/presets/DetailedDialog/PresetsDetailedDialog.js

@@ -26,9 +26,10 @@ export default class PresetsDetailedDialog {
         });
     }
 
-    open(preset, presetsRepo) {
+    open(preset, presetsRepo, showPresetRepoName) {
         this._presetsRepo = presetsRepo;
         this._preset = preset;
+        this._showPresetRepoName = showPresetRepoName;
         this._setLoadingState(true);
         this._domDialog[0].showModal();
         this._optionsShowedAtLeastOnce = false;
@@ -78,8 +79,8 @@ export default class PresetsDetailedDialog {
         }
 
         this._titlePanel.empty();
-        const titlePanel = new PresetTitlePanel(this._titlePanel, this._preset, false,
-            () => this._setLoadingState(false), this._favoritePresets);
+        const titlePanel = new PresetTitlePanel(this._titlePanel, this._preset, this._presetsRepo, false,
+            this._showPresetRepoName, () => this._setLoadingState(false), this._favoritePresets);
         titlePanel.load();
         this._loadOptionsSelect();
         this._updateFinalCliText();
@@ -263,7 +264,7 @@ export default class PresetsDetailedDialog {
 
     _pickPreset() {
         const cliStrings = this._getFinalCliText();
-        const pickedPreset = new PickedPreset(this._preset, cliStrings);
+        const pickedPreset = new PickedPreset(this._preset, cliStrings, this._presetsRepo);
         this._pickedPresetList.push(pickedPreset);
         this._onPresetPickedCallback?.();
         this._isPresetPickedOnClose = true;

src/tabs/presets/FavoritePresets.js

@@ -75,19 +75,19 @@ class FavoritePresetsClass {
         this._favoritePresetsData = new FavoritePresetsData();
     }
 
-    add(preset) {
-        const favoritePreset = this._favoritePresetsData.add(preset.fullPath);
+    add(preset, repo) {
+        const favoritePreset = this._favoritePresetsData.add(repo.getPresetOnlineLink(preset));
         preset.lastPickDate = favoritePreset.lastPickDate;
     }
 
-    delete(preset) {
-        this._favoritePresetsData.delete(preset.fullPath);
+    delete(preset, repo) {
+        this._favoritePresetsData.delete(repo.getPresetOnlineLink(preset));
         preset.lastPickDate = undefined;
     }
 
-    addLastPickDate(presets) {
+    addLastPickDate(presets, repo) {
         for (let preset of presets) {
-            let favoritePreset = this._favoritePresetsData.findPreset(preset.fullPath);
+            let favoritePreset = this._favoritePresetsData.findPreset(repo.getPresetOnlineLink(preset));
 
             if (favoritePreset) {
                 preset.lastPickDate = favoritePreset.lastPickDate;

src/tabs/presets/PickedPreset.js

@@ -1,8 +1,9 @@
 export default class PickedPreset
 {
-    constructor(preset, presetCli)
+    constructor(preset, presetCli, presetRepo)
     {
         this.preset = preset;
         this.presetCli = presetCli;
+        this.presetRepo = presetRepo;
     }
 }

src/tabs/presets/PresetsRepoIndexed/PresetsGithubRepo.js

@@ -1,7 +1,7 @@
 import PresetsRepoIndexed from "./PresetsRepoIndexed";
 
 export default class PresetsGithubRepo extends PresetsRepoIndexed {
-    constructor(urlRepo, branch) {
+    constructor(urlRepo, branch, official, name) {
         let correctUrlRepo = urlRepo.trim();
 
         if (!correctUrlRepo.endsWith("/")) {
@@ -21,6 +21,6 @@ export default class PresetsGithubRepo extends PresetsRepoIndexed {
         const urlRaw = `https://raw.githubusercontent.com${correctUrlRepo.slice("https://github.com".length)}${correctBranch}/`;
         const urlViewOnline = `${correctUrlRepo}blob/${correctBranch}/`;
 
-        super(urlRaw, urlViewOnline);
+        super(urlRaw, urlViewOnline, official, name);
     }
 }

src/tabs/presets/PresetsRepoIndexed/PresetsRepoIndexed.js

@@ -1,16 +1,26 @@
 import PresetParser from "./PresetParser";
 
 export default class PresetsRepoIndexed {
-    constructor(urlRaw, urlViewOnline) {
+    constructor(urlRaw, urlViewOnline, official, name) {
         this._urlRaw = urlRaw;
         this._urlViewOnline = urlViewOnline;
         this._index = null;
+        this._name = name;
+        this._official = official;
     }
 
     get index() {
         return this._index;
     }
 
+    get official() {
+        return this._official;
+    }
+
+    get name() {
+        return this._name;
+    }
+
     loadIndex() {
         return fetch(`${this._urlRaw}index.json`, {cache: "no-cache"})
             .then(res => res.json())

src/tabs/presets/PresetsRepoIndexed/PresetsWebsiteRepo.js

@@ -1,7 +1,7 @@
 import PresetsRepoIndexed from "./PresetsRepoIndexed";
 
 export default class PresetsWebsiteRepo extends PresetsRepoIndexed {
-    constructor(url) {
+    constructor(url, official, name) {
         let correctUrl = url.trim();
 
         if (!correctUrl.endsWith("/")) {
@@ -11,6 +11,6 @@ export default class PresetsWebsiteRepo extends PresetsRepoIndexed {
         const urlRaw = correctUrl;
         const urlViewOnline = correctUrl;
 
-        super(urlRaw, urlViewOnline);
+        super(urlRaw, urlViewOnline, official, name);
     }
 }

src/tabs/presets/SourcesDialog/SourcePanel.html

@@ -21,6 +21,7 @@
         <div class="btn">
             <div class="presets_source_panel_no_editing_selected"></div>
             <a href="#" class="tool regular-button presets_source_panel_activate" i18n="presetsSourcesDialogMakeSourceActive"></a>
+            <a href="#" class="tool regular-button presets_source_panel_deactivate" i18n="presetsSourcesDialogMakeSourceDisable"></a>
             <a href="#" class="tool regular-button presets_source_panel_save" i18n="presetsSourcesDialogSaveSource"></a>
             <a href="#" class="tool regular-button presets_source_panel_reset" i18n="presetsSourcesDialogResetSource"></a>
             <a href="#" class="tool regular-button presets_source_panel_delete" i18n="presetsSourcesDialogDeleteSource"></a>

src/tabs/presets/SourcesDialog/SourcePanel.js

@@ -47,6 +47,12 @@ export default class SourcePanel {
         this._onActivateCallback = onActivateCallback;
     }
 
+    setOnDeactivateCallback(onDeactivateCallback) {
+        // callback with this (SourcePanel) argument
+        // so that consumer knew which panel was clicked on
+        this._onDeactivateCallback = onDeactivateCallback;
+    }
+
     setOnSaveCallback(onSaveCallback) {
         // callback with this (SourcePanel) argument
         // so that consumer knew which panel was clicked on
@@ -65,6 +71,7 @@ export default class SourcePanel {
         this._active = isActive;
         this._domDivSelectedIndicator.toggle(this._active);
         this._domButtonActivate.toggle(!isActive);
+        this._domButtonDeactivate.toggle(isActive);
     }
 
     _setUiOfficial() {
@@ -120,6 +127,7 @@ export default class SourcePanel {
         this._domButtonReset.on("click", () => this._onResetButtonClick());
         this._domButtonDelete.on("click", () => this._onDeleteButtonClick());
         this._domButtonActivate.on("click", () => this._onActivateButtonClick());
+        this._domButtonDeactivate.on("click", () => this._onDeactivateButtonClick());
 
         this._domEditName.on("input", () => this._onInputChange());
         this._domEditUrl.on("input", () => this._onInputChange());
@@ -168,6 +176,12 @@ export default class SourcePanel {
         this._onActivateCallback?.(this);
     }
 
+    _onDeactivateButtonClick() {
+        this._onSaveButtonClick();
+        this.setActive(false);
+        this._onDeactivateCallback?.(this);
+    }
+
     _setIsSaved(isSaved) {
         if (isSaved) {
             this._domButtonSave.addClass(GUI.buttonDisabledClass);
@@ -190,6 +204,7 @@ export default class SourcePanel {
         this._domButtonSave = this._domWrapperDiv.find(".presets_source_panel_save");
         this._domButtonReset = this._domWrapperDiv.find(".presets_source_panel_reset");
         this._domButtonActivate = this._domWrapperDiv.find(".presets_source_panel_activate");
+        this._domButtonDeactivate = this._domWrapperDiv.find(".presets_source_panel_deactivate");
         this._domButtonDelete = this._domWrapperDiv.find(".presets_source_panel_delete");
         this._domDivGithubBranch = this._domWrapperDiv.find(".presets_source_panel_editing_github_branch");
         this._domDivNoEditingName = this._domWrapperDiv.find(".presets_source_panel_no_editing_name");

src/tabs/presets/SourcesDialog/SourcesDialog.js

@@ -9,7 +9,7 @@ export default class PresetsSourcesDialog {
         this._sourceSelectedPromiseResolve = null;
         this._sourcesPanels = [];
         this._sources = [];
-        this._activeSourceIndex = 0;
+        this._activeSourceIndexes = [0];
     }
 
     load() {
@@ -28,20 +28,20 @@ export default class PresetsSourcesDialog {
         return new Promise(resolve => this._sourceSelectedPromiseResolve = resolve);
     }
 
-    getActivePresetSource() {
-        return this._sources[this._activeSourceIndex];
+    getActivePresetSources() {
+        return this._activeSourceIndexes.map(index => this._sources[index]);
     }
 
-    get isOfficialActive() {
-        return this._activeSourceIndex === 0;
+    get isThirdPartyActive() {
+        return this.getActivePresetSources().filter(source => !source.official).length > 0;
     }
 
     _initializeSources() {
         this._sources = this._readSourcesFromStorage();
-        this._activeSourceIndex = this._readActiveSourceIndexFromStorage(this._sources.length);
+        this._activeSourceIndexes = this._readActiveSourceIndexFromStorage(this._sources.length);
 
         for (let i = 0; i < this._sources.length; i++) {
-            const isActive = this._activeSourceIndex === i;
+            const isActive = this._activeSourceIndexes.includes(i);
             this._addNewSourcePanel(this._sources[i], isActive, false);
         }
     }
@@ -67,15 +67,8 @@ export default class PresetsSourcesDialog {
     }
 
     _readActiveSourceIndexFromStorage(sourcesCount) {
-        const obj = getConfig('PresetSourcesActiveIndex');
-        const index = Number(obj.PresetSourcesActiveIndex);
-        let result = 0;
-
-        if (index && Number.isInteger(index) && index < sourcesCount) {
-            result = index;
-        }
-
-        return result;
+        const obj = getConfig('PresetSourcesActiveIndexes');
+        return obj.PresetSourcesActiveIndexes || [0];
     }
 
     _createOfficialSource() {
@@ -117,6 +110,7 @@ export default class PresetsSourcesDialog {
             sourcePanel.setOnSelectedCallback(selectedPanel => this._onSourcePanelSelected(selectedPanel));
             sourcePanel.setOnDeleteCallback(selectedPanel => this._onSourcePanelDeleted(selectedPanel));
             sourcePanel.setOnActivateCallback(selectedPanel => this._onSourcePanelActivated(selectedPanel));
+            sourcePanel.setOnDeactivateCallback(selectedPanel => this._onSourcePanelDeactivated(selectedPanel));
             sourcePanel.setOnSaveCallback(() => this._onSourcePanelSaved());
             sourcePanel.setActive(isActive);
             if (isSelected) {
@@ -140,18 +134,18 @@ export default class PresetsSourcesDialog {
 
     _readPanels() {
         this._sources = [];
-        this._activeSourceIndex = 0;
-        for(let i = 0; i < this._sourcesPanels.length; i++) {
+        this._activeSourceIndexes = [];
+        for (let i = 0; i < this._sourcesPanels.length; i++) {
             this._sources.push(this._sourcesPanels[i].presetSource);
             if (this._sourcesPanels[i].active) {
-                this._activeSourceIndex = i;
+                this._activeSourceIndexes.push(i);
             }
         }
     }
 
     _saveSources() {
         setConfig({'PresetSources': this._sources});
-        setConfig({'PresetSourcesActiveIndex': this._activeSourceIndex});
+        setConfig({'PresetSourcesActiveIndexes': this._activeSourceIndexes});
     }
 
     _updateSourcesFromPanels() {
@@ -183,15 +177,22 @@ export default class PresetsSourcesDialog {
 
     _onSourcePanelActivated(selectedPanel) {
         for (const panel of this._sourcesPanels) {
-            if (panel !== selectedPanel) {
-                panel.setActive(false);
-            } else {
+            if (panel === selectedPanel) {
                 panel.setActive(true);
             }
         }
         this._updateSourcesFromPanels();
     }
 
+    _onSourcePanelDeactivated(selectedPanel) {
+        for (const panel of this._sourcesPanels) {
+            if (panel === selectedPanel) {
+                panel.setActive(false);
+            }
+        }
+        this._updateSourcesFromPanels();
+    }
+
     _readDom() {
         this._domButtonAddNew = $("#presets_sources_dialog_add_new");
         this._domButtonClose = $("#presets_sources_dialog_close");

src/tabs/presets/TitlePanel/PresetTitlePanel.css

@@ -20,7 +20,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    width: calc(100% - 30px);
+    width: calc(100% - 60px);
 }
 
 .preset_title_panel_star {
@@ -37,6 +37,20 @@
     top: -5px;
 }
 
+.preset_title_panel_betaflight_official {
+    background-image: url(../../../images/icons/cf_icon_welcome_orange.svg);
+    width: 25px;
+    height: 25px;
+    background-size: cover;
+    border-radius: 5px;
+    padding: 5px;
+    background-origin: content-box;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 26px;
+    top: -5px;
+}
+
 .preset_title_panel_category {
     color: var(--mutedText);
     font-weight: bold;
@@ -75,6 +89,12 @@
     text-overflow: ellipsis;
 }
 
+.preset_title_panel_repository_text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .presets_title_panel_table {
     table-layout: fixed;
     width: 100%;