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

Merge branch 'WebUI' into 'main' 

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

See merge request kzotkin/hiveemulator!4
This commit is contained in:
Kirill 2025-03-11 09:39:25 +00:00
parent 08f30fc7fc a0e70bd3c4
commit 26c4c8e00c
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>