Is there a progress bar element in the c# plugin enviroment?

[mickle026 400]

Is there a progress bar in the plugin environment ?

 

like  emby-button, emby-input , like emby-progress?

 

If so is there any example code?

 

Thanks

[rechigo 293]

Yes but you need to require them in your Plugin JS or HTML file

 

in your page div element in the html, you can require those elements with the attribute data-require="emby-button,emby-progressring,etc,etc"

 

But if you are loading javascript separately, you can add those to your module definition like: define(["emby-button","emby-progressring","etc","etc"])

[mickle026 400]

Thank you, I will be checking it out

 

Do you have any idea what this error refers to :

TypeError: can't access property "htmlFor", this.labelElement is undefined

Its happening on pages in my Tabs that have emby-input and emby-checkbox but not on others. The error shows in the webconsole when the affected tabs load, but before the "pageshow".

 

 

When I click Submit to save the first time the page reloads and it shouldn't.  After that initial reload it works fine.  Im trying to figure out why...
 

I though it meant that I hadn't defined an element but they all are, so i am confused.

 

in my HTML i have:

<div data-role="page" class="page type-interior pluginConfigurationPage withTabs"
     data-require="emby-button,emby-select,emby-checkbox,emby-linkbutton,emby-input"
     data-controller="__plugin/CPSP2.js">

and in my JS i have

define(["require", 'mainTabsManager', "jQuery", "globalize", "emby-checkbox", "emby-select", "emby-linkbutton", "emby-input","emby-button"],

and because its happening before my page starts the JS, i was thinking it must be in the html, but i cannot find anything wrong..

 

HTML

<div id="CPSConfig" data-role="page" class="page type-interior pluginConfigurationPage withTabs"
     data-require="emby-button,emby-select,emby-checkbox,emby-linkbutton,emby-input"
     data-controller="__plugin/CPSConfig.js">
    <div data-role="content">
        <div class="content-primary">
            <h2>Custom Image Server Configuartion</h2>

            <div id="content">

                <h2>Server URL</h2>
                <form class="CustomImageServerpluginConfigurationPage">
                        <div class="inputContainer">
                            <label class="inputLabel inputLabelUnfocused" for="txtImageServerLocation">Image Server location:</label>
                            <input type="text" is="emby-input" id="txtImageServerLocation" label="Server Location:" class="emby-input" />
                            <div class="fieldDescription">
                            </div>

                        </div>

                        <p></p>
                        <button is="emby-button" type="submit" class="raised button-submit block"><span>Save</span></button>
                </form>


            </div>
        </div>
    </div>
</div>

JS

define(["require", 'mainTabsManager', "jQuery", "globalize", "emby-checkbox", "emby-select", "emby-linkbutton", "emby-input", "emby-button"],
    function (require, mainTabsManager, $, globalize) {

        var pluginUniqueId = "30035073-5EC8-48F9-8B74-789E584AFC01";

        function getTabs() {
            var tabs = [
                {
                    href: Dashboard.getConfigurationPageUrl('CPSConfig'),
                    name: 'Servers'
                },
                {
                    href: Dashboard.getConfigurationPageUrl('CPSP2'),
                    name: 'Backup'
                },
                {
                    href: Dashboard.getConfigurationPageUrl('UsageTermsConditions'),
                    name: 'Credits'
                }];
            return tabs;
        }

        return function (page, params) {

            page.addEventListener('viewshow',
                () => {
                    mainTabsManager.setTabs(this, 0, getTabs);
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(pluginUniqueId).then(function (config) {
                        if (config) {
                            $('#txtImageServerLocation', page).val(config.MoviePosterList || "");
                        }
                        Dashboard.hideLoadingMsg();
                    });
                });

            page.addEventListener('viewhide', function (e) {
                Dashboard.showLoadingMsg();
                ApiClient.getPluginConfiguration(pluginUniqueId).then(function (config) {
                    $('#txtImageServerLocation', page).val(config.MoviePosterList || "");
                    Dashboard.hideLoadingMsg();
                });
            });

            page.addEventListener('submit', function (e) {

                Dashboard.showLoadingMsg();

                ApiClient.getPluginConfiguration(pluginUniqueId).then(function (config) {
                    if (!config) {
                        config = {}
                    }
                    config.MoviePosterList = $('#txtImageServerLocation', page).val();
                    ApiClient.updatePluginConfiguration(pluginUniqueId, config).then
                        (
                            function () {
                                Dashboard.processPluginConfigurationUpdateResult();
                                ReloadSettings();
                            });
                });
            });

            function ReloadSettings() {
                console.log("Reloading Config")
                Dashboard.showLoadingMsg();
                ApiClient.getPluginConfiguration(pluginUniqueId).then(function (config) {
                    if (config) {
                        $('#txtImageServerLocation', page).val(config.MoviePosterList || "");
                   }
                    Dashboard.hideLoadingMsg();
                });
            };
        }
    });

MoviPosterList has a corresponding entry in the PluginConfiguration.cs file

 public string MoviePosterList { get; set; }

So in a nutshell im trying to find out 2 things

 

Why does the plugin reload emby when i click the save button the first time (submit)

And why I have an undefined element.

 

This is pobably an easy answer for some of you guys but its stressing me out - lol, it'll be a bracket in the wrong place i guess ...

 

I thought disable form submission, but it doesn't seem to make any difference.          

            page.addEventListener('submit', function (e) {
                console.log("CPSConfig: Servers Form Submit Clicked!");
                Dashboard.showLoadingMsg();

                ApiClient.getPluginConfiguration(pluginUniqueId).then(function (config) {
                    if (!config) {
                        config = {}
                    }
                    config.MoviePosterList = $('#txtImageServerLocation', page).val();
                    ApiClient.updatePluginConfiguration(pluginUniqueId, config).then
                        (
                            function () {
                                Dashboard.processPluginConfigurationUpdateResult();
                                ReloadSettings();
                            });
                });
                // Disable default form submission
                return false;
            });

Edited May 11, 2020 by mickle026