Dashboard Controller

Toolbar Api

// App
// const { event: appEvent, env: appEnv } = fyzApp;
// Dashboard
const { event: dashboardEvent, env: dashboardEnv } = fyzDashboard;
const { toolbarApi } = fyzDashboard.controller;

console.log("Start Dashboard.");

const buttonStateSubject$ = new rxjs.BehaviorSubject({
    state: 'transparent'
})

toolbarApi.applyToolbarContext(buttonStateSubject$);

const myGroup = {
    group: {
        id: 'my-app-group',
        orderId: -1,
        buttons: [],
    },
    toolbarType: 'app',
    displayCondition: (context) => {
        return true;
    },
};

let localState = {
    state: 'transparent'
}

const myButton = {
    button: {
        id: 'my-button',
        state: 'transparent',
        stateStyles: {
            default: {
                backgroundColor: 'var(--system-tint)',
                fill: 'var(--system-label)',
                color: 'var(--system-label)',
            },
            hover: {
                backgroundColor: 'transparent',
                fill: 'var(--system-tint)',
                color: 'var(--system-tint)',
            },
        },
        buttonBaseStyles: {
            padding: '0 3px',
        },
        buttonStyles: {
            padding: '0 3px',
        },
        tooltip: 'Test',
        prefixIcon: {
            iconName: 'add',
            iconGroup: 'fyz-icons/general-icons',
            inheritColorFromState: true,
            show: true,
            iconConfig: {
                size: 16,
            },
        },
    },
    orderId: 60,
    toolbarType: 'app',
    groupId: 'my-app-group',
    displayCondition: () => {
        return true;
    },
    displayTransformation: (button, context) => {
        if (localState) {
            return fyzUtils.mergeDeep(button, { state: localState.state });
        } else {
            return fyzUtils.mergeDeep(button, { state: context.state });
        }

    }
}


toolbarApi.registerGroup(myGroup)
toolbarApi.registerButton(myButton);

setTimeout(x => {
    localState = {
        state: 'default'
    }

    console.log("Render");
    toolbarApi.render();

}, 1000)

setTimeout(x => {
     localState = undefined;
    console.log("Updateing Context");
    buttonStateSubject$.next({
        state: 'transparent'
    })
}, 5000);

setTimeout(x => {
    buttonStateSubject$.next({
        state: 'default'
    })
}, 6000);


setTimeout(x => {
    toolbarApi.removeButton('my-button');
}, 7000)

setTimeout(x => {
    toolbarApi.removeGroup('my-app-group');
}, 8000)

Fullscreen

const { controller } = fyzDashboard;
controller.isFullscreen = true;

controller.isFullscreen$.pipe(rxjs.take(1)).subscribe(isFullscreen => {
    console.log("Is Fullscreen", isFullscreen);

    setTimeout(x => {
        controller.toggleFullscreen();
    }, 1000);
});