Derivative view and other minor changes

Author: ProgrammingLanguageLeader

frontend/src/components/pages/Derivative.vue

@@ -0,0 +1,90 @@
+<template>
+<b-container class="pt-4">
+  <b-form @submit="onSubmit">
+    <b-form-group label="Fill in the following fields to calculate derivative" class="pt-2">
+      <b-input-group prepend="function">
+        <b-input
+          id="integrating-function"
+          v-model="differentiableFunction"
+          required
+          placeholder="a function to take derivative"
+        />
+      </b-input-group>
+      <b-input-group prepend="variable: " class="pt-1">
+        <b-input
+          v-model="independentVariable"
+          required
+          placeholder="an independent variable"
+        />
+      </b-input-group>
+      <b-input-group prepend="order" class="pt-1">
+        <b-input
+          v-model="order"
+          placeholder="default is 1"
+          type="number"
+        />
+      </b-input-group>
+    </b-form-group>
+
+    <b-row align-h="center">
+      <b-col md="6" sm="12">
+        <b-button block type="submit" variant="primary">
+          Submit
+        </b-button>
+      </b-col>
+    </b-row>
+  </b-form>
+
+  <b-row align-h="center" class="pt-4" v-if="fetching">
+    <b-spinner />
+  </b-row>
+
+  <AnswerImage v-else-if="answer" :answer="answer" />
+
+  <b-row align-h="center" class="p-2" v-else-if="error">
+    Something went wrong...
+  </b-row>
+</b-container>
+</template>
+
+<script>
+import AnswerImage from '@/components/common/AnswerImage'
+import {makeSimpleRequest} from '@/utils'
+
+export default {
+  components: {AnswerImage},
+  methods: {
+    async onSubmit (event) {
+      event.preventDefault()
+      const orderNumber = this.order.length > 0 ? Number(this.order) : 1
+      const differentialOperator = (Number.isInteger(orderNumber) && orderNumber >= 2)
+        ? `d^${orderNumber}/d${this.independentVariable}^${orderNumber}`
+        : `d/d${this.independentVariable}`
+      const requestString = `${differentialOperator} ${this.differentiableFunction}`
+      this.fetching = true
+      try {
+        const response = await makeSimpleRequest(requestString)
+        this.answer = response
+        this.error = Boolean(response)
+      } catch (error) {
+        console.log(error)
+        this.error = true
+      }
+      this.fetching = false
+    }
+  },
+  data () {
+    return {
+      differentiableFunction: '',
+      independentVariable: 'x',
+      order: '',
+      answer: null,
+      fetching: false,
+      error: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

frontend/src/components/pages/Integral.vue

@@ -1,7 +1,7 @@
 <template>
 <b-container class="pt-4">
   <b-form @submit="onSubmit">
-    <b-form-group label="Enter the following fields to calculate integral" class="pt-2">
+    <b-form-group label="Fill in the following fields to calculate integral" class="pt-2">
       <b-input-group prepend="function">
         <b-input
           id="integrating-function"
@@ -83,7 +83,7 @@ export default {
   data () {
     return {
       integratingFunction: '',
-      independentVariable: '',
+      independentVariable: 'x',
       fromNumber: '',
       toNumber: '',
       answer: null,

frontend/src/router/index.js

@@ -1,23 +1,29 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Hello from '@/components/pages/Home'
+import Home from '@/components/pages/Home'
 import NotFound from '@/components/pages/NotFound'
 import Integral from '@/components/pages/Integral'
+import Derivative from '@/components/pages/Derivative'
 
 Vue.use(Router)
 
 const router = new Router({
   routes: [
     {
       path: '/',
-      name: 'Hello',
-      component: Hello
+      name: 'Home',
+      component: Home
     },
     {
       path: '/integral',
       name: 'Integral',
       component: Integral
     },
+    {
+      path: '/derivative',
+      name: 'Derivative',
+      component: Derivative
+    },
     {
       path: '*',
       name: 'Not found',