web_app/body.html at master · williamt1997/web_app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./styles/style.css">
  </head>
  <body>
    <header>
        <div class="container">
            <img src="./styles/images/MREAS.jpg" alt="Enterprise Automation Movie Reviews Site Logo">
            <div class="header-right">
                <div id="username-container" class="user_header_name"></div>
                <form action="/logout" method="post" class="formuser">
                    <button type="submit" class="logout">Logout</button>
                </form>
            </div>
        </div>
    </header>
    <div class="filter">
        <div class="filter_form_container">Filter Movies:
            <input id="genre-filter" style="height: 30px; width: 35%;" placeholder="Please Search For A Movie Via Keyword, Title, Writer">
        </div>
    </div>

    <main id="media-container">
    </main>
    <script src="./server.js"></script>
    <script>
        const usernameContainer = document.getElementById('username-container');
        fetch('/user')
            .then(response => response.json())
            .then(data => {
                if (data.username) {
                    usernameContainer.textContent = `Hi ${data.username}`;
                }
            })
        .catch(error => console.error('Error fetching user data:', error));

        document.addEventListener('DOMContentLoaded', () => {
            const genreFilter = document.getElementById('genre-filter');

            const fetchAndRenderMedia = (genre = '') => {
                fetch(`/api/media?genre=${encodeURIComponent(genre)}`)
                    .then(response => response.json())
                    .then(data => renderMedia(data))
                    .catch(error => console.error('Error fetching media data:', error));
            };
        genreFilter.addEventListener('input', () => fetchAndRenderMedia(genreFilter.value));
        fetchAndRenderMedia();

        const renderMedia = (data) => {
            const container = document.getElementById('media-container');
            container.innerHTML = '';

            data.forEach(media => {
                const mediaDiv = document.createElement('div');
                mediaDiv.classList.add('media');


                mediaDiv.innerHTML = `
                <div class="movies" style="background-color: #004aad;">
                    <div class="movie_container" style="background-color: #0058cb; margin: 30px; color: white; font-size: 20px;">
                        <div style="width:70%">
                            <div class="movie_title" style="font-size: 50px;">Movie Title: ${media.media_name}</div>
                            <div class="movie_body">Movie Description: ${media.media_description}</div>
                            <br>
                            <div class="movie_genre">Movie Genre: ${media.media_genre}</div>
                            <div class="movie_duration">Movie Duration: ${media.media_duration} minutes</div>
                            <br>
                            <div class="movie_review">Average Review Score: <span id="review-${media.media_id}">Loading...</span></div>
                        </div>
                    </div>
                </div>
                `;
            movies_click = mediaDiv.querySelector('.movies');
            movies_click.addEventListener('click', () => create_review(media.media_id));

            container.appendChild(mediaDiv);

            fetch(`/api/average_review?mediaId=${media.media_id}`)
                .then(response => response.json())
                .then(reviews => {
                    const averageScore = calculateAverageReviewScore(reviews);
                    document.getElementById(`review-${media.media_id}`).innerText = averageScore;
                })
                .catch(error => {
                    console.error('Error fetching review data:', error);
                    document.getElementById(`review-${media.media_id}`).innerText = 'N/A';
                });
            });
        };
    });
    const calculateAverageReviewScore = (reviews) => {
        if (reviews.length === 0) return 'No reviews';
        const totalScore = reviews.reduce((sum, review) => sum + review.review_rating, 0);
        return (totalScore / reviews.length).toFixed(1);
    };
    function create_review(mediaID) {
    // Send media_id to Express.js
    fetch('/review', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ media_id: mediaID })
    })
    .then(response => {
        if (response.ok) {
            // Redirect to review page handled by Express.js
            window.location.href = '/review';
        } else {
            console.error('Failed to send media_id to server.');
        }
    })
    .catch(error => console.error('Error sending media_id to server:', error));
}
    </script>
    </body>
</html>