From 47f70de81af472fd3bf63a51f85c233877bfccaa Mon Sep 17 00:00:00 2001
From: Artem Ibragimov <artem.ibragimov1602@gmail.com>
Date: Fri, 15 Sep 2023 16:20:12 +0300
Subject: [PATCH] new graphics and error handling

---
 .gitignore                       |   1 +
 client/CalcForm.py               |   2 +-
 client/app.py                    |  29 ++++--
 client/static/css/calculator.css | 148 +++++++++++++++++++++++++++++++
 client/static/css/mainPage.css   |   5 --
 client/templates/index.html      |  57 ++++++++++++
 client/templates/mainPage.html   |  43 ---------
 server/app.py                    |   2 +-
 8 files changed, 228 insertions(+), 59 deletions(-)
 create mode 100644 client/static/css/calculator.css
 delete mode 100644 client/static/css/mainPage.css
 create mode 100644 client/templates/index.html
 delete mode 100644 client/templates/mainPage.html

diff --git a/.gitignore b/.gitignore
index 2ddb800..9eda1d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 #db
 db.csv
+*.db
 
 # VSCODE
 .vscode
diff --git a/client/CalcForm.py b/client/CalcForm.py
index 87935ec..4f03b74 100644
--- a/client/CalcForm.py
+++ b/client/CalcForm.py
@@ -4,4 +4,4 @@
 
 class CalcForm(FlaskForm):
     expression = StringField("Enter the expression to calculate", validators=[DataRequired()])
-    submit = SubmitField("Calculate")
+    submit = SubmitField("=")
diff --git a/client/app.py b/client/app.py
index 0600d91..1e61514 100644
--- a/client/app.py
+++ b/client/app.py
@@ -13,18 +13,28 @@
     app.config["SERVER_HOSTNAME"] + ":" + str(app.config["SERVER_PORT"])
 
 
+class ServerException(Exception):
+    def __init__(self, message: str):
+        self.message = message
+
+
 @app.route("/", methods=('GET', 'POST'))
 def index():
     form = CalcForm()
-    answer = get_answer(form)
-    history = get_history()['calculations']
+    answer = error = None
+    try:
+        answer = get_answer(form)
+    except ServerException as e:
+        error = e.message
+    history = get_history()
 
     return render_template(
-        "mainPage.html",
+        "index.html",
         form=form,
         expressions=[
             f"{entry['question']} = {entry['answer']}" for entry in reversed(history)],
-        answer=answer
+        answer=answer,
+        error=error
     )
 
 
@@ -36,20 +46,21 @@ def get_answer(form: CalcForm):
                 SERVER_ADDRESS + "/calculate", json=json, timeout=3)
         except TimeoutError:
             return None
-        if response.status_code == HTTPStatus.CREATED:
+        if response.status_code == HTTPStatus.OK:
             return response.json()["answer"]
-    return None  # TODO: show errors in UI
+        raise ServerException(response.text)
+    return None
 
 
 def get_history():
     try:
         responce = requests.get(SERVER_ADDRESS + "/history", timeout=3)
     except TimeoutError:
-        return None
+        return []
     if responce.status_code != HTTPStatus.OK:
-        return None
+        return []
 
-    return responce.json()
+    return responce.json()['calculations']
 
 
 if __name__ == "__main__":
diff --git a/client/static/css/calculator.css b/client/static/css/calculator.css
new file mode 100644
index 0000000..c8552c6
--- /dev/null
+++ b/client/static/css/calculator.css
@@ -0,0 +1,148 @@
+/* Стили для основного контейнера */
+.main-container{
+    background-color: #282a36;
+    font-family: 'IBM Plex Mono', monospace;
+    width: 100%;
+    height: 100vh;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.label {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: auto;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #abb2bf;
+    margin-bottom: 30px;
+}
+
+.label-text {
+    font-size: 60px;
+
+}
+
+.calculator-input-button{
+    margin-left: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 0%;
+    padding-bottom: 0%  ;
+    font-size: 20px;
+    font-family: 'IBM Plex Mono', monospace;
+    border-radius: 3px;
+}
+
+/* CSS */
+.button-30 {
+  margin-left: 10px;
+  align-items: center;
+  appearance: none;
+  background-color: #6272a4;
+  border-radius: 4px;
+  border-width: 0;
+  box-sizing: border-box;
+  color: #36395A;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: 'IBM Plex Mono', monospace;
+  height: 48px;
+  justify-content: center;
+  line-height: 1;
+  padding-left: 14px;
+  padding-right: 14px;
+  position: relative;
+  text-align: left;
+  text-decoration: none;
+  transition: box-shadow .15s,transform .15s;
+  user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
+  will-change: box-shadow,transform;
+  font-size: 30px;
+}
+
+.button-30:focus {
+  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, 
+}
+
+.button-30:hover {
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #4b587e 0 -3px 0 inset;
+  transform: translateY(-2px);
+}
+
+.button-30:active {
+  box-shadow: #475379 0 3px 7px inset;
+  transform: translateY(2px);
+}
+
+.calculator-input-button:hover{
+    transition: background-color 0.5s, color 0.5s;
+    background-color: #3498db; /* Измените цвет фона на тот, который вам нравится */
+    color: #f8f8f2; /* Измените цвет текста на тот, который вам нравится */
+}
+
+.calculator-input-button:not(:hover) {
+    background-color: #6272a4;
+    transition: background-color 0.5s, color 0.5s;
+    color: #f8f8f2;/* Исходный цвет текста */
+  }
+
+.calculator-input-button:focus{
+    outline: 0px;
+}  
+
+.calculator-input{
+    border-radius: 5px;
+    height: 47px;
+    font-size: 20px;
+    padding-left: 5px;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #ffb86c;
+    outline: 0;
+    border: none;
+    outline-offset: 0;
+    background-color: #44475a;
+}
+
+
+
+
+.calculator {
+    justify-content: center;
+    display: flex;
+}
+
+.calculator-input-container {
+    justify-content: center;
+}
+
+.calculator-input {
+    width: 40vh;
+    box-shadow: none;
+}
+
+.top-content {
+    height: 20vh;
+}
+
+.bottom{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: auto;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #abb2bf;
+}
+
+.answer{
+    color: #abb2bf;
+    font-size: 30px;
+}
+
+.histiry{
+    font-size: 20px;
+}
\ No newline at end of file
diff --git a/client/static/css/mainPage.css b/client/static/css/mainPage.css
deleted file mode 100644
index 71bbee1..0000000
--- a/client/static/css/mainPage.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.content{
-  text-align: center;
-  font-size: 115%;
-  margin: 40px;
-}
\ No newline at end of file
diff --git a/client/templates/index.html b/client/templates/index.html
new file mode 100644
index 0000000..c61654c
--- /dev/null
+++ b/client/templates/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Online calculator</title>
+    <!-- Подключение стилей Bootstrap -->
+    <link rel="stylesheet" href="../static/css/calculator.css">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+</head>
+<body>
+    
+    <div class="main-container">
+        <div class="top-content"></div>
+        <div class="label"> 
+            <h1 class="label-text">Calculator v1.0</h1>
+        </div>
+        <div class="container calculator">
+            <form method="post">
+            <div class="calculator-input-container row">
+                {{ form.expression(class="calculator-input", id="expression") }}
+                <!-- <input type="text" placeholder="type your expression here" class="calculator-input"> -->
+                {{ form.submit(class="button-30", id="submit") }}
+            </div>
+    </div>
+        </form">
+    
+    <div class="bottom" >
+    <p>
+        {% if answer != None %}
+        <div class="answer">Answer: {{answer}}</div>
+    {% endif %}
+    </p>
+    <p>
+        {% if error != None %}
+        <div style="color:red">{{error}}</div>
+        {% endif %}
+    </p>
+    <p>
+        <div class="history">History:</div>
+    </p>
+    {% for expr in expressions %}
+        <div>{{expr}}</div>
+    {% endfor %}
+    <br>
+
+    </div>
+    <!-- Подключение скриптов Bootstrap (необходимо для работы некоторых функций) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/client/templates/mainPage.html b/client/templates/mainPage.html
deleted file mode 100644
index f3b75b9..0000000
--- a/client/templates/mainPage.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta lang="ru">
-    <title>Online calculator</title>
-    <link rel="stylesheet"
-          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-          crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="/static/css/mainPage.css">
-</head>
-<body style="background-color: rgba(214, 235, 240, 0.365);">
-<header>
-    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #5f626322">
-        <img src="/static/image/Emblem.jpg" width="100" height="100" class="d-inline-block align-top" alt="">
-        <font size="9">Calculator</font>
-    </nav>
-</header>
-<main role="main" class="content" style="position: relative">
-    <form method="post">
-        <div class="form_group">
-            <label for="expression">{{ form.expression.label }}</label><br>
-            {{ form.expression(class="form_control", id="expression") }}
-        </div><br>
-        <div class="form_group">
-            {{ form.submit(class="form_control", id="submit") }}
-        </div>
-    </form>
-    {% if answer != None %}
-        <br>
-        <div>Answer: {{answer}}</div>
-    {% endif %}
-    <br>
-    <h3>History</h3>
-    <br>
-    {% for expr in expressions %}
-        <div>{{expr}}</div>
-    {% endfor %}
-    <br>
-</main>
-</body>
-</html>
\ No newline at end of file
diff --git a/server/app.py b/server/app.py
index b11b072..6e5815e 100644
--- a/server/app.py
+++ b/server/app.py
@@ -49,7 +49,7 @@ def create_task():
     except TimeoutError:
         db_code = HTTPStatus.REQUEST_TIMEOUT
 
-    return {"answer": answer, "saved": db_code == HTTPStatus.CREATED}, db_code
+    return {"answer": answer, "saved": db_code == HTTPStatus.CREATED}, HTTPStatus.OK
 
 
 @app.route('/history')