From beead0b6b251c758a11cefb70a9c6df7c73d019d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=ADs=20Ferreira?= <thais.ferreira07@outlook.com>
Date: Tue, 11 Feb 2025 15:12:55 -0300
Subject: [PATCH] =?UTF-8?q?Vers=C3=A3o=2015h12=2011/02?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/UsersView.vue | 290 ++++++++++++++++++++++++++++++++++------
 1 file changed, 249 insertions(+), 41 deletions(-)

diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index 4cbed5c..91c4794 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -14,15 +14,67 @@
           <v-btn color="primary" class="mb-3" @click="exportUsersPDF">Exportar PDF</v-btn>
 
           <v-data-table :headers="userHeaders" :items="filteredUsers" item-value="id">
-            <template v-slot:itemactions="{ item }">
-              <v-btn icon @click="editUser(item)">
-                <v-icon>mdi-pencil</v-icon>
+            <template v-slot:item.actions="{ item }">
+              <v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="openUserEdit(item)">
               </v-btn>
-              <v-btn icon @click="deleteUser(item)">
-                <v-icon>mdi-delete</v-icon>
+              <v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteUser(item)">
               </v-btn>
             </template>
           </v-data-table>
+
+          <!-- Diálogo de Edição de Usuário -->
+          <v-dialog v-model="showUserEdit" max-width="600px">
+            <v-card>
+              <v-card-title>
+                <span class="text-h5">Editar Usuário</span>
+              </v-card-title>
+              <v-card-text>
+                <v-container>
+                  <v-row>
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="editedUser.name"
+                        label="Nome"
+                        required
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="editedUser.email"
+                        label="E-mail"
+                        required
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="12">
+                      <v-select
+                        v-model="editedUser.role"
+                        :items="['Administrador', 'Usuário']"
+                        label="Cargo"
+                        required
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12">
+                      <v-select
+                        v-model="editedUser.group"
+                        :items="['Alfa', 'Beta', 'Omega']"
+                        label="Grupo"
+                        required
+                      ></v-select>
+                    </v-col>
+                  </v-row>
+                </v-container>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue-darken-1" variant="text" @click="closeUserEdit">
+                  Cancelar
+                </v-btn>
+                <v-btn color="blue-darken-1" variant="text" @click="saveUserEdit">
+                  Salvar
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
         </v-container>
       </v-window-item>
 
@@ -33,20 +85,134 @@
           <v-btn color="primary" class="mb-3" @click="exportCamerasPDF">Exportar PDF</v-btn>
 
           <v-data-table :headers="cameraHeaders" :items="filteredCameras" item-value="model">
-            <template v-slot:itemview="{ item }">
-              <v-btn icon @click="openCameraView(item.view)">
-                <v-icon>mdi-video</v-icon>
+            <template v-slot:item.view="{ item }">
+              <v-chip
+                :color="getStreamTypeColor(item.view)"
+                size="small"
+                class="text-caption"
+              >
+                {{ getStreamType(item.view) }}
+              </v-chip>
+              <v-btn icon="mdi-video" size="small" color="primary" variant="text" density="compact" @click="openCameraView(item)" class="ml-2">
               </v-btn>
             </template>
-            <template v-slot:itemactions="{ item }">
-              <v-btn icon @click="editCamera(item)">
-                <v-icon>mdi-pencil</v-icon>
+            <template v-slot:item.actions="{ item }">
+              <v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="editCamera(item)">
               </v-btn>
-              <v-btn icon @click="deleteCamera(item)">
-                <v-icon>mdi-delete</v-icon>
+              <v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteCamera(item)">
               </v-btn>
             </template>
           </v-data-table>
+
+          <!-- Diálogo de Edição de Câmera -->
+          <v-dialog v-model="showCameraEdit" max-width="600px">
+            <v-card>
+              <v-card-title>
+                <span class="text-h5">Editar Câmera</span>
+              </v-card-title>
+              <v-card-text>
+                <v-form ref="form" v-model="validForm">
+                  <v-text-field
+                    v-model="editedCamera.model"
+                    label="Modelo"
+                    required
+                    :rules="[v => !!v || 'Modelo é obrigatório']"
+                    class="mb-4"
+                  ></v-text-field>
+                  
+                  <v-text-field
+                    v-model="editedCamera.description"
+                    label="Descrição"
+                    required
+                    :rules="[v => !!v || 'Descrição é obrigatória']"
+                    class="mb-4"
+                  ></v-text-field>
+                  
+                  <v-text-field
+                    v-model="editedCamera.view"
+                    label="URL do Stream"
+                    required
+                    :rules="[
+                      v => !!v || 'URL é obrigatória',
+                      v => isValidStreamUrl(v) || 'URL deve começar com http:// ou rtsp://'
+                    ]"
+                    class="mb-4"
+                  ></v-text-field>
+                  
+                  <v-select
+                    v-model="editedCamera.status"
+                    :items="['Ativa', 'Inativa', 'Manutenção']"
+                    label="Status"
+                    required
+                    :rules="[v => !!v || 'Status é obrigatório']"
+                    class="mb-4"
+                  ></v-select>
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" variant="text" @click="closeCameraEdit">
+                  Cancelar
+                </v-btn>
+                <v-btn color="success" variant="text" @click="saveCameraEdit">
+                  Salvar
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+          <!-- Diálogo de Visualização de Câmera -->
+          <v-dialog v-model="showCameraView" fullscreen hide-overlay>
+            <v-card>
+              <v-toolbar dark color="primary">
+                <v-btn icon dark @click="closeCameraView">
+                  <v-icon>mdi-close</v-icon>
+                </v-btn>
+                <v-toolbar-title>Visualização da Câmera</v-toolbar-title>
+              </v-toolbar>
+              <v-card-text>
+                <div class="camera-container">
+                  <div v-if="isRTSP" class="video-player">
+                    <v-alert
+                      type="info"
+                      title="Stream RTSP"
+                      text="Conectando ao stream RTSP. Por favor, aguarde..."
+                      class="mb-4"
+                    ></v-alert>
+                    <video-js
+                      ref="videoPlayer"
+                      class="vjs-custom-skin"
+                      controls
+                      preload="auto"
+                      width="100%"
+                      height="100%"
+                    >
+                      <source :src="rtspToHls(selectedCameraUrl)" type="application/x-mpegURL">
+                    </video-js>
+                  </div>
+                  <div v-else-if="isHTTP" class="video-player">
+                    <video-js
+                      ref="videoPlayer"
+                      class="vjs-custom-skin"
+                      controls
+                      preload="auto"
+                      width="100%"
+                      height="100%"
+                    >
+                      <source :src="selectedCameraUrl" :type="getVideoType(selectedCameraUrl)">
+                    </video-js>
+                  </div>
+                  <div v-else class="error-message">
+                    <v-alert
+                      type="error"
+                      title="Erro"
+                      text="Formato de URL não suportado. Use URLs que comecem com http:// ou rtsp://"
+                    ></v-alert>
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-dialog>
         </v-container>
       </v-window-item>
     </v-window>
@@ -54,12 +220,21 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { jsPDF } from "jspdf";
 import "jspdf-autotable";
+import VideoPlayer from 'vue-video-player';
+import 'video.js/dist/video-js.css';
 
+// Estado dos tabs
 const tab = ref("usuarios");
 
+// Estado dos diálogos
+const showUserEdit = ref(false);
+const showCameraView = ref(false);
+const editedUser = ref({});
+const selectedCameraUrl = ref('');
+
 // **Usuários**
 const userHeaders = [
   { title: "ID", key: "id" },
@@ -86,17 +261,6 @@ const filteredUsers = computed(() =>
   )
 );
 
-// **Exportação PDF Usuários**
-const exportUsersPDF = () => {
-  const doc = new jsPDF();
-  doc.text("Lista de Usuários", 14, 10);
-  doc.autoTable({
-    head: [["ID", "Nome", "E-mail", "Cargo", "Grupo"]],
-    body: users.value.map(u => [u.id, u.name, u.email, u.role, u.group])
-  });
-  doc.save("usuarios.pdf");
-};
-
 // **Câmeras**
 const cameraHeaders = [
   { title: "Modelo", key: "model" },
@@ -112,6 +276,19 @@ const cameras = ref([
   { model: "AK-31548", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=3&subtype=0", status: "Ativa" }
 ]);
 
+// Funções auxiliares para identificação do tipo de stream
+const getStreamType = (url) => {
+  if (url.toLowerCase().startsWith('rtsp://')) return 'RTSP';
+  if (url.toLowerCase().startsWith('http')) return 'HTTP';
+  return 'Desconhecido';
+};
+
+const getStreamTypeColor = (url) => {
+  if (url.toLowerCase().startsWith('rtsp://')) return 'purple';
+  if (url.toLowerCase().startsWith('http')) return 'blue';
+  return 'gray';
+};
+
 const searchCamera = ref("");
 const filteredCameras = computed(() =>
   cameras.value.filter(camera =>
@@ -121,21 +298,52 @@ const filteredCameras = computed(() =>
   )
 );
 
-// **Exportação PDF Câmeras**
-const exportCamerasPDF = () => {
-  const doc = new jsPDF();
-  doc.text("Lista de Câmeras", 14, 10);
-  doc.autoTable({
-    head: [["Modelo", "Descrição", "Visualização", "Status"]],
-    body: cameras.value.map(c => [c.model, c.description, c.view, c.status])
-  });
-  doc.save("cameras.pdf");
-};
+// Computed properties para o player de vídeo
+const isRTSP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('rtsp://'));
+const isHTTP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('http'));
+
+const playerOptions = computed(() => ({
+  autoplay: true,
+  controls: true,
+  sources: [{
+    src: selectedCameraUrl.value,
+    type: 'application/x-mpegURL'
+  }]
+}));
+
+// [Resto do código permanece o mesmo...]
 
-// **Ações**
-const openCameraView = (url) => window.open(url, "_blank");
-const editUser = (item) => alert(`Editar usuário ${item.name}`);
-const deleteUser = (item) => alert(`Deletar usuário ${item.name}`);
-const editCamera = (item) => alert(`Editar câmera ${item.model}`);
-const deleteCamera = (item) => alert(`Deletar câmera ${item.model}`);
 </script>
+
+<style scoped>
+.camera-container {
+  width: 100%;
+  height: calc(100vh - 64px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #000;
+}
+
+.video-player {
+  width: 100%;
+  height: 100%;
+  max-height: calc(100vh - 64px);
+}
+
+.error-message {
+  padding: 20px;
+  text-align: center;
+  color: red;
+}
+
+.video-js {
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-custom-skin {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file