258 lines
8.3 KiB
Vue
258 lines
8.3 KiB
Vue
<template>
|
|
<v-card>
|
|
<!-- Navegação das Abas -->
|
|
<v-tabs v-model="tab" light>
|
|
<v-tab value="edit-space">Editar Espaço</v-tab>
|
|
<v-tab value="manage-cameras">Gerenciar Câmeras</v-tab>
|
|
</v-tabs>
|
|
|
|
<!-- Conteúdo das Abas usando v-tabs-window -->
|
|
<v-card-text>
|
|
<v-tabs-window v-model="tab">
|
|
<!-- Aba para Editar Espaço -->
|
|
<v-tabs-window-item value="edit-space">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<h3 class="ml-4">Editar Espaço</h3>
|
|
<v-btn
|
|
color="primary"
|
|
icon
|
|
class="mr-4"
|
|
@click="saveSpace"
|
|
>
|
|
<v-icon>mdi-content-save</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Nome:</v-list-item-title>
|
|
<v-text-field
|
|
v-model="space.name"
|
|
outlined
|
|
dense
|
|
placeholder="Digite o nome do espaço"
|
|
></v-text-field>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title>Descrição:</v-list-item-title>
|
|
<v-textarea
|
|
v-model="space.description"
|
|
outlined
|
|
dense
|
|
placeholder="Adicione uma descrição do espaço"
|
|
></v-textarea>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-tabs-window-item>
|
|
|
|
<!-- Aba para Gerenciar Câmeras -->
|
|
<v-tabs-window-item value="manage-cameras">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<h3 class="ml-4">Gerenciar Câmeras</h3>
|
|
<v-btn
|
|
color="primary"
|
|
class="mr-4"
|
|
@click="openCameraModal"
|
|
>
|
|
<v-icon>mdi-plus</v-icon> Adicionar Câmera
|
|
</v-btn>
|
|
</div>
|
|
|
|
<!-- Tabela para exibir câmeras -->
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="cameras"
|
|
:loading="loading"
|
|
class="mt-4"
|
|
>
|
|
<template v-slot:[`item.actions`]="{ item }">
|
|
<div class="d-flex justify-end">
|
|
<v-icon color="primary" @click="editCamera(item)" class="ml-2">
|
|
mdi-pencil
|
|
</v-icon>
|
|
<v-icon color="red" @click="confirmRemoveCamera(item.id)" class="ml-2">
|
|
mdi-delete
|
|
</v-icon>
|
|
</div>
|
|
</template>
|
|
<template v-slot:no-data>
|
|
<p>{{ error || "Nenhuma câmera encontrada." }}</p>
|
|
</template>
|
|
</v-data-table>
|
|
</v-tabs-window-item>
|
|
</v-tabs-window>
|
|
</v-card-text>
|
|
|
|
<!-- Dialog de Confirmação -->
|
|
<v-dialog v-model="showDeleteDialog" max-width="500px">
|
|
<v-card>
|
|
<v-card-title class="headline">Confirmar Remoção</v-card-title>
|
|
<v-card-text>Você tem certeza que deseja remover esta câmera?</v-card-text>
|
|
<v-card-actions>
|
|
<v-btn text @click="showDeleteDialog = false">Cancelar</v-btn>
|
|
<v-btn color="red" text @click="removeCamera">Confirmar</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<CameraModal
|
|
v-model="showCameraModal"
|
|
:camera="editingCamera"
|
|
:space-id="space.id"
|
|
:is-edit-mode="isEditMode"
|
|
@save="handleSaveCamera"
|
|
@close="handleCloseModal"
|
|
/>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive, ref, computed } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useSpaceStore } from "../stores/spaces";
|
|
import { useCameraStore } from "../stores/cameras"; // Adicionado
|
|
import CameraModal from "../components/modals/CameraModal.vue";
|
|
export default {
|
|
components: {
|
|
CameraModal,
|
|
},
|
|
setup() {
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const spaceStore = useSpaceStore();
|
|
const cameraStore = useCameraStore();
|
|
|
|
const showCameraModal = ref(false);
|
|
const editingCamera = ref(false);
|
|
const isEditMode = ref(false);
|
|
const showDeleteDialog = ref(false); // Estado para controlar o diálogo de confirmação
|
|
const cameraToDelete = ref(null); // Variável para armazenar a câmera a ser excluída
|
|
|
|
const tab = ref("edit-space");
|
|
const loading = ref(false);
|
|
const error = ref("");
|
|
|
|
const space = reactive({
|
|
id: null,
|
|
name: "",
|
|
description: "",
|
|
});
|
|
|
|
const cameras = ref([]);
|
|
const headers = ref([
|
|
{ text: "Nome", value: "name" },
|
|
{ text: "Descrição", value: "description" },
|
|
{ text: "URL de Conexão", value: "connection_url" },
|
|
{ text: "Ações", value: "actions", sortable: false },
|
|
]);
|
|
|
|
// Buscar dados do espaço
|
|
const fetchSpaceData = async () => {
|
|
const id = route.params.id;
|
|
loading.value = true;
|
|
try {
|
|
const response = await spaceStore.fetchSpaceById(id);
|
|
console.log(response)
|
|
Object.assign(space, response);
|
|
await fetchCameras(); // Buscar câmeras do espaço
|
|
} catch (err) {
|
|
error.value = "Erro ao carregar os dados.";
|
|
console.error(err);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Buscar câmeras
|
|
const fetchCameras = async () => {
|
|
try {
|
|
const id = route.params.id;
|
|
cameras.value = await cameraStore.fetchCamerasBySpaceId(id);
|
|
} catch (err) {
|
|
console.error("Erro ao carregar câmeras:", err);
|
|
}
|
|
};
|
|
|
|
const saveSpace = async () => {
|
|
try {
|
|
await spaceStore.updateSpace(space.id, space);
|
|
router.push("/dashboard/spaces");
|
|
} catch (error) {
|
|
console.error("Erro ao salvar o espaço:", error);
|
|
}
|
|
};
|
|
|
|
const openCameraModal = () => {
|
|
showCameraModal.value = true;
|
|
editingCamera.value = null; // Reset editing camera when opening for new camera
|
|
isEditMode.value = false; // Set to false for new camera
|
|
console.log("Abrir modal camera")
|
|
};
|
|
|
|
const handleSaveCamera = async (cameraData) => {
|
|
try {
|
|
if (isEditMode.value) {
|
|
await cameraStore.updateCamera(cameraData.id, cameraData);
|
|
} else {
|
|
await cameraStore.addCamera(cameraData);
|
|
}
|
|
fetchCameras();
|
|
} catch (error) {
|
|
console.error("Erro ao salvar câmera:", error);
|
|
}
|
|
};
|
|
|
|
const editCamera = (camera) => {
|
|
console.log("Editar câmera:", camera);
|
|
editingCamera.value = { ...camera }; // Passa os dados da câmera para o modal
|
|
isEditMode.value = true; // Define que estamos em modo de edição
|
|
showCameraModal.value = true; // Abre o modal para edição
|
|
};
|
|
|
|
|
|
// Confirma a remoção da câmera
|
|
const confirmRemoveCamera = (cameraId) => {
|
|
cameraToDelete.value = cameraId; // Armazena o ID da câmera a ser excluída
|
|
showDeleteDialog.value = true; // Exibe o diálogo de confirmação
|
|
};
|
|
|
|
// Função para remover a câmera
|
|
const removeCamera = async () => {
|
|
if (cameraToDelete.value) {
|
|
try {
|
|
await cameraStore.removeCamera(cameraToDelete.value);
|
|
cameras.value = cameras.value.filter((camera) => camera.id !== cameraToDelete.value);
|
|
console.log("Câmera removida");
|
|
showDeleteDialog.value = false; // Fecha o diálogo
|
|
} catch (err) {
|
|
console.error("Erro ao remover câmera:", err);
|
|
showDeleteDialog.value = false; // Fecha o diálogo em caso de erro
|
|
}
|
|
}
|
|
};
|
|
|
|
fetchSpaceData();
|
|
|
|
return {
|
|
tab,
|
|
space,
|
|
cameras,
|
|
headers,
|
|
saveSpace,
|
|
loading,
|
|
error,
|
|
openCameraModal,
|
|
editCamera,
|
|
removeCamera,
|
|
showCameraModal,
|
|
showDeleteDialog,
|
|
confirmRemoveCamera,
|
|
handleSaveCamera,
|
|
isEditMode,
|
|
editingCamera
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|