FEAT: calculator prototype

src/components/configurationForm.vue

@@ -22,45 +22,115 @@ import {
   DB_SIZE_GREATER_RAM,
 } from '../utils/constants/configuration'
 import { validationSchema as schema } from '../utils/validation'
+import { useRoute, useRouter } from 'vue-router'
+import { calculateSettings } from '../utils/calculator'
 
-const dbVersions = ref(DB_VERSIONS)
+const route = useRoute()
+const router = useRouter()
 
-const osTypes = ref([OS_LINUX, OS_WINDOWS, OS_MAC])
+const query = route.query
+
+const dbVersions = ref(
+  DB_VERSIONS.map((version) => ({
+    label: String(version),
+    value: version,
+  })),
+)
+
+const osTypes = ref([
+  {
+    label: 'Linux',
+    value: OS_LINUX,
+  },
+  {
+    label: 'OS X',
+    value: OS_MAC,
+  },
+  {
+    label: 'Windows',
+    value: OS_WINDOWS,
+  },
+])
 
 const dbTypes = ref([
-  DB_TYPE_WEB,
-  DB_TYPE_OLTP,
-  DB_TYPE_DW,
-  DB_TYPE_DESKTOP,
-  DB_TYPE_MIXED,
+  {
+    label: 'Web application',
+    value: DB_TYPE_WEB,
+  },
+  {
+    label: 'Online transaction processing system',
+    value: DB_TYPE_OLTP,
+  },
+  {
+    label: 'Data warehouse',
+    value: DB_TYPE_DW,
+  },
+  {
+    label: 'Desktop application',
+    value: DB_TYPE_DESKTOP,
+  },
+  {
+    label: 'Mixed type of application',
+    value: DB_TYPE_MIXED,
+  },
 ])
 
 const ramUnits = ref([SIZE_UNIT_TB, SIZE_UNIT_GB, SIZE_UNIT_MB])
 
 const dataStorages = ref([
-  HARD_DRIVE_HDD,
-  HARD_DRIVE_SSD,
-  HARD_DRIVE_SAN,
-  HARD_DRIVE_NVME,
+  {
+    label: 'NVMe storage',
+    value: HARD_DRIVE_NVME,
+  },
+  {
+    label: 'SSD storage',
+    value: HARD_DRIVE_SSD,
+  },
+  {
+    label: 'Network (SAN) storage',
+    value: HARD_DRIVE_SAN,
+  },
+  {
+    label: 'HDD storage',
+    value: HARD_DRIVE_HDD,
+  },
 ])
 
-const dataSizes = ref([DB_SIZE_LESS_RAM, DB_SIZE_MID_RAM, DB_SIZE_GREATER_RAM])
+const dataSizes = ref([
+  {
+    label: 'Less than RAM',
+    value: DB_SIZE_LESS_RAM,
+  },
+  {
+    label: '1x - 3x RAM',
+    value: DB_SIZE_MID_RAM,
+  },
+  {
+    label: 'More than 3x RAM',
+    value: DB_SIZE_GREATER_RAM,
+  },
+])
 
 const state = reactive({
-  dbVersion: 18,
-  osType: OS_LINUX,
-  dbType: DB_TYPE_WEB,
-  totalMemory: undefined,
-  totalMemoryUnit: SIZE_UNIT_GB,
-  cpuNum: 1,
-  connectionNum: 100,
-  hdType: HARD_DRIVE_NVME,
-  dbSize: DB_SIZE_LESS_RAM,
+  dbVersion: query?.dbVersion ? parseInt(query.dbVersion) : 18,
+  osType: query?.osType ?? OS_LINUX,
+  dbType: query?.dbType ?? DB_TYPE_WEB,
+  totalMemory: query?.totalMemory ? parseInt(query.totalMemory) : undefined,
+  totalMemoryUnit: query?.totalMemoryUnit ?? SIZE_UNIT_GB,
+  cpuNum: query?.cpuNum ? parseInt(query.cpuNum) : 1,
+  connectionNum: query?.connectionNum ? parseInt(query.connectionNum) : 100,
+  hdType: query?.hdType ?? HARD_DRIVE_NVME,
+  dbSize: query?.dbSize ?? DB_SIZE_LESS_RAM,
 })
+
+const onSubmit = async () => {
+  await router.push({ name: 'Index', query: { ...state } })
+  console.log(calculateSettings({ ...state }))
+}
 </script>
 
 <template>
-  <UForm class="space-y-4" :state :schema>
+  <UForm class="space-y-4" :state :schema @submit="onSubmit">
     <UFormField
       label="DB version"
       help="PostgreSQL version (find out via 'SELECT version();')"