<%@ page title="" language="VB" masterpagefile="~/Template/Master.master" autoeventwireup="false" inherits="PCC_Exchange_ExchDatabasesCopy, MachSol.MachPanel.Web" %>

<asp:Content ID="Content5" ContentPlaceHolderID="CPH_Content" runat="Server">

    <script type="text/javascript">
        function DBSizeGraph(dataParam, color) {

            if ($('#graph')) {

                $('#graph').html('');
                $('#graph2').html('');
                $('#code2').html('');
                var body_color = getCookie('body_color');
                var lblColor = 'black'
                //alert(body_color);
                if (body_color == 'night-mode') {
                    lblColor = 'white';
                }
                Morris.Donut({
                    element: 'graph',
                    data: $.parseJSON(dataParam),
                    formatter: function (x) { return x + " GB(s)" },

                    backgroundColor: '#FFFFFF',
                    labelColor: lblColor,
                    colors: [

                        '#52be80',
                        '#FF5733',
                        '#2980b9',
                        '#a569bd',
                        '#f7dc6f',
                        '#e74c3c',
                        '#aeb6bf',
                        '#76d7c4'
                    ],

                    resize: true
                });
                var parentDivWidth = $("#graph").parent("div").width();
                $("#graph").css("width", parentDivWidth);
                $("#graph > svg:nth-child(1)").css("width", parentDivWidth);

            }

        }

        function MailBoxesInDBs(dataParam) {

            if ($('#graph2')) {

                Morris.Bar({
                    element: 'graph2',
                    data: $.parseJSON(dataParam),
                    xkey: 'x',
                    ykeys: ['y'],
                    labels: ['Mailbox Count'],
                    barColors: ['#2980b9', '#FF5733', '#e74c3c', '#a569bd', '#52be80', '#f7dc6f', '#aeb6bf', '#76d7c4'],
                    resize: true

                });

                var parentDivWidth = $("#graph2").parent("div").width();
                $("#graph2").css("width", parentDivWidth);
                $("#graph2 > svg:nth-child(1)").css("width", parentDivWidth);

            }

        }

    </script>

    <script type="module">

        import { createApp } from 'vue'
        import Databases from '/Components/Exchange/ExchDatabases.js?v=3.4'
        import Mailboxes from '/Components/Exchange/ExchDbMailboxes.js?v=3.4'
        import ArchiveSettings from '/Components/Exchange/ExchArchiveSettings.js?v=3.4'
        import AdvDataBases from '/Components/Exchange/ExchAdvManagement.js?v=3.4'
        import TabContainer from '/Components/Common/TabContainer.js?v=3.4'
        import { getLabelText } from '/Components/Common/utils.js?v=3.4';

        createApp({
            data() {
                return {
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    showDeleteOption: <%= ShowDeleteOption.ToString().ToLower() %>,
                    DBName: '',
                    ServerGroupId: '',
                    currentTab: 0,
                    tabPanels: [{ text: this.getLabelText('String49'), enabled: true, hideTabs: [1, 2] },
                    { text: this.getLabelText('DGN1110429'), enabled: false, hideTabs: [] },
                    { text: this.getLabelText('Exch001'), enabled: false, hideTabs: [] },
                    { text: this.getLabelText('AdvancedManagement'), enabled: true, hideTabs: [] }]

                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
                openDBTab: function () {

                    this.activeTabChanged(1);
                },
                openMBTab: function (obj) {
                    this.DBName = obj.DBName;
                    this.ServerGroupId = obj.ServerGroupId;

                    this.activeTabChanged(1);

                },
                openArchTab: function (obj) {
                    this.DBName = obj.DBName;
                    this.ServerGroupId = obj.ServerGroupId;
                    this.activeTabChanged(2);

                },
            },
            components: {
                TabContainer,
                Databases,
                Mailboxes,
                ArchiveSettings,
                AdvDataBases
            },


            template: `
                    <TabContainer :id="'exchdatabases'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

                  <Databases v-if="currentTab == 0" @onOpenMBTab="openMBTab" @onOpenArchTab="openArchTab" :sortPreference="sortPreference" :readOnly="readOnly" :showDeleteOption="showDeleteOption"  />    
                  <Mailboxes v-if="currentTab == 1" :readOnly="readOnly" :DBName="DBName" :ServerGroupId="ServerGroupId"  />
                  <ArchiveSettings v-if="currentTab == 2" :readOnly="readOnly" :DBName="DBName" :ServerGroupId="ServerGroupId"  />
                  <AdvDataBases v-if="currentTab == 3" :readOnly="readOnly" :showDeleteOption="showDeleteOption" />    
`
        }).mount('#app')

    </script>

    <div id="app">
    </div>
</asp:Content>
