Some dashboard-template-content appears in a different tab (Bug?)

[JustinB]

@knoepsche @zenofmud I actually think i got it now. When using the dashboard template node you can access every variable used inside any dashboard template node. Visually these nodes are seperated but they aren't. When checking the code of the daterangepicker it says, it is appending to the body-element. If every template-node is inside the same body-element, the buttons are getting appended to every tab using dashboard-elements

[knoepsche]

You could deal with it by adding this line to your template node:

scope.$on("$destroy", function() {
            let pickers = angular.element('.daterangepicker');
            for(let i=0; i<pickers.length; i++){
                pickers[i].remove();
            }
        });

This way you always delete the appended daterangepicker when leaving the tab.

In the end I would go with something like that:

<style>
    #button {
        margin-left: 20px;
        order: 2;
        background: transparent;
        border: 0;
        border-radius: 2px;
        box-sizing: border-box;
        font-size: 14px;
        font-style: inherit;
        font-variant: inherit;
        font-weight: 500;
        outline: none;
        overflow: hidden;
        position: relative;
        bottom: 6px;
        text-transform: uppercase;
        transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
        user-select: none;
        white-space: nowrap;
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
        height: 48px;
        width: 318px;
        display: inline-block;
        letter-spacing: .01em;
    }

    #container {
        display: flex;
        flex-direction: row;
    }

    .card {
        height: 30px;
        width: 318px;
        display: flex;
        flex-direction: row;
    }

    #kt_daterangepicker_2 {
        width: 294px;
    }
</style>

<script>
    

    (function(scope) {
        if(scope.$root.startDate === undefined){
            scope.startDate = moment().startOf("hour");
        }else{
            scope.startDate = scope.$root.startDate;
        }
        if(scope.$root.endDate === undefined){
            scope.endDate = moment().startOf("hour").add(32, "hour");
        }else{
            scope.endDate = scope.$root.endDate;
        }
        $("#kt_daterangepicker_2").daterangepicker({
            "timePicker": true,
            "timePicker24Hour": true,
            startDate: scope.startDate,
            endDate: scope.endDate,
            locale: {
                format: "DD/MM/YY HH:mm",
                "applyLabel": "Starten",
                "cancelLabel": "Abbrechen",
            }
        });
        $('#kt_daterangepicker_2').on('apply.daterangepicker', function(ev, picker) {
            scope.startDate = picker.startDate;
            scope.endDate = picker.endDate;
            let payload = {};
            payload.startDate = scope.startDate.format('YYYY-MM-DD');
            payload.endDate = scope.endDate.format('YYYY-MM-DD');
            payload.startTime = scope.startDate.format('HH:mm');
            payload.endTime = scope.endDate.format('HH:mm');
            scope.send({topic:'ok', payload:payload});
        });

        scope.inputfocusout = function(event){
            let payload = {};
            payload.startDate = scope.startDate.format('YYYY-MM-DD');
            payload.endDate = scope.endDate.format('YYYY-MM-DD');
            payload.startTime = scope.startDate.format('HH:mm:ss');
            payload.endTime = scope.endDate.format('HH:mm:ss');
            scope.send({topic:'focusout', payload:payload});
        };
        scope.$on("$destroy", function() {
            scope.$root.startDate = scope.startDate;
            scope.$root.endDate = scope.endDate;
            let pickers = angular.element('.daterangepicker');
            for(let i=0; i<pickers.length; i++){ pickers[i].remove(); } 
        });
    })(scope);

</script>


<md-card ui-card-size="12x1" layout="row" layout-align="space-between center"
    class="nr-dashboard-textinput _md layout-align-space-between-center layout-row visible"
    style="width:642px; height:48px; margin:0">
    <md-input-container class="md-block md-auto-horizontal-margin flex has-label" style="margin:15,0; width:318">
        <input type="text"  class="form-control form-control-solid" placeholder="Wähle Zeitraum" id="kt_daterangepicker_2" ng-on-focusout="inputfocusout($event)"/>
    </md-input-container>
</md-card>

[JustinB]

I don't know what to say.. just much, much thanks for all your help!

I tried your code and it's perfect! No random buttons, everything is working and I'm super happy!
Without all your effort I would have never fixed that with my current knowledge. Are you working as an programmer? ^^

Wish you @knoepsche and @zenofmud a very nice day and hope you guys doing good in the future as well!

Kind regards

Justin

[knoepsche]

You are welcome. I'm no programmer but your questions overlaped with some of mine. So It's good to hear everything works at another place well, too!