feat: add Modules components for GCBM run (#320)

* feat: add Sidebar, LocalDomain in GCBM. WIP.

* fix: vue-router and router view for new components/configurations, add a landing component

* feat: separated upload files, add collapse for parameters, add input for simulation title

* commit for running checks

* nit: style change

* feat: Changed Stepper, Prompt from Vue 2 to Vue 3 (#305)

* feat: changed stepper, prompt from vue 2 to vue 3

* feat: added emits

* feat: fixing lint errors

* feat: Update Accordion, Datepicker, Dropdown, FileUpload component from Vue 2 to Vue 3 (#303)

* feat: changed accordion, datepicker, dropdown, fileupload component from vue 2 to vue 3

* feat: changed toast in datepicker component from vue 2 to vue 3

* feat: deleted accordion component folder

* feat: fixing lint errors

Co-authored-by: yash <35102959+YashKandalkar@users.noreply.github.com>

* feat: add alearts for success/error of creating runs

* feat: Changed ConfigurationsRothc component from Vue 2 to Vue 3 (#311)

* feat: changed configurationsrothc component from vue 2 to vue 3

* feat: updated files

* feat: updated files

* feat: renamed folder naem to utils/

* feat: fixed build errors

Co-authored-by: yash <35102959+YashKandalkar@users.noreply.github.com>

* refactor: Migrate from Toasts to Notifications (#316)

* refactor: Replace toasts with notifications

Replaces vue-toastification toasts with Ant Design
notifications, allowing us to get rid of the dependency.

Signed-off-by: Amit <amitkulkarni2028@gmail.com>

* build: Remove toast dependency, fix lint errors

Signed-off-by: Amit <amitkulkarni2028@gmail.com>

* docs: Update screenshot and dependency in README (#317)

Signed-off-by: Amit <amitkulkarni2028@gmail.com>

* feat: add modules component. WIP.

* feat: add modules. WIP.

* feat: add description and config for Decay Module.

Co-authored-by: Palak Sharma <87171452+Palaksharma23@users.noreply.github.com>
Co-authored-by: Amit <51860725+CrystalSage@users.noreply.github.com>

README.md

@@ -56,7 +56,7 @@ This project provides an intuitive way for new to explore some preconfigured FLI
 - [TailwindCSS](https://tailwindcss.com/)
 - [Cypress](https://www.cypress.io/)
 - [Apexcharts](https://apexcharts.com/)
-- [Moment.js](https://momentjs.com/)
+- [day.js](https://day.js.org/)
 - [OpenLayers](https://openlayers.org/)
 
 ## Getting started
@@ -132,7 +132,7 @@ To shut down, the whole `docker-compose.yml` file and all services inside it the
 4. To view the UI please navigate to [127.0.0.1:8000](http://127.0.0.1:8000/). UI will look something like this:
 
 <div align="center">
-<img src="assets/flint-ui-dashboard.jpg">
+<img src="assets/flint-ui-dashboard.png">
 </div>
 
 ## Contributing

flint.ui/package.json

@@ -37,7 +37,6 @@
     "vue-clickaway": "2.2.2",
     "vue-github-buttons": "3.1.0",
     "vue-router": "^4.0.15",
-    "vue-toastification": "^2.0.0-rc.5",
     "vue3-apexcharts": "^1.4.1",
     "vue3-dropzone": "^0.0.7",
     "vue3-openlayers": "^0.1.67",

flint.ui/src/components/Cards/CardInfoRun.vue

@@ -49,8 +49,8 @@
 import axios from 'axios'
 import { ref } from 'vue'
 import ConfirmRun from '@/components/Prompts/ConfirmRun'
-import { useToast } from 'vue-toastification'
 import { PlayCircleOutlined } from '@ant-design/icons-vue'
+import { notification } from 'ant-design-vue'
 
 export default {
   name: 'CardInfoRun',
@@ -82,8 +82,6 @@ export default {
   },
   setup() {
     const isConfirmRunModalVisible = ref(false)
-    const toast = useToast()
-
     function showConfirmRunModal() {
       isConfirmRunModalVisible.value = true
     }
@@ -113,13 +111,17 @@ export default {
       axios
         .get(`${process.env.VUE_APP_REST_API_FLINT_EXAMPLE}/spec`)
         .then((response) => {
-          toast.success(`Specification route has been invoked.`, {
-            timeout: 2000
+          notification.success({
+            message: 'Specification route has been invoked',
+            duration: 5
           })
           console.log(response)
         })
         .catch((error) => {
-          toast.error(`${error}`, { timeout: 2000 })
+          notification.error({
+            message: `${error}`,
+            duration: 5
+          })
           console.log(error)
         })
     }
@@ -129,13 +131,17 @@ export default {
       axios
         .get(`${process.env.VUE_APP_REST_API_FLINT_EXAMPLE}/help/all`)
         .then((response) => {
-          toast.success(`Help route has been invoked.`, {
-            timeout: 2000
+          notification.success({
+            message: 'Help route has been invoked',
+            duration: 5
           })
           console.log(response)
         })
         .catch((error) => {
-          toast.error(`${error}`, { timeout: 2000 })
+          notification.error({
+            message: `${error}`,
+            duration: 5
+          })
           console.log(error)
         })
     }
@@ -145,13 +151,17 @@ export default {
       axios
         .get(`${process.env.VUE_APP_REST_API_FLINT_EXAMPLE}/version`)
         .then((response) => {
-          toast.success(`Version route has been invoked.`, {
-            timeout: 2000
+          notification.success({
+            message: 'Version route has been invoked',
+            duration: 5
           })
           console.log(response)
         })
         .catch((error) => {
-          toast.error(`${error}`, { timeout: 2000 })
+          notification.error({
+            message: `${error}`,
+            duration: 5
+          })
           console.log(error)
         })
     }
@@ -161,13 +171,17 @@ export default {
       axios
         .post(`${process.env.VUE_APP_REST_API_FLINT_EXAMPLE}/point`)
         .then((response) => {
-          toast.success(`Point route has been invoked. You can see the output in Point Output Table.`, {
-            timeout: 2000
+          notification.success({
+            message: 'Point route has been invoked',
+            duration: 5
           })
           console.log(response)
         })
         .catch((error) => {
-          toast.error(`${error}`, { timeout: 2000 })
+          notification.error({
+            message: `${error}`,
+            duration: 5
+          })
           console.log(error)
         })
     }
@@ -177,19 +191,26 @@ export default {
       axios
         .post(`${process.env.VUE_APP_REST_API_FLINT_EXAMPLE}/rothc`)
         .then((response) => {
-          toast.success(`RothC route has been invoked. You can see the output in RothC Output Table.`, {
-            timeout: 2000
+          notification.success({
+            message: 'RothC route has been invoked. You can see the output in RothC Output Table.',
+            duration: 5
           })
           console.log(response)
         })
         .catch((error) => {
-          toast.error(`${error}`, { timeout: 2000 })
+          notification.error({
+            message: `${error}`,
+            duration: 5
+          })
           console.log(error)
         })
     }
 
     function apiRoute_nonexistent() {
-      toast.warning('No such route exists!', { timeout: 2000 })
+      notification.warning({
+        message: 'No such route exists!',
+        duration: 5
+      })
       console.log('No such route exists!')
     }
 

flint.ui/src/components/ConfigurationsRothC/RothCAvgAirTemp.vue

@@ -36,36 +36,47 @@
 </template>
 
 <script>
-import formatData from '@/mixins/formatData'
+import useformatData from '../../utils/useformatData'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 export default {
-  mixins: [formatData],
-  computed: {
-    newconfig_avgAirTemp_data_orig: {
+  setup() {
+    const { formatArray } = useformatData()
+    const store = useStore()
+
+    const newconfig_avgAirTemp_data_orig = computed({
       get() {
-        return this.formatArray(this.$store.state.rothc.config.Variables[10].avgAirTemp.transform.data_orig)
+        return formatArray(store.state.rothc.config.Variables[10].avgAirTemp.transform.data_orig)
       },
       set(newValue) {
-        this.$store.commit('setNewConfig_avgAirTemp_data_orig', '$#[ ' + newValue + ' ]$#')
+        store.commit('setNewConfig_avgAirTemp_data_orig', '$#[ ' + newValue + ' ]$#')
       }
-    },
+    })
 
-    newconfig_avgAirTemp_data_month_avg: {
+    const newconfig_avgAirTemp_data_month_avg = computed({
       get() {
-        return this.formatArray(this.$store.state.rothc.config.Variables[10].avgAirTemp.transform.data_month_avg)
+        return formatArray(store.state.rothc.config.Variables[10].avgAirTemp.transform.data_month_avg)
       },
       set(newValue) {
-        this.$store.commit('setNewConfig_avgAirTemp_data_month_avg', '$#[ ' + newValue + ' ]$#')
+        store.commit('setNewConfig_avgAirTemp_data_month_avg', '$#[ ' + newValue + ' ]$#')
       }
-    },
+    })
 
-    newconfig_avgAirTemp_data_lastyearcopy: {
+    const newconfig_avgAirTemp_data_lastyearcopy = computed({
       get() {
-        return this.formatArray(this.$store.state.rothc.config.Variables[10].avgAirTemp.transform.data_lastyearcopy)
+        return formatArray(store.state.rothc.config.Variables[10].avgAirTemp.transform.data_lastyearcopy)
       },
       set(newValue) {
-        this.$store.commit('setNewConfig_avgAirTemp_data_lastyearcopy', '$#[ ' + newValue + ' ]$#')
+        store.commit('setNewConfig_avgAirTemp_data_lastyearcopy', '$#[ ' + newValue + ' ]$#')
       }
+    })
+
+    return {
+      formatArray,
+      newconfig_avgAirTemp_data_month_avg,
+      newconfig_avgAirTemp_data_lastyearcopy,
+      newconfig_avgAirTemp_data_orig
     }
   }
 }