compliting dashboard

hajarLamharchi · Nov 26, 2023 · 8671e78 · 8671e78
1 parent bfdf5e7
commit 8671e78
Show file tree

Hide file tree

Showing 14 changed files with 419 additions and 62 deletions.
diff --git a/flaskapp/__pycache__/__init__.cpython-311.pyc b/flaskapp/__pycache__/__init__.cpython-311.pyc
diff --git a/flaskapp/__pycache__/forms.cpython-311.pyc b/flaskapp/__pycache__/forms.cpython-311.pyc
diff --git a/flaskapp/__pycache__/models.cpython-311.pyc b/flaskapp/__pycache__/models.cpython-311.pyc
diff --git a/flaskapp/__pycache__/routes.cpython-311.pyc b/flaskapp/__pycache__/routes.cpython-311.pyc
diff --git a/flaskapp/routes.py b/flaskapp/routes.py
@@ -64,3 +64,9 @@ def books():
 @login_required
 def dashboard():
     return render_template('Dashboard.html')
+
+@app.route('/dashboard/<tab_name>')
+@login_required
+def load_content(tab_name):
+    content = render_template(f'{tab_name}.html')
+    return content
diff --git a/flaskapp/static/scripts/Dahboard.js b/flaskapp/static/scripts/Dahboard.js
@@ -0,0 +1,100 @@
+$(document).ready(function () {
+    loadDash();
+    setActiveTab('#dashboard')
+    $('#dashboard').click(function(event){
+        loadDash();
+
+    })
+    $('#dookShelf').click(function(event){
+        fetchData('MyBooks');
+        setActiveTab(this)
+
+    });
+    $('#publish').click(function(event){
+        fetchData('Publish');
+        setActiveTab(this)
+
+    });
+    $('#account').click(function(event){
+        fetchData('my_account');
+        setActiveTab(this)
+    });
+
+    function fetchData(file_name){
+        fetch('/dashboard/'+file_name)
+        .then(response => response.text())
+        .then(text => {
+            document.querySelector('.content-container').innerHTML = text;
+        });
+    }
+    function setActiveTab(tab){
+        $('.menu-item').each(function () {
+            $(this).removeClass("active");
+        });
+         $(tab).addClass("active");
+
+    }
+    function loadDash(){
+        fetch('/dashboard/dash')
+        .then(response => response.text())
+        .then(text => {
+            document.querySelector('.content-container').innerHTML = text;
+
+            // Initialize Chart.js after the content is loaded
+            var ctx = document.getElementById('myChart').getContext('2d');
+
+            const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
+            const yValues = [55, 49, 44, 24, 15];
+            const barColors = ["red", "green", "blue", "orange", "brown"];
+
+            var myChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ["11/02/2022", "22/03/2022", "22/04/2022", "22/05/2022", "22/06/2022", "22/07/2022", "22/08/2022", "22/09/2022", "22/10/2022"],
+                    datasets: [{
+                        label: 'book1',
+                        backgroundColor: "#FDD3A2",
+                        data: [1, 10, 5, 11, 8, 12, 0, 14, 9],
+                    }, {
+                        label: 'book2',
+                        backgroundColor: "#F5A476",
+                        data: [12, 14, 5, 11, 13, 12, 2, 13, 5],
+                    }, {
+                        label: 'book3',
+                        backgroundColor: "#F5C669",
+                        data: [5, 3, 5, 11, 20, 12, 4, 6, 6],
+                    }, {
+                        label: 'book4',
+                        backgroundColor: "#F5DA78",
+                        data: [20, 7, 5, 17, 13, 12, 17, 3, 11],
+                    }],
+                },
+                options: {
+                    tooltips: {
+                        displayColors: true,
+                        callbacks: {
+                            mode: 'x',
+                        },
+                    },
+                    scales: {
+                        xAxes: [{
+                            stacked: true,
+                            gridLines: {
+                                display: false,
+                            }
+                        }],
+                        yAxes: [{
+                            stacked: true,
+                            ticks: {
+                                beginAtZero: true,
+                            },
+                            type: 'linear',
+                        }]
+                    },
+                    responsive: true,
+                    legend: { position: 'bottom' },
+                }
+            });
+        });
+    }
+});
diff --git a/flaskapp/static/scripts/chart.js b/flaskapp/static/scripts/chart.js
@@ -0,0 +1,55 @@
+
+$(document).ready(function () {
+    const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
+    const yValues = [55, 49, 44, 24, 15];
+    const barColors = ["red", "green", "blue", "orange", "brown"];
+
+    var myChart = new Chart("myChart", {
+        type: 'bar',
+        data: {
+            labels: ["11/02/2022", "22/03/2022", "22/04/2022", "22/05/2022", "22/06/2022", "22/07/2022", "22/08/2022", "22/09/2022", "22/10/2022"],
+            datasets: [{
+                label: 'book1',
+                backgroundColor: "#FDD3A2",
+                data: [1, 10, 5, 11, 8, 12, 0, 14, 9],
+            }, {
+                label: 'book2',
+                backgroundColor: "#F5A476",
+                data: [12,14, 5, 11, 13, 12, 2, 13, 5],
+            }, {
+                label: 'book3',
+                backgroundColor: "#F5C669",
+                data: [5, 3, 5, 11, 20, 12, 4, 6, 6],
+            }, {
+                label: 'book4',
+                backgroundColor: "#F5DA78",
+                data: [20, 7, 5, 17, 13, 12, 17, 3, 11],
+            }],
+        },
+        options: {
+            tooltips: {
+                displayColors: true,
+                callbacks: {
+                    mode: 'x',
+                },
+            },
+            scales: {
+                xAxes: [{
+                    stacked: true,
+                    gridLines: {
+                        display: false,
+                    }
+                }],
+                yAxes: [{
+                    stacked: true,
+                    ticks: {
+                        beginAtZero: true,
+                    },
+                    type: 'linear',
+                }]
+            },
+            responsive: true,
+            legend: { position: 'bottom' },
+        }
+    });
+});
diff --git a/flaskapp/static/scripts/main.js b/flaskapp/static/scripts/main.js
@@ -1,34 +1,34 @@
 
-$(document).ready(function() {
-    $('#home').click(function(event) {
+$(document).ready(function () {
+    $('#home').click(function (event) {
         $('#about').removeClass("active");
         $('#contact').removeClass("active");
         $('#home').addClass("active");
         let homeOffset = 0;
-        $('html,body').animate({scrollTop:homeOffset});
+        $('html,body').animate({ scrollTop: homeOffset });
         event.preventDefault();
     });
 
-    $('#about').click(function(event) {
+    $('#about').click(function (event) {
         $('#home').removeClass("active");
         $('#contact').removeClass("active");
         $('#about').addClass("active");
         let aboutOffset = $('#about_offset').offset().top - 110;
-        $('html,body').animate({scrollTop:aboutOffset});
+        $('html,body').animate({ scrollTop: aboutOffset });
         event.preventDefault();
     });
 
-    $('#contact').click(function(event) {
+    $('#contact').click(function (event) {
         $('#about').removeClass("active");
         $('#home').removeClass("active");
         $('#contact').addClass("active");
         let contactOffset = $('#contact_offset').offset().top;
-        $('html,body').animate({scrollTop:contactOffset});
+        $('html,body').animate({ scrollTop: contactOffset });
         event.preventDefault();
     });
 
-    
-    $(window).scroll(function() {
+
+    $(window).scroll(function () {
 
         let aboutOffset = $('#about_offset').offset().top - 110;
         let scrollPosition = $(window).scrollTop();
@@ -37,7 +37,7 @@ $(document).ready(function() {
             $('#about').removeClass("active");
             $('#contact').removeClass("active");
             $('#home').addClass("active");
-        } 
+        }
         else if (scrollPosition >= aboutOffset && scrollPosition < contactOffset) {
             $('#home').removeClass("active");
             $('#contact').removeClass("active");
@@ -49,33 +49,33 @@ $(document).ready(function() {
             $('#contact').addClass("active");
         }
         $('#scrollPosition').text('Vertical Scroll Position: ' + scrollPosition);
-        if(scrollPosition === 0){
+        if (scrollPosition === 0) {
             $('#navbar').removeClass('navbar_onscroll');
             $('#navbar').addClass('navbar');
-          }
-          else {
+        }
+        else {
             $('#navbar').removeClass('navbar');
             $('#navbar').addClass('navbar_onscroll');
-          }
-      });
-      
-    $('#discover_more').click(function (){
+        }
+    });
+
+    $('#discover_more').click(function () {
         window.location.href = '/books';
     });
 
-    $('#buy_button').click(function (){
+    $('#buy_button').click(function () {
         window.location.href = '/login';
     });
 
-    $('#buy_button_authenticated').click(function (){
+    $('#buy_button_authenticated').click(function () {
         window.location.href = '/books';
     });
 
-    $('#publish_button').click(function (){
+    $('#publish_button').click(function () {
         window.location.href = '/login';
     });
 
-    $('#publish_button_authenticated').click(function (){
+    $('#publish_button_authenticated').click(function () {
         window.location.href = '/dashboard';
     });
 
@@ -85,7 +85,7 @@ $(document).ready(function() {
     }
 
     function hideElementAfterDelay(element, delay) {
-        setTimeout(function() {
+        setTimeout(function () {
             if (isElementVisible(element)) {
                 $(element).hide();
             }
@@ -94,5 +94,6 @@ $(document).ready(function() {
 
     var myDiv = $('#alert');
     hideElementAfterDelay(myDiv, 3000);
-});
 
+
+});