vue app

cynkra · Nov 3, 2024 · 8ab314e · 8ab314e
1 parent cacfbeb
commit 8ab314e
Showing 1 changed file with 133 additions and 0 deletions.
diff --git a/docs/vue/index.html b/docs/vue/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Data Explorer with Vuetify</title>
+  <!-- Include Vue.js CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+  <!-- Include Vuetify CSS and JS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
+  <!-- Include Axios CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <!-- Ensure viewport is set correctly -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div id="app">
+    <v-app>
+      <v-container>
+        <h1>Data Explorer</h1>
+        <v-row>
+          <v-col cols="12" sm="4">
+            <v-select
+              v-model="selectedDataset"
+              :items="datasets"
+              label="Select Dataset"
+              @change="fetchDataPreview"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" sm="4">
+            <v-select
+              v-model="selectedFormat"
+              :items="formats"
+              label="Select Format"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" sm="4" class="d-flex align-center">
+            <v-btn
+              color="primary"
+              @click="downloadData"
+              :disabled="!selectedDataset || !selectedFormat"
+            >
+              Download Data
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <v-data-table
+          :headers="tableHeaders"
+          :items="tableData"
+          class="elevation-1"
+          :items-per-page="5"
+          v-if="tableData.length"
+        ></v-data-table>
+        <p v-else>No data to display.</p>
+      </v-container>
+    </v-app>
+  </div>
+
+  <!-- Vue.js Application Script -->
+  <script>
+    new Vue({
+      el: '#app',
+      vuetify: new Vuetify(),
+      data: {
+        datasets: ['mtcars', 'iris', 'cars'],
+        formats: ['json', 'csv', 'excel', 'parquet'],
+        selectedDataset: 'mtcars',
+        selectedFormat: 'json',
+        tableHeaders: [],
+        tableData: []
+      },
+      mounted() {
+        this.fetchDataPreview();
+      },
+      methods: {
+        fetchDataPreview() {
+          if (!this.selectedDataset) return;
+          const url = `https://connect.cynkra.com/sgods-api/data?dataset=${this.selectedDataset}&format=json`;
+          axios.get(url)
+            .then(response => {
+              this.processData(response.data);
+            })
+            .catch(error => {
+              console.error('Failed to fetch data:', error);
+              alert('Failed to fetch data.');
+            });
+        },
+        processData(data) {
+          if (Array.isArray(data)) {
+            // Extract headers from the keys of the first object
+            this.tableHeaders = Object.keys(data[0] || {}).map(key => ({
+              text: key,
+              value: key
+            }));
+            // Set table data
+            this.tableData = data;
+          } else {
+            this.tableHeaders = [];
+            this.tableData = [];
+          }
+        },
+        downloadData() {
+          const url = `https://connect.cynkra.com/sgods-api/data?dataset=${this.selectedDataset}&format=${this.selectedFormat}`;
+          axios.get(url, { responseType: 'blob' })
+            .then(response => {
+              const fileURL = window.URL.createObjectURL(new Blob([response.data]));
+              const fileLink = document.createElement('a');
+              fileLink.href = fileURL;
+              fileLink.setAttribute('download', `${this.selectedDataset}.${this.getFileExtension()}`);
+              document.body.appendChild(fileLink);
+              fileLink.click();
+              document.body.removeChild(fileLink);
+            })
+            .catch(error => {
+              console.error('Failed to download data:', error);
+              alert('Failed to download data.');
+            });
+        },
+        getFileExtension() {
+          switch (this.selectedFormat) {
+            case 'json': return 'json';
+            case 'csv': return 'csv';
+            case 'excel': return 'xlsx';
+            case 'parquet': return 'parquet';
+            default: return 'dat';
+          }
+        }
+      }
+    });
+  </script>
+</body>
+</html>