From 9f670e9ab00373e957834ee4d0ff58b427f94771 Mon Sep 17 00:00:00 2001
From: Tieptk <tieptk@hurasoft.com>
Date: Wed, 24 Jan 2024 11:49:22 +0700
Subject: [PATCH] update menu

---
 template/home/home.html           | 404 +-----------------------------
 template/javascript/global.html   |  26 ++
 template/javascript/homepage.html | 346 +++++++++++++++++++++++++
 template/javascript/index.html    |   4 +
 template/theme.html               |   4 +
 5 files changed, 381 insertions(+), 403 deletions(-)
 create mode 100644 template/javascript/global.html
 create mode 100644 template/javascript/homepage.html
 create mode 100644 template/javascript/index.html

diff --git a/template/home/home.html b/template/home/home.html
index 08323f1..8a5ba30 100644
--- a/template/home/home.html
+++ b/template/home/home.html
@@ -350,406 +350,4 @@
         </div>
     </div>
 
-</div>
-
-<script src="{{ 'charts.js' | asset_url }}"></script>
-
-<script>
-    $(function () {
-        revenue_chart(); // Doanh thu
-
-        access_chart(); // Truy cập
-
-        introduce_web_chart(); // web giới thiệu
-
-        $("#js-admin-home-tab a").click(function () {
-            event.preventDefault();
-
-            $("#js-admin-home-tab a").removeClass('current');
-            $(this).addClass('current');
-
-            var id = $(this).attr('href');
-            $('.home-report-holder').hide();
-            $(id).show();
-        })
-
-        // $('#js-show-menu').click(function () {
-        //     $('#menu-big').removeClass('hidden');
-        //     $('#menu-small').addClass('hidden');
-        //     $('#js-form-search').removeClass('menu-hide')
-        //     localStorage.setItem('menu_big', 'hidden');
-        //     localStorage.removeItem("menu_small");
-        // })
-
-        // $('#js-hide-menu').click(function () {
-        //     $('#menu-big').addClass('hidden');
-        //     $('#menu-small').removeClass('hidden');
-        //     $('#js-form-search').addClass('menu-hide')
-        //     localStorage.setItem('menu_small', 'hidden');
-        //     localStorage.removeItem("menu_big");
-        // })
-
-        // if (localStorage.getItem('menu_big') == 'hidden') {
-        //     $('#menu-big').removeClass('hidden');
-        //     $('#menu-small').addClass('hidden');
-        //     $('#js-form-search').removeClass('menu-hide')
-        // } else {
-        //     $('#menu-big').addClass('hidden');
-        //     $('#menu-small').removeClass('hidden');
-        //     $('#js-form-search').addClass('menu-hide')
-        // }
-
-    })
-
-    // Doanh thu
-    function revenue_chart() {
-        let options = {
-            chart: {
-                maxWidth: "100%",
-                height: "320px",
-                type: "area",
-                fontFamily: "Inter, sans-serif",
-                dropShadow: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            tooltip: {
-                enabled: true,
-                x: {
-                    show: false,
-                },
-            },
-            fill: {
-                type: "gradient",
-                gradient: {
-                    opacityFrom: 0.55,
-                    opacityTo: 0,
-                    shade: "#1C64F2",
-                    gradientToColors: ["#1C64F2"],
-                },
-            },
-            dataLabels: {
-                enabled: false,
-            },
-            stroke: {
-                width: 6,
-            },
-            grid: {
-                show: false,
-                strokeDashArray: 4,
-                padding: {
-                    left: 2,
-                    right: 2,
-                    top: 0
-                },
-            },
-            series: [
-                {
-                    name: "New users",
-                    data: [6500, 6418, 6456, 6526, 6356, 6456],
-                    color: "#0041E8",
-                },
-            ],
-            xaxis: {
-                categories: [
-                    '01 February',
-                    '02 February',
-                    '03 February',
-                    '04 February',
-                    '05 February',
-                    '06 February',
-                    '07 February'
-                ],
-                labels: {
-                    show: false,
-                },
-                axisBorder: {
-                    show: false,
-                },
-                axisTicks: {
-                    show: false,
-                },
-            },
-            yaxis: {
-                show: false,
-            },
-        }
-
-        if (document.getElementById("js-revenue-chart") && typeof ApexCharts !== 'undefined') {
-            const chart = new ApexCharts(document.getElementById("js-revenue-chart"), options);
-            chart.render();
-        }
-    }
-
-
-    // Truy cập
-    function access_chart() {
-        const options = {
-            colors: ["#0041E8", "#FFC700"],
-            series: [
-                {
-                    name: "Organic",
-                    color: "#0041E8",
-                    data: [
-                        { x: "Mon", y: 231 },
-                        { x: "Tue", y: 122 },
-                        { x: "Wed", y: 63 },
-                        { x: "Thu", y: 421 },
-                        { x: "Fri", y: 122 },
-                        { x: "Sat", y: 323 },
-                        { x: "Sun", y: 111 },
-                    ],
-                },
-                {
-                    name: "Social media",
-                    color: "#FFC700",
-                    data: [
-                        { x: "Mon", y: 232 },
-                        { x: "Tue", y: 113 },
-                        { x: "Wed", y: 341 },
-                        { x: "Thu", y: 224 },
-                        { x: "Fri", y: 522 },
-                        { x: "Sat", y: 411 },
-                        { x: "Sun", y: 243 },
-                    ],
-                },
-            ],
-            chart: {
-                type: "bar",
-                height: "320px",
-                fontFamily: "Inter, sans-serif",
-                toolbar: {
-                    show: false,
-                },
-            },
-            plotOptions: {
-                bar: {
-                    horizontal: false,
-                    columnWidth: "70%",
-                    borderRadiusApplication: "end",
-                    borderRadius: 8,
-                },
-            },
-            tooltip: {
-                shared: true,
-                intersect: false,
-                style: {
-                    fontFamily: "Inter, sans-serif",
-                },
-            },
-            states: {
-                hover: {
-                    filter: {
-                        type: "darken",
-                        value: 1,
-                    },
-                },
-            },
-            stroke: {
-                show: true,
-                width: 0,
-                colors: ["transparent"],
-            },
-            grid: {
-                show: false,
-                strokeDashArray: 4,
-                padding: {
-                    left: 2,
-                    right: 2,
-                    top: -14
-                },
-            },
-            dataLabels: {
-                enabled: false,
-            },
-            legend: {
-                show: false,
-            },
-            xaxis: {
-                floating: false,
-                labels: {
-                    show: true,
-                    style: {
-                        fontFamily: "Inter, sans-serif",
-                        cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
-                    }
-                },
-                axisBorder: {
-                    show: false,
-                },
-                axisTicks: {
-                    show: false,
-                },
-            },
-            yaxis: {
-                show: false,
-            },
-            fill: {
-                opacity: 1,
-            },
-        }
-
-        if (document.getElementById("js-access-chart") && typeof ApexCharts !== 'undefined') {
-            const chart = new ApexCharts(document.getElementById("js-access-chart"), options);
-            chart.render();
-        }
-    }
-
-
-    // web giới thiệu
-    function introduce_web_chart() {
-        const getChartOptions = () => {
-            return {
-                series: [35.1, 23.5, 2.4, 5.4],
-                colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
-                chart: {
-                    height: 320,
-                    width: "100%",
-                    type: "donut",
-                },
-                stroke: {
-                    colors: ["transparent"],
-                    lineCap: "",
-                },
-                plotOptions: {
-                    pie: {
-                        donut: {
-                            labels: {
-                                show: true,
-                                name: {
-                                    show: true,
-                                    fontFamily: "Inter, sans-serif",
-                                    offsetY: 20,
-                                },
-                                total: {
-                                    showAlways: true,
-                                    show: true,
-                                    label: "Lượt truy cập",
-                                    fontFamily: "Inter, sans-serif",
-                                    formatter: function (w) {
-                                        const sum = w.globals.seriesTotals.reduce((a, b) => {
-                                            return a + b
-                                        }, 0)
-                                        return `${sum}k`
-                                    },
-                                },
-                                value: {
-                                    show: true,
-                                    fontFamily: "Inter, sans-serif",
-                                    offsetY: -20,
-                                    formatter: function (value) {
-                                        return value + "k"
-                                    },
-                                },
-                            },
-                            size: "80%",
-                        },
-                    },
-                },
-                grid: {
-                    padding: {
-                        top: -2,
-                    },
-                },
-                labels: ["Trực tiếp", "Quảng cáo", "Liên kết", "Qua Email"],
-                dataLabels: {
-                    enabled: false,
-                },
-                legend: {
-                    position: "bottom",
-                    fontFamily: "Inter, sans-serif",
-                },
-                yaxis: {
-                    labels: {
-                        formatter: function (value) {
-                            return value + "k"
-                        },
-                    },
-                },
-                xaxis: {
-                    labels: {
-                        formatter: function (value) {
-                            return value + "k"
-                        },
-                    },
-                    axisTicks: {
-                        show: false,
-                    },
-                    axisBorder: {
-                        show: false,
-                    },
-                },
-            }
-        }
-
-        if (document.getElementById("js-introduce-web-chart") && typeof ApexCharts !== 'undefined') {
-            const chart = new ApexCharts(document.getElementById("js-introduce-web-chart"), getChartOptions());
-            chart.render();
-
-            // Get all the checkboxes by their class name
-            const checkboxes = document.querySelectorAll('#devices input[type="checkbox"]');
-
-            // Function to handle the checkbox change event
-            function handleCheckboxChange(event, chart) {
-                const checkbox = event.target;
-                if (checkbox.checked) {
-                    switch (checkbox.value) {
-                        case 'web_1':
-                            chart.updateSeries([15.1, 22.5, 4.4, 8.4]);
-                            break;
-                        case 'web_2':
-                            chart.updateSeries([25.1, 26.5, 1.4, 3.4]);
-                            break;
-                        case 'web_3':
-                            chart.updateSeries([45.1, 27.5, 8.4, 2.4]);
-                            break;
-                        default:
-                            chart.updateSeries([55.1, 28.5, 1.4, 5.4]);
-                    }
-
-                } else {
-                    chart.updateSeries([35.1, 23.5, 2.4, 5.4]);
-                }
-            }
-
-            // Attach the event listener to each checkbox
-            checkboxes.forEach((checkbox) => {
-                checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));
-            });
-        }
-    }
-
-
-
-    // Hàm để cập nhật trạng thái hiển thị menu và localStorage
-    function capNhatTrangThaiMenu(hideMenuBig) {
-        $('#menu-big').toggleClass('hidden', hideMenuBig);
-        $('#menu-small').toggleClass('hidden', !hideMenuBig);
-        $('#js-form-search').toggleClass('menu-hide', hideMenuBig);
-        localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
-        localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');
-    }
-
-
-    $(document).ready(function () {
-        // Sự kiện click để hiển thị menu
-        $('#js-show-menu').click(function () {
-            capNhatTrangThaiMenu(false);
-        });
-
-        // Sự kiện click để ẩn menu
-        $('#js-hide-menu').click(function () {
-            capNhatTrangThaiMenu(true);
-        });
-
-        // Kiểm tra localStorage và thiết lập trạng thái ban đầu của menu
-        const hideMenuBig = localStorage.getItem('menu_big') === 'hidden';
-        capNhatTrangThaiMenu(hideMenuBig);
-    })
-
-
-
-</script>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/template/javascript/global.html b/template/javascript/global.html
new file mode 100644
index 0000000..6649ea0
--- /dev/null
+++ b/template/javascript/global.html
@@ -0,0 +1,26 @@
+<script>
+    $(document).ready(function () {
+        // Sự kiện click để hiển thị menu
+        $('#js-show-menu').click(function () {
+            capNhatTrangThaiMenu(false);
+        });
+
+        // Sự kiện click để ẩn menu
+        $('#js-hide-menu').click(function () {
+            capNhatTrangThaiMenu(true);
+        });
+
+        // Kiểm tra localStorage và thiết lập trạng thái ban đầu của menu
+        const hideMenuBig = localStorage.getItem('menu_big') === 'hidden';
+        capNhatTrangThaiMenu(hideMenuBig);
+    })
+
+    // Hàm để cập nhật trạng thái hiển thị menu và localStorage
+    function capNhatTrangThaiMenu(hideMenuBig) {
+        $('#menu-big').toggleClass('hidden', hideMenuBig);
+        $('#menu-small').toggleClass('hidden', !hideMenuBig);
+        $('#js-form-search').toggleClass('menu-hide', hideMenuBig);
+        localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
+        localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');
+    }
+</script>
\ No newline at end of file
diff --git a/template/javascript/homepage.html b/template/javascript/homepage.html
new file mode 100644
index 0000000..a6eaceb
--- /dev/null
+++ b/template/javascript/homepage.html
@@ -0,0 +1,346 @@
+<script src="{{ 'charts.js' | asset_url }}"></script>
+
+<script>
+    $(document).ready(function () {
+
+        revenue_chart(); // Doanh thu
+
+        access_chart(); // Truy cập
+
+        introduce_web_chart(); // web giới thiệu
+
+        $("#js-admin-home-tab a").click(function () {
+            event.preventDefault();
+
+            $("#js-admin-home-tab a").removeClass('current');
+            $(this).addClass('current');
+
+            var id = $(this).attr('href');
+            $('.home-report-holder').hide();
+            $(id).show();
+        })
+
+    })
+
+    // Doanh thu
+    function revenue_chart() {
+        let options = {
+            chart: {
+                maxWidth: "100%",
+                height: "320px",
+                type: "area",
+                fontFamily: "Inter, sans-serif",
+                dropShadow: {
+                    enabled: false,
+                },
+                toolbar: {
+                    show: false,
+                },
+            },
+            tooltip: {
+                enabled: true,
+                x: {
+                    show: false,
+                },
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                    opacityFrom: 0.55,
+                    opacityTo: 0,
+                    shade: "#1C64F2",
+                    gradientToColors: ["#1C64F2"],
+                },
+            },
+            dataLabels: {
+                enabled: false,
+            },
+            stroke: {
+                width: 6,
+            },
+            grid: {
+                show: false,
+                strokeDashArray: 4,
+                padding: {
+                    left: 2,
+                    right: 2,
+                    top: 0
+                },
+            },
+            series: [
+                {
+                    name: "New users",
+                    data: [6500, 6418, 6456, 6526, 6356, 6456],
+                    color: "#0041E8",
+                },
+            ],
+            xaxis: {
+                categories: [
+                    '01 February',
+                    '02 February',
+                    '03 February',
+                    '04 February',
+                    '05 February',
+                    '06 February',
+                    '07 February'
+                ],
+                labels: {
+                    show: false,
+                },
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false,
+                },
+            },
+            yaxis: {
+                show: false,
+            },
+        }
+
+        if (document.getElementById("js-revenue-chart") && typeof ApexCharts !== 'undefined') {
+            const chart = new ApexCharts(document.getElementById("js-revenue-chart"), options);
+            chart.render();
+        }
+    }
+
+
+    // Truy cập
+    function access_chart() {
+        const options = {
+            colors: ["#0041E8", "#FFC700"],
+            series: [
+                {
+                    name: "Organic",
+                    color: "#0041E8",
+                    data: [
+                        { x: "Mon", y: 231 },
+                        { x: "Tue", y: 122 },
+                        { x: "Wed", y: 63 },
+                        { x: "Thu", y: 421 },
+                        { x: "Fri", y: 122 },
+                        { x: "Sat", y: 323 },
+                        { x: "Sun", y: 111 },
+                    ],
+                },
+                {
+                    name: "Social media",
+                    color: "#FFC700",
+                    data: [
+                        { x: "Mon", y: 232 },
+                        { x: "Tue", y: 113 },
+                        { x: "Wed", y: 341 },
+                        { x: "Thu", y: 224 },
+                        { x: "Fri", y: 522 },
+                        { x: "Sat", y: 411 },
+                        { x: "Sun", y: 243 },
+                    ],
+                },
+            ],
+            chart: {
+                type: "bar",
+                height: "320px",
+                fontFamily: "Inter, sans-serif",
+                toolbar: {
+                    show: false,
+                },
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: "70%",
+                    borderRadiusApplication: "end",
+                    borderRadius: 8,
+                },
+            },
+            tooltip: {
+                shared: true,
+                intersect: false,
+                style: {
+                    fontFamily: "Inter, sans-serif",
+                },
+            },
+            states: {
+                hover: {
+                    filter: {
+                        type: "darken",
+                        value: 1,
+                    },
+                },
+            },
+            stroke: {
+                show: true,
+                width: 0,
+                colors: ["transparent"],
+            },
+            grid: {
+                show: false,
+                strokeDashArray: 4,
+                padding: {
+                    left: 2,
+                    right: 2,
+                    top: -14
+                },
+            },
+            dataLabels: {
+                enabled: false,
+            },
+            legend: {
+                show: false,
+            },
+            xaxis: {
+                floating: false,
+                labels: {
+                    show: true,
+                    style: {
+                        fontFamily: "Inter, sans-serif",
+                        cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
+                    }
+                },
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false,
+                },
+            },
+            yaxis: {
+                show: false,
+            },
+            fill: {
+                opacity: 1,
+            },
+        }
+
+        if (document.getElementById("js-access-chart") && typeof ApexCharts !== 'undefined') {
+            const chart = new ApexCharts(document.getElementById("js-access-chart"), options);
+            chart.render();
+        }
+    }
+
+
+    // web giới thiệu
+    function introduce_web_chart() {
+        const getChartOptions = () => {
+            return {
+                series: [35.1, 23.5, 2.4, 5.4],
+                colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
+                chart: {
+                    height: 320,
+                    width: "100%",
+                    type: "donut",
+                },
+                stroke: {
+                    colors: ["transparent"],
+                    lineCap: "",
+                },
+                plotOptions: {
+                    pie: {
+                        donut: {
+                            labels: {
+                                show: true,
+                                name: {
+                                    show: true,
+                                    fontFamily: "Inter, sans-serif",
+                                    offsetY: 20,
+                                },
+                                total: {
+                                    showAlways: true,
+                                    show: true,
+                                    label: "Lượt truy cập",
+                                    fontFamily: "Inter, sans-serif",
+                                    formatter: function (w) {
+                                        const sum = w.globals.seriesTotals.reduce((a, b) => {
+                                            return a + b
+                                        }, 0)
+                                        return `${sum}k`
+                                    },
+                                },
+                                value: {
+                                    show: true,
+                                    fontFamily: "Inter, sans-serif",
+                                    offsetY: -20,
+                                    formatter: function (value) {
+                                        return value + "k"
+                                    },
+                                },
+                            },
+                            size: "80%",
+                        },
+                    },
+                },
+                grid: {
+                    padding: {
+                        top: -2,
+                    },
+                },
+                labels: ["Trực tiếp", "Quảng cáo", "Liên kết", "Qua Email"],
+                dataLabels: {
+                    enabled: false,
+                },
+                legend: {
+                    position: "bottom",
+                    fontFamily: "Inter, sans-serif",
+                },
+                yaxis: {
+                    labels: {
+                        formatter: function (value) {
+                            return value + "k"
+                        },
+                    },
+                },
+                xaxis: {
+                    labels: {
+                        formatter: function (value) {
+                            return value + "k"
+                        },
+                    },
+                    axisTicks: {
+                        show: false,
+                    },
+                    axisBorder: {
+                        show: false,
+                    },
+                },
+            }
+        }
+
+        if (document.getElementById("js-introduce-web-chart") && typeof ApexCharts !== 'undefined') {
+            const chart = new ApexCharts(document.getElementById("js-introduce-web-chart"), getChartOptions());
+            chart.render();
+
+            // Get all the checkboxes by their class name
+            const checkboxes = document.querySelectorAll('#devices input[type="checkbox"]');
+
+            // Function to handle the checkbox change event
+            function handleCheckboxChange(event, chart) {
+                const checkbox = event.target;
+                if (checkbox.checked) {
+                    switch (checkbox.value) {
+                        case 'web_1':
+                            chart.updateSeries([15.1, 22.5, 4.4, 8.4]);
+                            break;
+                        case 'web_2':
+                            chart.updateSeries([25.1, 26.5, 1.4, 3.4]);
+                            break;
+                        case 'web_3':
+                            chart.updateSeries([45.1, 27.5, 8.4, 2.4]);
+                            break;
+                        default:
+                            chart.updateSeries([55.1, 28.5, 1.4, 5.4]);
+                    }
+
+                } else {
+                    chart.updateSeries([35.1, 23.5, 2.4, 5.4]);
+                }
+            }
+
+            // Attach the event listener to each checkbox
+            checkboxes.forEach((checkbox) => {
+                checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));
+            });
+        }
+    }
+
+</script>
\ No newline at end of file
diff --git a/template/javascript/index.html b/template/javascript/index.html
new file mode 100644
index 0000000..2d5a063
--- /dev/null
+++ b/template/javascript/index.html
@@ -0,0 +1,4 @@
+{% include javascript/global %}
+
+
+{% include javascript/homepage %}
\ No newline at end of file
diff --git a/template/theme.html b/template/theme.html
index d6b301b..746bc6b 100644
--- a/template/theme.html
+++ b/template/theme.html
@@ -438,6 +438,10 @@
     </div>
 
   </div>
+
+
+  {% include javascript/index %}
+
 </body>
 
 </html>
\ No newline at end of file