hasslesstech
/
devops-lab4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change WebUI to read API URL not from env but from config file

This commit is contained in:
dsokolovrudakov 2025-03-09 22:19:42 +02:00
parent 08f30fc7fc
commit a0e70bd3c4
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/MapClient/public/config.json Normal file
View File

@ -0,0 +1,3 @@
{
"API": "http://localhost:8080/api/v1/client"
}

12
src/MapClient/src/api/mapService.js
View File

@ -3,9 +3,9 @@ import axios from "axios";
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
// Fetch the center coordinates for the initial map load
export const fetchCenterCoordinates = async () => {
export const fetchCenterCoordinates = async (apiUrl) => {
try {
const response = await axios.get(`${API_BASE_URL}/area`);
const response = await axios.get(`${apiUrl}/area`);
return response.data;
} catch (error) {
console.error("Error fetching center coordinates:", error);
@ -14,9 +14,9 @@ export const fetchCenterCoordinates = async () => {
};
// Fetch all hives and extract their latitude/longitude
export const fetchHives = async () => {
export const fetchHives = async (apiUrl) => {
try {
const response = await axios.get(`${API_BASE_URL}/hive`);
const response = await axios.get(`${apiUrl}/hive`);
return response.data.map(hive => ({
id: hive.HiveID,
@ -31,9 +31,9 @@ export const fetchHives = async () => {
};
// Move all hives to a new location
export const moveHives = async (lat, lon, ids) => {
export const moveHives = async (apiUrl, lat, lon, ids) => {
try {
await axios.patch(`${API_BASE_URL}/hive`, {
await axios.patch(`${apiUrl}/hive`, {
Hives: ids,
Destination: {
Latitude: lat,

13
src/MapClient/src/components/MapView.jsx
View File

@ -21,6 +21,7 @@ const MapView = () => {
const mapRef = useRef(null);
const vectorLayerRef = useRef(null);
const initialized = useRef(false);
const apiUrl = useRef(null)
const [hives, setHives] = useState([]);
const [popup, setPopup] = useState({ visible: false, coords: null });
const [mouseCoords, setMouseCoords] = useState({ lat: "", lon: "" });
@ -28,11 +29,17 @@ const MapView = () => {
useEffect(() => {
const initializeMap = async () => {
const res = await fetch('/config.json')
const data = await res.json()
apiUrl.current = data.API
if (initialized.current) return;
initialized.current = true;
try {
const center = await fetchCenterCoordinates();
const center = await fetchCenterCoordinates(apiUrl.current);
if (center) {
initMap(center.Latitude, center.Longitude);
await fetchAndDrawHives();
@ -66,7 +73,7 @@ const MapView = () => {
// Fetch hives and draw them on the map
const fetchAndDrawHives = async () => {
try {
const data = await fetchHives();
const data = await fetchHives(apiUrl.current);
setHives(data);
drawHives(data);
} catch (error) {
@ -174,7 +181,7 @@ const MapView = () => {
<Popup
isVisible={popup.visible}
coords={popup.coords}
onConfirm={() => moveHives(popup.coords.lat, popup.coords.lon, hives.map(h => h.id))}
onConfirm={() => moveHives(apiUrl.current, popup.coords.lat, popup.coords.lon, hives.map(h => h.id))}
onCancel={() => setPopup({ visible: false })}
/>
</div>