contrails/images.html at main · pless/contrails · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GoodSky Image Montage</title>
    <style>
        .montage img {
            width: 400px;
            height: auto;
            margin: 10px;
        }
        .montage {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    </style>
</head>
<body>
    <h1>Image Montage</h1>
    <div class="montage" id="imageMontage"></div>

    <script>
        // Function to get a query parameter value from the URL
        function getQueryParam(param) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }

        // Get the tag from the URL, default to '#goodSky' if not provided
        const tagToSearch = getQueryParam('tag') || '#goodSky';

        // Update the heading to reflect the current tag
        document.querySelector('h1').textContent = `${tagToSearch} Image Montage`;

        // Function to display images from the parsed data
        function displayImages(data) {
            const montageDiv = document.getElementById('imageMontage');
            data.forEach(row => {
                const imageURL = row.imageURL;
                const tag = row.tags;

                if (tag && tag.trim() === tagToSearch) {
                    const imgElement = document.createElement('img');
                    imgElement.src = imageURL.trim();
                    montageDiv.appendChild(imgElement);
                }
            });
        }

        // Add extra logs to check the flow of the code
        console.log("Starting fetch operation...");

        // Fetch JSON data from the Google Spreadsheet
        fetch('https://docs.google.com/spreadsheets/d/1_tbi4WTx9qGErN-2cvYvEd3qeJxgzd_9N9HJWWPD7SA/gviz/tq?tqx=out:json')
            .then(response => {
                console.log("Fetch response received.");
                console.log("Response status:", response.status);  // Log the status code

                // Check if response is okay
                if (!response.ok) {
                    throw new Error(`Network response was not ok: ${response.statusText}`);
                }

                return response.text();  // Parse the response as text (JSON format)
            })
            .then(data => {
                // Strip out the "google.visualization" wrappers from the JSON response
                const json = JSON.parse(data.substring(47).slice(0, -2));
                console.log("Parsed JSON data:", json);

                // Process the rows to get the column data
                const rows = json.table.rows.map(row => {
                    const imageURL = row.c[1] ? row.c[1].v : "";  // Assuming imageURL is the first column
                    const tags = row.c[9] ? row.c[9].v : "";  // Assuming tags is the second column
                    return { imageURL, tags };
                });

                console.log("Processed rows:", rows);
                displayImages(rows);  // Display the images
            })
            .catch(error => {
                // Log the error if there is any issue during the fetch process
                console.error('Error fetching or processing the JSON data:', error);
            });
    </script>
</body>
</html>