basic setup for web and created frontend

.gitignore

@@ -13,4 +13,4 @@ __pycache__
 run.sh
 .vscode/
 log.txt
-.idea
+venv

README.md

@@ -69,6 +69,18 @@ OUTPUT: 13.0 + x
 [5]+  Stopped                 python3
 
 ```
+## Run Visma Web:
+
+
+To launch Visma on web do:
+```shell
+>>> pip install -r requirements.txt
+Change Directory to web folder
+>>> cd web
+run flask server
+>>> flask run
+launch Your localhost http://127.0.0.1:5000
+```
 
 
 ## Download:

web/.flaskenv

@@ -0,0 +1,2 @@
+FLASK_APP = visma.py
+FLASK_DEBUG = 1

web/app/__init__.py

@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from app import routes

web/app/routes.py

@@ -0,0 +1,63 @@
+from flask import render_template, request, redirect, url_for, jsonify
+from app import app
+import sympy
+import mpmath
+import math
+
+
+@app.route('/')
+@app.route('/index', methods=['GET'])
+def index():
+    return render_template('index.html', title='home')
+
+# Simplifying the expression
+@app.route('/simplify/posts', methods=['POST'])
+def simplify():
+    try:
+        value = request.form['expr']
+        if '^' in value:
+            value = value.replace('^', '**')
+        print(value)
+        ans = sympy.N(value)
+        ans = str(ans)
+        check = 0 
+        for i in range(ans.index('.')+1, len(ans)):
+            if ans[i] != '0': 
+                check=1
+        if check:
+            return ans[:ans.index('.')+5]
+        else:
+            return ans[:ans.index('.')]
+    except (ValueError, KeyError, TypeError) as error:
+        print(error)
+        return error
+
+# Calculating the Factoral of given Number
+@app.route('/factorial/posts', methods=['POST'])
+def factorial():
+    value = request.form['expr']
+    ans = math.factorial(int(value))
+    return str(ans)
+
+# simplifying algebric and Trignometric expressions
+@app.route('/simplify_expr/posts', methods=['POST'])
+def simplify_expr():
+    expr = request.form['expr']
+    if '^' in expr:
+        expr = expr.replace('^', '**')
+    expr_result = sympy.simplify(expr)
+    return str(expr_result)
+
+# Integrating the given expression
+# TODO !
+@app.route('/integrate/posts', methods=['POST'])
+def integrate():
+    value = request.form['expr']
+    return value
+
+# Differentiatin the given expression
+# TODO!
+@app.route('/differentiate/posts', methods=['POST'])
+def differentiate():
+    value = request.form['expr']
+    return value    

web/app/static/js/app.js

@@ -0,0 +1,75 @@
+$(document).ready(function() {
+    var x = document.getElementById("visma_btn")
+    if(x.style.display !== "none") {
+        x.style.display = "none";
+    }
+})
+
+// Get expression value
+function getExpr(type_of_operation) {
+    console.log(type_of_operation);
+    var url = `http://127.0.0.1:5000/${type_of_operation}/posts`;
+    var d = document.getElementById("user_input").value;
+
+    // Checking number is negative for not for Factorial
+    var check_negative_num = parseInt(d, 10);
+    if(type_of_operation==="factorial" && check_negative_num < 0) {
+            alert('Factorial is not defined for negative numbers');
+    }
+
+    else {
+        var data = {'expr':d}
+        console.log("data is being sent");
+        $.post({
+            url,
+            data,
+            success: function (data,status) {
+                console.log(status);
+                console.log(`${data} and status is ${status}` );  
+                document.getElementById('user_input').value = data
+            },
+            error: function() {
+                alert('It seems that something is wrong in your Input')
+            }
+        });
+        hideButton();
+    }
+}
+
+$(".input_expr").click(function() {
+    var input_val = $(this).val();
+    // console.log(input_val);
+    if(input_val == 'del') {
+        input_box_val = document.getElementById("user_input").value;
+        input_box_val_size = input_box_val.length;
+        // console.log(input_box_val);
+        document.getElementById("user_input").value = input_box_val.slice(0,input_box_val_size-1);
+    }
+    else if(input_val == "clear") {
+        document.getElementById("user_input").value = "";
+    }
+    else {
+        document.getElementById("user_input").value = document.getElementById('user_input').value + input_val
+    }
+});
+
+function showButton() {
+    var x = document.getElementById("visma_btn");
+    console.log("show");
+    input_val = document.getElementById('user_input').value;
+    if(input_val === "") {
+        alert('Please Provide a Input')
+    }
+
+    else if(x.style.display === "none") {
+        x.style.display = "block";
+    }
+}
+
+function hideButton() {
+    var x = document.getElementById("visma_btn");
+    console.log("hide");
+    if(x.style.display !== "none") {
+        x.style.display = "none";
+    }
+}

web/app/static/styles/style.css

@@ -0,0 +1,41 @@
+table {
+        width: 90%; 
+        margin-left: 5%;
+        margin-top: 5%;
+}
+#btn { 
+        width: 100%; 
+}
+.btn-info {
+            width: 20%;
+}
+.visma_btn {
+            margin-left: 30%;
+}
+.btn-success {
+                width:30%;
+                margin: 1%;
+}
+a {
+    text-decoration: none;
+}
+.solution {
+            margin-top: 5%; 
+            margin-right: 5%;
+}
+.history {
+            margin-left: 20%; 
+            margin-right: 10%;
+}
+.show-history {
+                margin-left: 30%;
+}
+#history {
+            height: 50%;
+}
+.left-tab-content {
+                    height: 200px;
+}
+.data {
+        margin-left: 15%;
+}

web/app/templates/base.html

@@ -0,0 +1,26 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>        
+    <link rel="stylesheet" href="../static/styles/style.css">
+    {% if title %}
+    <title>{{ title }} - Visma</title>
+    {% else %}
+    <title>Welcome to Visma</title>
+    {% endif %}
+</head>
+<body style="background-color:rgb(248, 244, 244); margin-bottom: 10%;">
+    <div class="nav fixed-top" style="height:10%; background-color: rgb(248, 244, 235);">
+        <a href="/index" class="btn text-dark" style="margin-top: 0.3%; margin-left: 2%;font-size: x-large;">Visma</a>
+    </div>
+    {% block content %}{% endblock %}
+
+    <script src="../static/js/app.js"></script>
+</body>
+</html>

web/app/templates/index.html

@@ -0,0 +1,103 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <div class="d-md-flex" class="left-half" style="margin-top: 5%;">
+        <div class="col-md-6 p-0 bg-indigo h-md-100">
+            <div class="text-white d-md-flex align-items-center h-100 p-5 text-center justify-content-center">
+                <textarea name="user_input" id="user_input" cols="100" rows="2" placeholder="Enter Here">{{ ans }}</textarea>
+            </div>
+            <table>
+                <tr>
+                    <td><button class="input_expr" id="btn" value="x" onclick="">x</button></td>
+                    <td><button class="input_expr" id="btn" value="y" onclick="">y</button></td>
+                    <td><button class="input_expr" id="btn" value="z" onclick="">z</button></td>
+                    <td><button class="input_expr" id="btn" value="(" onclick="">(</button></td>
+                    <td><button class="input_expr" id="btn" value=")" onclick="">)</button></td>
+                    <td><button class="input_expr" id="btn" value="7" onclick="">7</button></td>
+                    <td><button class="input_expr" id="btn" value="8" onclick="">8</button></td>
+                    <td><button class="input_expr" id="btn" value="9" onclick="">9</button></td>
+                    <td><button class="input_expr" id="btn" value="del" onclick="">DEL</button></td>
+                    <td><button class="input_expr" id="btn" value="clear" onclick="">CLEAR</button></td>
+                </tr>
+                <tr>
+                    <td><button class="input_expr" id="btn"  value="f" onclick="">f</button></td>
+                    <td><button class="input_expr" id="btn"  value="q" onclick="">q</button></td>
+                    <td><button class="input_expr" id="btn" value="h" onclick="">h</button></td>
+                    <td><button class="input_expr" id="btn" value="{" onclick="">{</button></td>
+                    <td><button class="input_expr" id="btn" value="}" onclick="">}</button></td>
+                    <td><button class="input_expr" id="btn" value="4" onclick="">4</button></td>
+                    <td><button class="input_expr" id="btn" value="5" onclick="">5</button></td>
+                    <td><button class="input_expr" id="btn" value="6" onclick="">6</button></td>
+                    <td><button class="input_expr" id="btn" value="/" onclick="">/</button></td>
+                    <td><button class="input_expr" id="btn" value="*" onclick="">*</button></td>
+                </tr>            
+                <tr>
+                    <td><button class="input_expr" id="btn" value="sin" onclick="">sin</button></td>
+                    <td><button class="input_expr" id="btn" value="cos" onclick="">cos</button></td>
+                    <td><button class="input_expr" id="btn" value="tan" onclick="">tan</button></td>
+                    <td><button class="input_expr" id="btn" value="[" onclick="">[</button></td>
+                    <td><button class="input_expr" id="btn" value="]" onclick="">]</button></td>
+                    <td><button class="input_expr" id="btn" value="1" onclick="">1</button></td>
+                    <td><button class="input_expr" id="btn" value="2" onclick="">2</button></td>
+                    <td><button class="input_expr" id="btn" value="3" onclick="">3</button></td>
+                    <td><button class="input_expr" id="btn" value="+" onclick="">+</button></td>
+                    <td><button class="input_expr" id="btn" value="-" onclick="">-</button></td>
+                </tr>            
+                <tr>
+                    <td><button class="input_expr" id="btn" value="log" onclick="">log</button></td>
+                    <td><button class="input_expr" id="btn" value="exp" onclick="">exp</button></td>
+                    <td><button class="input_expr" id="btn" value="^" onclick="">^</button></td>
+                    <td><button class="input_expr" id="btn" value="i" onclick="">i</button></td>
+                    <td><button class="input_expr" id="btn" value="pi" onclick="">pi</button></td>
+                    <td><button class="input_expr" id="btn" value="." onclick="">.</button></td>
+                    <td><button class="input_expr" id="btn" value="0" onclick="">0</button></td>
+                    <td><button class="input_expr" id="btn" value="=" onclick="">=</button></td>
+                    <td><button class="input_expr" id="btn" value="<" onclick=""><</button></td>
+                    <td><button class="input_expr" id="btn" value=">" onclick="">></button></td>
+                </tr>            
+            </table>
+            <div class="solution">    
+                <ul class="nav nav-tabs">
+                    <li class="nav-item">
+                        <a href="#step-by-step" class="nav-link active text-dark" data-toggle="tab">Step-byStep</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#logger" class="nav-link text-dark" data-toggle="tab">logger</a>
+                    </li>
+                </ul>
+                <div class="tab-content bg-light" class="">
+                    <div class="tab-pane fade show active left-tab-content" id="step-by-step">
+                        <p class="data">Step By Step Solution will be Shown Here</p>
+                    </div>
+                    <div class="tab-pane fade left-tab-content" id="logger">
+                        <p class="data">Logger</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-6" class="right-half" >
+            <div class="d-sm-flex h-sm-100 p-5 justify-content-center">
+                <button class="btn btn-info" onclick="showButton()">Visma</button>
+            </div>
+            <div class="visma_btn" id="visma_btn">
+                <button class="btn btn-success" onclick="getExpr(this.value)" id="simplify" value="simplify">Simplify</button>
+                <button class="btn btn-success" onclick="getExpr(this.value)" value="factorial">Factorial</button><br>
+                <button class="btn btn-success" onclick="getExpr(this.value)" value="integrate">Integrate</button>
+                <button class="btn btn-success" onclick="getExpr(this.value)" value="differentiate">Differentiate</button><br>
+                <button class="btn btn-success" onclick="getExpr(this.value)" value="simplify_expr">Solve expression</button>
+            </div>     
+            <div class="history">    
+                <ul class="nav nav-tabs">
+                    <li class="nav-item">
+                        <a href="#history" class="nav-link active text-dark" data-toggle="tab">History</a>
+                    </li>
+                </ul>
+                <div class="tab-content bg-light">
+                    <div class="tab-pane show active" id="History">
+                        <p class="show-history">History will be Shown Here</p>
+                    </div>
+                </div>
+            </div>                       
+        </div>     
+    </div>
+{% endblock %}

web/visma.py

@@ -0,0 +1 @@
+from app import app