Thiết kế website giá rẻ

Question

When I start my App the first time I click on the map and click on the submit button, I am getting an Error “type=Unsupported Media Type, status=415”, when I click back and do the same thing again, it is working perfectly fine and doing what I am expecting. I am also getting a WARN : “org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type ‘application/x-www-form-urlencoded;charset=UTF-8’ is not supported”. I have no ider why this is happening, since it should return application/json. When I use POST with Postman it is also returning the correct json.
It should also redirect to “/result” when I click the button, but it is stayin on “/game”. Again on second try, it is working fine.

this is my JS:

const {Map} = await google.maps.importLibrary("maps");
const {LatLng} = google.maps.importLibrary("core");
const yearSlider = document.getElementById("yearSlider");
const yearValue = document.getElementById("yearValue");

const map = new Map(document.getElementById("googleMap"), {
    zoom: 0,
    center: {lat: 0, lng: 0},
    mapTypeControl: false,
    fullscreenControl: false,
    streetViewControl: false,
    zoomControl: false,
    keyboardShortcuts: false,
    minZoom: 1,
    restriction: {
        latLngBounds: {
            north: 85,
            south: -85,
            west: -180,
            east: 180,
        }
    },
});
let guessMarker = null;

let guessLat;
let guessLng;
let guessYear;


map.addListener("click", (mapsMouseEvent) => {
    if (guessMarker) {
        guessMarker.setPosition(mapsMouseEvent.latLng);
    } else {
        guessMarker = new google.maps.Marker({
            position: mapsMouseEvent.latLng,
            map: map,
            title: "My Guess!"
        });
    }

    guessLat = mapsMouseEvent.latLng.lat();
    guessLng = mapsMouseEvent.latLng.lng();

});

yearValue.textContent = yearSlider.value;

yearSlider.addEventListener("input", function () {
    yearValue.textContent = this.value;
});


const fetchButton = document.getElementById("fetchButton");

fetchButton.addEventListener("click", () => {
    fetchCoordinates();
});

function fetchCoordinates() {
    guessYear = yearSlider.value;
    fetch("/game", {
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({guessLat, guessLng, guessYear})

    }).then(response => {
        if (response.ok) {
            console.log("ok!!!")
            window.location.href = "/result";
        } else {
            console.log("not redirecting")
        }
    })
}


const expandable = document.getElementById("expandable");
expandable.addEventListener("mouseenter", enlargeFunc);

function enlargeFunc() {
    expandable.style.width = "700px";
    expandable.style.height = "700px";
}

expandable.addEventListener("mouseleave", decrementFunc);

function decrementFunc() {
    expandable.style.width = "150px";
    expandable.style.height = "150px";
}

const container = document.getElementById("container");
const imageZoom = document.getElementById("image-zoom");
let scale = 1;

container.addEventListener("wheel", zoomFunc);

function zoomFunc(event) {
    console.log("zoooooom!");
    event.preventDefault();

    const delta = Math.max(-1, Math.min(1, event.deltaY))

    if (delta > 0) {
        scale -= 0.1;
    } else {
        scale += 0.1;
    }

    imageZoom.style.transform = `scale(${scale})`;
}

The HTML :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Game</title>
    <link rel="stylesheet" href="/css/styles.css">


</head>
<body>
<div id="container">
    <div id="image-zoom">
        <img src="" alt="image">
    </div>
</div>
<footer>
    <div class="expandable" id="expandable">
        <div class="expandable__content">
            <div class="mapSearch" id="googleMap"></div>

            <div class="form">
                <form action="/game" method="post">
                    <label for="yearSlider">Year input</label>
                    <input name="guessYear"
                           type="range"
                           min="1900" max="2024"
                           value="2024"
                           class="slider"
                           id="yearSlider">
                    <p>Year: <span id="yearValue">2024</span></p>
                    <button class="button" id="fetchButton">Submit</button>
                </form>
            </div>
        </div>
    </div>
</footer>
</body>

<script>
    (g => {
        var h, a, k, p = "The Google Maps JavaScript API",
            c = "google",
            l = "importLibrary",
            q = "__ib__",
            m = document,
            b = window;
        b = b[c] || (b[c] = {});
        var d = b.maps || (b.maps = {}),
            r = new Set(['maps']),
            e = new URLSearchParams,
            u = () => h || (h = new Promise(async (f, n) => {
                await (a = m.createElement("script"));
                e.set("libraries", [...r] + "");
                for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                e.set("callback", c + ".maps." + q);
                a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                d[q] = f;
                a.onerror = () => h = n(Error(p + " could not load."));
                a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                m.head.append(a)
            }));
        d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))
    })({
        key: "MAPS_KEY",
        v: "weekly",
    });
</script>
<script type="module" src="/js/googleMap.js"></script>
</html>

and the Controller:

package org.softuni.finalproject.web;

import org.softuni.finalproject.model.UserGuess;
import org.softuni.finalproject.service.GameSession;
import org.springframework.core.io.ClassPathResource;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.util.Objects;

@RestController
public class GameController {

    private final GameSession gameSession;

    public GameController(GameSession gameSession) {
        this.gameSession = gameSession;
    }

    @GetMapping("/game")
    public ResponseEntity<String> showGameWindow() throws IOException {
        ClassPathResource resource = new ClassPathResource("templates/game.html");
        String htmlContent = new String(Objects.requireNonNull(resource.getInputStream().readAllBytes()), StandardCharsets.UTF_8);

        String imageUrl = this.gameSession.getLocation();
        htmlContent = htmlContent.replace("<img src="" alt="image">", "<img src="" + imageUrl + "" alt="image"/>");

        return ResponseEntity.ok()
                .contentType(MediaType.TEXT_HTML)
                .body(htmlContent);
    }



    @PostMapping("/game")
    public ResponseEntity<UserGuess> getUserGuess(@RequestBody UserGuess userGuess) {

        this.gameSession.setUserGuess(userGuess);

        System.out.println(userGuess.toString());

        return ResponseEntity.ok().body(userGuess);
    }

}

It was working fine, before adding the zoom function. I tryed to remove it, but nothing changes. So I guess I did something wrong even before that, but I am not able to find what the problem is.

Thiết kế website giá rẻ

Danh mục

Getting 415 on initial request, after that everything is working fine