quackscape/assets/js/api.js
Kumi d921c2dcad
feat: add media resolution updates & API endpoints
Introduced a new API endpoint to retrieve media for a given category,
enhancing the user experience by dynamically updating thumbnails
post-upload based on available resolutions. This connects the frontend
to the backend efficiently, ensuring users can see the immediate impact
of their uploads. Additionally, updated serializers and views in the
backend to support this functionality, alongside improving code comments
for future development clarity.

- Implemented `getCategoryMedia` in the JS API for fetching media
resolutions.
- Enabled dynamic thumbnail updates in the user area post file upload,
improving visual feedback.
- Extended the Django REST framework routers to include the new media
endpoint, facilitating easier access to media items.
- Updated the `OriginalMediaSerializer` to include `category` for more
detailed media information.
- Enriched task and views files with necessary TODO comments to guide
future enhancements and exception handling.

This change significantly improves the content management workflow,
making it more interactive and user-friendly.
2024-03-17 08:35:40 +01:00

86 lines
2.3 KiB
JavaScript

import SwaggerClient from "swagger-client";
const url = String(new URL("/api/", document.baseURI));
const api = new SwaggerClient(url);
api.then(
(client) => (window.client = client),
(reason) => console.error("Failed to load OpenAPI spec: " + reason)
);
function getScene(uuid) {
return api
.then(
(client) => client.apis.tours.tours_api_scenes_retrieve({ id: uuid }),
(reason) => console.error("Failed to load OpenAPI spec: " + reason)
)
.then(
(result) => result,
(reason) => console.error("Failed to execute API call: " + reason)
);
}
function getSceneElement(scene_uuid, uuid) {
return api
.then(
(client) =>
client.apis.tours.tours_api_scene_elements_retrieve({
scene: scene_uuid,
id: uuid,
}),
(reason) => console.error("Failed to load OpenAPI spec: " + reason)
)
.then(
(result) => result,
(reason) => console.error("Failed to execute API call: " + reason)
);
}
function getCategory(category) {
return api
.then(
(client) =>
client.apis.tours.tours_api_categories_retrieve({ id: category }),
(reason) => console.error("Failed to load OpenAPI spec: " + reason)
)
.then(
(result) => result,
(reason) => console.error("Failed to execute API call: " + reason)
);
}
function getCategoryMedia(category_uuid, uuid) {
return api
.then(
(client) =>
client.apis.tours.tours_api_category_media_retrieve({
category: category_uuid,
id: uuid,
}),
(reason) => console.error("Failed to load OpenAPI spec: " + reason)
)
.then(
(result) => result,
(reason) => console.error("Failed to execute API call: " + reason)
);
}
// Function to get the CSRF token cookie. Not exactly "API", but fits here best.
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== "") {
const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === name + "=") {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
export { getScene, getSceneElement, getCategory, getCategoryMedia, getCookie };