@robotical/webapp-types 3.7.20 → 3.7.22

package/dist-types/src/application/ApplicationManager/ApplicationManager.d.ts

@@ -10,6 +10,7 @@ import { RaftConnEvent, RaftUpdateEvent, RaftPublishEvent, RaftWifiScanResults,
 import { ConnectedRaftItem } from "../../store/SelectedRaftContext";
 import Toaster from "../../utils/Toaster";
 import AnalyticsFacade from "@robotical/appv2-analytics-gatherer";
+import { CarouselNavigatorManager } from "../../utils/CarouselNavigatorManager";
 export default class ApplicationManager {
     AnalyticsFacade: typeof AnalyticsFacade;
     analyticsSessionId: string | undefined;
@@ -20,6 +21,7 @@ export default class ApplicationManager {
     };
     connectedRaftsContext: ConnectedRaftItem[];
     returnToMainApp: () => void;
+    carouselNavigatorManager: CarouselNavigatorManager;
     private _router;
     setRouter(router: any): void;
     navigateTo(path: string): void;

package/dist-types/src/application/ApplicationManager/ApplicationManager.js

@@ -55,6 +55,7 @@ import ConnectingLoadingSpinnerModal from "../../components/modals/ConnectingLoa
 import draggableModalState from "../../state-observables/modal/DraggableModalState";
 import SensorsDashboardModal from "../../components/modals/ SensorsDashboardModal";
 import LEDLightsOrQRVerificationModal from "../../components/modals/LEDLightsOrQRVerificationModal";
+import { CarouselNavigatorManager } from "../../utils/CarouselNavigatorManager";
 var SHOW_LOGS = true;
 var TAG = "ApplicationManager";
 var ApplicationManager = /** @class */ (function () {
@@ -67,6 +68,8 @@ var ApplicationManager = /** @class */ (function () {
         this.connectedRafts = {};
         this.connectedRaftsContext = [];
         this.returnToMainApp = function () { };
+        // Carousel navigators
+        this.carouselNavigatorManager = new CarouselNavigatorManager();
         // Callback to call when a RAFT is selected (Phone App only)
         // We need that to make sure the connection button gets the selected RAFT once the user selects one
         this.ricSelectedCb = null;

package/dist-types/src/components/modals/LEDLightsOrQRVerificationModal/index.js

@@ -103,10 +103,10 @@ export default function LEDLightsOrQRVerificationModal() {
             return [2 /*return*/];
         });
     }); };
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.cards }, { children: options.map(function (_a) {
+    return (_jsxs("div", __assign({ className: styles.container }, { children: [!isButtonToConnectVisible ? _jsx("div", __assign({ className: styles.cards }, { children: options.map(function (_a) {
                     var id = _a.id, title = _a.title, subtitle = _a.subtitle, icon = _a.icon;
                     return (_jsxs("div", __assign({ className: qrSelected && id === 'qr' ? [styles.card, styles.qrselected].join(" ") : styles.card, onClick: function () { return handleSelect(id); } }, { children: [_jsx("div", __assign({ className: styles.icon }, { children: icon })), _jsx("h3", __assign({ className: styles.title }, { children: title })), _jsx("p", __assign({ className: styles.subtitle }, { children: subtitle }))] }), id));
-                }) })), qrSelected && _jsx(QRContent, { setSerialNo: setSerialNoFromQR }), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [_jsx("button", __assign({ className: styles.cancelButton, onClick: function () { return modalState.closeModal(false); } }, { children: "Cancel" })), isButtonToConnectVisible && _jsx("button", __assign({ className: styles.connectButton, onClick: handleConnect }, { children: "Connect" }))] }))] })));
+                }) })) : _jsx("div", { children: "\u2705" }), qrSelected && _jsx(QRContent, { setSerialNo: setSerialNoFromQR }), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [isButtonToConnectVisible && _jsx("button", __assign({ className: styles.connectButton, onClick: handleConnect }, { children: "QR code scan - click to connect" })), _jsx("button", __assign({ className: styles.cancelButton, onClick: function () { return modalState.closeModal(false); } }, { children: "Cancel" }))] }))] })));
 }
 function QRContent(_a) {
     var _this = this;
@@ -126,7 +126,7 @@ function QRContent(_a) {
             return [2 /*return*/];
         });
     }); };
-    return (_jsx("div", __assign({ className: styles.QRcontainer }, { children: _jsx("div", __assign({ className: styles.QRscannerContainer }, { children: _jsx(Scanner, { onError: function (err) { return console.error(err); }, formats: [
+    return (_jsx("div", __assign({ className: styles.QRcontainer }, { children: _jsx("div", __assign({ className: styles.QRscannerContainer }, { children: _jsx(Scanner, { styles: { container: { transform: 'scaleX(-1)' } }, onError: function (err) { return console.error(err); }, formats: [
                     "qr_code",
                     "micro_qr_code",
                     "rm_qr_code",

package/dist-types/src/utils/CarouselNavigatorManager.d.ts

@@ -0,0 +1,24 @@
+export type CarouselNavigatorNames = "games" | "activities" | "other";
+export type CarouselImage = {
+    src: string;
+    link: string;
+};
+export declare class CarouselNavigatorManager {
+    carouselNavigators: Map<CarouselNavigatorNames, CarouselNavigator>;
+    constructor();
+    addNavigator(name: CarouselNavigatorNames, setImages: (images: CarouselImage[]) => void, rerenderComponent: (rerenderState: boolean) => void, setHighlightedItem: (highlightedItem: any) => void, setIsVisible: (isVisible: boolean) => void): void;
+    _addGamesNavigator(name: CarouselNavigatorNames, setImages: (images: CarouselImage[]) => void, rerenderComponent: (rerenderState: boolean) => void, setHighlightedItem: (highlightedItem: any) => void, setIsVisible: (isVisible: boolean) => void): void;
+    removeNavigator(name: CarouselNavigatorNames): void;
+    getNavigator(name: CarouselNavigatorNames): CarouselNavigator | undefined;
+}
+declare class CarouselNavigator {
+    name: CarouselNavigatorNames;
+    images: CarouselImage[];
+    rerenderComponent: (rerenderState: boolean) => void;
+    setHighlightedItem: (highlightedItem: any) => void;
+    setIsVisible: (isVisible: boolean) => void;
+    currentIndex: number;
+    constructor(name: CarouselNavigatorNames, images: CarouselImage[], rerenderComponent: (rerenderState: boolean) => void, setHighlightedItem: (highlightedItem: any) => void, setIsVisible: (isVisible: boolean) => void);
+    highlightImage(index: number): void;
+}
+export {};

package/dist-types/src/utils/CarouselNavigatorManager.js

@@ -0,0 +1,53 @@
+import CarouselCodewheelImg from "../assets/carousel-navigation/carousel-codewheel.png";
+import CarouselJump from "../assets/carousel-navigation/carousel-jump.png";
+import CarouselMaze from "../assets/carousel-navigation/carousel-maze.png";
+import CarouselRobofly from "../assets/carousel-navigation/carousel-robofly.png";
+import CarouselSki from "../assets/carousel-navigation/carousel-ski.png";
+var CarouselNavigatorManager = /** @class */ (function () {
+    function CarouselNavigatorManager() {
+        this.carouselNavigators = new Map();
+    }
+    CarouselNavigatorManager.prototype.addNavigator = function (name, setImages, rerenderComponent, setHighlightedItem, setIsVisible) {
+        if (name === "games") {
+            this._addGamesNavigator(name, setImages, rerenderComponent, setHighlightedItem, setIsVisible);
+        }
+    };
+    CarouselNavigatorManager.prototype._addGamesNavigator = function (name, setImages, rerenderComponent, setHighlightedItem, setIsVisible) {
+        var images = [
+            { src: CarouselCodewheelImg, link: '/codewheel' },
+            { src: CarouselJump, link: '/jumping-game' },
+            { src: CarouselRobofly, link: '/robofly-game' },
+            { src: CarouselSki, link: '/ski-game' },
+            { src: CarouselMaze, link: '/component3' },
+        ];
+        this.carouselNavigators.set("games", new CarouselNavigator(name, images, rerenderComponent, setHighlightedItem, setIsVisible));
+        setImages(images);
+    };
+    CarouselNavigatorManager.prototype.removeNavigator = function (name) {
+        if (this.carouselNavigators.has(name)) {
+            this.carouselNavigators.delete(name);
+        }
+    };
+    CarouselNavigatorManager.prototype.getNavigator = function (name) {
+        return this.carouselNavigators.get(name);
+    };
+    return CarouselNavigatorManager;
+}());
+export { CarouselNavigatorManager };
+var CarouselNavigator = /** @class */ (function () {
+    function CarouselNavigator(name, images, rerenderComponent, setHighlightedItem, setIsVisible) {
+        this.name = name;
+        this.images = images;
+        this.rerenderComponent = rerenderComponent;
+        this.setHighlightedItem = setHighlightedItem;
+        this.setIsVisible = setIsVisible;
+        this.currentIndex = 0;
+        this.images = images;
+    }
+    CarouselNavigator.prototype.highlightImage = function (index) {
+        this.currentIndex = index;
+        this.setHighlightedItem(this.images[index]);
+        this.rerenderComponent(true);
+    };
+    return CarouselNavigator;
+}());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/webapp-types",
-  "version": "3.7.20",
+  "version": "3.7.22",
   "description": "Type definitions for the Application Manager",
   "main": "dist/application-manager.d.ts",
   "types": "dist/application-manager.d.ts",