Merge pull request #3 from Zero-True/render-slider

Render slider

zt_backend/models/components/slider.py

@@ -1,10 +1,11 @@
 from pydantic import Field, validator
+from typing import Optional
 from zt_backend.models.components.zt_component import ZTComponent
 from zt_backend.models.validations import validate_color, validate_min_less_than_max
 
 class Slider(ZTComponent):
     """A class for Slider components inheriting from ZTComponent."""
-    component: str = Field("SliderComponent", description="Vue component name.")
+    component: str = Field("v-slider", description="Vue component name.")
     value: int = Field(0, description="Current value of the slider.")
     min: int = Field(0, ge=0, description="Minimum value of the slider.")
     max: int = Field(100, ge=0, description="Maximum value of the slider.")
@@ -21,6 +22,7 @@ class Slider(ZTComponent):
     def _validate_max(cls, max_value, values):
         validate_min_less_than_max(max_value, values)
 
+
     @validator('color', allow_reuse=True, pre=True)
-    def _validate_color(cls, color, values):
-        validate_color(color)
+    def validate_color(cls, color):
+        return validate_color(color)

zt_backend/models/generate_schema.py

@@ -1,8 +1,10 @@
 from zt_backend.models import *
+from fastapi.encoders import jsonable_encoder
+import json
 
 def generate_json(model, name):
     with open('zt_schema/'+name+'.json', 'w+') as file:
-        file.write(model.schema_json(indent=2))
+        file.write(json.dumps(model.model_json_schema(),indent=2))
 
 def generate_schema():
     generate_json(Request, 'request')

zt_frontend/src/App.vue

@@ -17,10 +17,16 @@
       ></ace-editor>
       <!-- Run Button -->
       <v-btn color="primary" class="run-button" @click="runCode">Run</v-btn>
+      <!-- Render Components -->
+      <!-- Render Components -->
+      <div v-for="component in UIcomponents" :key="component.id">
+        <component :is="component.component" v-bind="component" v-model="component.value"></component>
+      </div>
     </div>
   </v-card>
 </template>
 
+
 <script lang="ts">
 import { VAceEditor } from 'vue3-ace-editor';
 import 'ace-builds/src-noconflict/mode-python';
@@ -30,24 +36,32 @@ import 'ace-builds/src-noconflict/theme-dracula';
 import axios from 'axios';
 import { Request, CodeCell } from './types/request';
 import { Response, CellResponse } from './types/response';
+import { Slider } from './types/slider';
+import { ZTComponent } from './types/zt_component';
+import { VSlider } from 'vuetify/lib/components/index.mjs';
 
 export default {
   components: {
     'ace-editor': VAceEditor,
+    'v-slider': VSlider
+
   },
   data() {
     return {
       code: "from zt_backend.models.components.slider import Slider \
 \n\ntest_slider = Slider(id='please')",
+      UIcomponents: [] as ZTComponent[],  // Typed as an array of ZTComponent interfaces
     };
   },
   methods: {
     async runCode() {
-      const codeCell: CodeCell = {code: this.code}
-      const request: Request = {cells: [codeCell], components: []}
+      const codeCell: CodeCell = { code: this.code };
+      const request: Request = { cells: [codeCell], components: [] };
       const axiosResponse = await axios.post(import.meta.env.VITE_BACKEND_URL + 'api/runcode', request);
       const response: Response = axiosResponse.data;
-      console.log(JSON.stringify(response));
+      console.log(JSON.stringify(response))
+      // Directly assign the component data to components
+      this.UIcomponents = response.cells[0].components;
     },
   }
 }

zt_schema/slider.json

@@ -13,7 +13,7 @@
       "type": "string"
     },
     "component": {
-      "default": "SliderComponent",
+      "default": "v-slider",
       "description": "Vue component name.",
       "title": "Component",
       "type": "string"