initial commit

resources/js/views/pages/questionere/QuestionProgressBar.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { computed, defineProps, onBeforeMount, ref } from 'vue';
+import typeJson from './type_parse.json';
+
+const allTypes = ref(typeJson);
+const props = defineProps({
+    type: {
+        type: String,
+        required: true,
+    },
+    value: {
+        type: String,
+        required: false,
+    },
+})
+
+const bgColor = ref(null)
+const operator = {
+    c(obj, value) {
+        let keys = Object.keys(obj.values)
+        let prev = 0;
+        for (let key of keys) {
+            if (key > prev && key <= value) {
+                prev = key
+            }
+        }
+        return obj.values[prev]
+    },
+    e(obj, value) {
+
+        return obj.values[value]
+    },
+}
+const progressValue = ref(0); // Initialize progress value with 0
+const finalValue = computed(() => {
+    const singleObject = allTypes.value[props.type];
+    // console.log('singleObject', singleObject)
+    if (operator[singleObject.type](singleObject, props.value) > 0 && operator[singleObject.type](singleObject, props.value) <= 33) {
+        bgColor.value = 'success'
+    }
+    if (operator[singleObject.type](singleObject, props.value) > 33 && operator[singleObject.type](singleObject, props.value) <= 50) {
+        bgColor.value = 'yellow'
+    }
+    if (operator[singleObject.type](singleObject, props.value) > 50 && operator[singleObject.type](singleObject, props.value) <= 80) {
+        bgColor.value = 'warning'
+    }
+    if (operator[singleObject.type](singleObject, props.value) > 80 && operator[singleObject.type](singleObject, props.value) <= 100) {
+        bgColor.value = 'red'
+    }
+    return operator[singleObject.type](singleObject, props.value)
+
+})
+
+onBeforeMount(async () => {
+    await new Promise(resolve => {
+        setTimeout(() => {
+            progressValue.value = finalValue.value;
+            resolve();
+        }, 500); // Simulating some delay, you can replace this with your actual async logic
+    });
+});
+</script>
+
+<template>
+    <v-progress-linear :model-value="progressValue" :height="22" :color="bgColor" style="">
+        <!-- <template v-slot:default="{ progressValue }"> -->
+        <strong class="answer">{{ props.value }}</strong>
+        <!-- </template> -->
+    </v-progress-linear>
+</template>
+<style>
+.v-progress-linear__determinate {
+    border-radius: 0px 5px 5px 0px !important;
+}
+
+.answer {
+    background: rgb(var(--v-theme-yellow));
+    border-radius: 25px 25px 25px 25px;
+    padding-left: 7px;
+    padding-right: 7px;
+    font-size: 10px;
+    color: white;
+    font-weight: 500;
+}
+</style>