From c96c3978c6b82c89c09d88eca1367ce638b2c29d Mon Sep 17 00:00:00 2001
From: Anton Romanov <a.romanov@ulstu.ru>
Date: Mon, 18 Apr 2022 12:59:32 +0400
Subject: [PATCH] #1 -- add choosing method on page

---
 .../ru/ulstu/controller/IndexController.java  |  35 +++-
 .../java/ru/ulstu/datamodel/ChartForm.java    |   9 +
 src/main/java/ru/ulstu/method/Method.java     |   2 +-
 src/main/resources/templates/default.html     |  16 +-
 src/main/resources/templates/method.html      | 156 ++++++++++++++++++
 5 files changed, 213 insertions(+), 5 deletions(-)
 create mode 100644 src/main/resources/templates/method.html

diff --git a/src/main/java/ru/ulstu/controller/IndexController.java b/src/main/java/ru/ulstu/controller/IndexController.java
index 6592761..f749ca9 100644
--- a/src/main/java/ru/ulstu/controller/IndexController.java
+++ b/src/main/java/ru/ulstu/controller/IndexController.java
@@ -50,15 +50,44 @@ public class IndexController {
         if (chartForm.getTimeSeriesMeta() != null
                 && chartForm.getTimeSeriesMeta().getKey() != null
                 && !chartForm.getTimeSeriesMeta().getKey().isEmpty()) {
-            addChartToModel(dbService.getTimeSeries(chartForm.getSet(), chartForm.getTimeSeriesMeta().getKey()), model);
+            addChartToModel(dbService.getTimeSeries(chartForm.getSet(), chartForm.getTimeSeriesMeta().getKey()), null, model);
         }
         return "index";
     }
 
-    private void addChartToModel(TimeSeries timeSeries, Model model) throws ExecutionException, InterruptedException, InvocationTargetException, NoSuchMethodException, InstantiationException, IllegalAccessException, ModelingException {
+    @GetMapping("/method")
+    public String method(Model model) throws IOException {
+        model.addAttribute("sets", dbService.getSets());
+        model.addAttribute("methods", timeSeriesService.getAvailableMethods());
+        model.addAttribute("chartForm", new ChartForm());
+        return "method";
+    }
+
+    @GetMapping("chartMethod")
+    public String chartMethod(@ModelAttribute ChartForm chartForm, Model model) throws IOException, ModelingException, ExecutionException, InterruptedException, InvocationTargetException, NoSuchMethodException, InstantiationException, IllegalAccessException {
+        model.addAttribute("sets", dbService.getSets());
+        model.addAttribute("methods", timeSeriesService.getAvailableMethods());
+        if (chartForm.getSet() != null && !chartForm.getSet().getKey().equals("")) {
+            model.addAttribute("listTimeSeries", dbService.getTimeSeriesMeta(chartForm.getSet()));
+        }
+        if (chartForm.getTimeSeriesMeta() != null
+                && chartForm.getTimeSeriesMeta().getKey() != null
+                && !chartForm.getTimeSeriesMeta().getKey().isEmpty()
+                && chartForm.getMethodClassName() != null) {
+            addChartToModel(dbService.getTimeSeries(chartForm.getSet(), chartForm.getTimeSeriesMeta().getKey()), chartForm.getMethodClassName(), model);
+        }
+        return "method";
+    }
+
+    private void addChartToModel(TimeSeries timeSeries, String method, Model model) throws ExecutionException, InterruptedException, InvocationTargetException, NoSuchMethodException, InstantiationException, IllegalAccessException, ModelingException {
         int countForecastPoints = timeSeries.getLength() > 20 ? 10 : timeSeries.getLength() / 3;
         TimeSeries timeSeriesModel = timeSeriesService.smoothTimeSeries(timeSeries).getTimeSeries();
-        ModelingResult modelingResult = timeSeriesService.getForecast(timeSeries, countForecastPoints);
+        ModelingResult modelingResult;
+        if (method == null) {
+            modelingResult = timeSeriesService.getForecast(timeSeries, countForecastPoints);
+        } else {
+            modelingResult = timeSeriesService.getForecast(timeSeries, method, countForecastPoints);
+        }
         TimeSeries forecast = modelingResult.getTimeSeries();
         TimeSeries testForecast = modelingResult.getTestForecast();
         model.addAttribute("dates", getDatesForChart(timeSeries, forecast));
diff --git a/src/main/java/ru/ulstu/datamodel/ChartForm.java b/src/main/java/ru/ulstu/datamodel/ChartForm.java
index 6838d1e..eeeed6f 100644
--- a/src/main/java/ru/ulstu/datamodel/ChartForm.java
+++ b/src/main/java/ru/ulstu/datamodel/ChartForm.java
@@ -6,6 +6,7 @@ import ru.ulstu.db.model.TimeSeriesSet;
 public class ChartForm {
     private TimeSeriesSet set;
     private TimeSeriesMeta timeSeriesMeta;
+    private String methodClassName = null;
 
     public TimeSeriesSet getSet() {
         return set;
@@ -22,4 +23,12 @@ public class ChartForm {
     public void setTimeSeriesMeta(TimeSeriesMeta timeSeriesMeta) {
         this.timeSeriesMeta = timeSeriesMeta;
     }
+
+    public String getMethodClassName() {
+        return methodClassName;
+    }
+
+    public void setMethodClassName(String methodClassName) {
+        this.methodClassName = methodClassName;
+    }
 }
diff --git a/src/main/java/ru/ulstu/method/Method.java b/src/main/java/ru/ulstu/method/Method.java
index ca04a08..99036c0 100644
--- a/src/main/java/ru/ulstu/method/Method.java
+++ b/src/main/java/ru/ulstu/method/Method.java
@@ -116,7 +116,7 @@ public abstract class Method {
         return getName();
     }
 
-    public String getId() {
+    public String getKey() {
         return getClass().getSimpleName();
     }
 
diff --git a/src/main/resources/templates/default.html b/src/main/resources/templates/default.html
index 8a2c2e9..32c2091 100644
--- a/src/main/resources/templates/default.html
+++ b/src/main/resources/templates/default.html
@@ -13,10 +13,24 @@
     <link rel="stylesheet" href="/webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
 </head>
 <body>
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
     <a class="navbar-brand" href="/">
         <img src="img/logo.png" width="180" height="60" alt="">
     </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="/">Главная <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/method">Выбрать метод</a>
+            </li>
+        </ul>
+    </div>
 </nav>
 <div class="wrapper">
     <div id="sidebar" class="collapse navbar-collapse sidebar-mobile">
diff --git a/src/main/resources/templates/method.html b/src/main/resources/templates/method.html
new file mode 100644
index 0000000..ba39def
--- /dev/null
+++ b/src/main/resources/templates/method.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
+<html
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/xhtml"
+        layout:decorate="~{default}">
+<head>
+    <title>Time series smoothing</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+</head>
+<div class="container" layout:fragment="content">
+    <script src="/webjars/highcharts/7.0.0/highcharts.js"></script>
+    <script th:inline="javascript" th:if="${timeSeries != null}">
+        $(document).ready(function () {
+            var chart = {
+                renderTo: 'container',
+                style: {
+                    fontFamily: 'arial'
+                }
+            };
+
+            var title = {
+                text: [[#{messages.time_series_forecast}]]
+            };
+            var xAxis = {
+                categories: [[${dates}]],
+                title: {
+                    enabled: true,
+                    text: [[#{messages.date}]]
+                },
+                startOnTick: true,
+                endOnTick: true,
+                showLastLabel: true
+            };
+            var yAxis = {
+                title: {
+                    text: [[#{messages.value}]]
+                }
+            };
+            var plotOptions = {
+                scatter: {
+                    marker: {
+                        radius: 5,
+                        states: {
+                            hover: {
+                                enabled: true,
+                                lineColor: 'rgb(100,100,100)'
+                            }
+                        }
+                    },
+                    states: {
+                        hover: {
+                            marker: {
+                                enabled: true
+                            }
+                        }
+                    },
+                    tooltip: {
+                        headerFormat: '<b>{series.name}</b><br>',
+                        pointFormat: '{point.y}'
+                    }
+                }
+            };
+            var series = [
+                {
+                    name: [[#{messages.time_series}]],
+                    color: 'rgba(119,152,191,0.5)',
+                    data: [[${timeSeries}]]
+                },
+                {
+                    name: [[#{messages.time_series_model}]],
+                    color: 'rgba(255,200,0,0.5)',
+                    data: [[${model}]]
+                },
+                {
+                    name: [[#{messages.time_series_test_forecast}]],
+                    color: 'rgba(255,0,0,0.5)',
+                    data: [[${testForecast}]]
+                },
+                {
+                    name: [[#{messages.time_series_forecast_short}]],
+                    color: 'rgba(255,0,0,0.5)',
+                    data: [[${forecast}]]
+                }
+            ];
+
+            var json = {};
+            json.chart = chart;
+            json.title = title;
+            json.xAxis = xAxis;
+            json.yAxis = yAxis;
+            json.series = series;
+            json.plotOptions = plotOptions;
+            $('#chart').highcharts(json);
+        });
+
+
+
+
+    </script>
+    <form action="#" th:action="chartMethod" th:object="${chartForm}">
+        <div class="row">
+            <div class="col-3">
+                <select id="select-set" class="selectpicker" data-live-search="true" th:field="*{set}"
+                        data-width="90%" onchange="$('#select-ts').val(''); form.submit();">
+                    <option value="">Набор временных рядов</option>
+                    <option th:each="set : ${sets}"
+                            th:value="${set.key}"
+                            th:utext="${set.key}">
+                    </option>
+                </select>
+                <script th:inline="javascript" th:if="*{set != null}">
+                    $('#select-set').val([[*{set.key}]]);
+                    $('#select-set').selectpicker('refresh');
+
+
+                </script>
+
+                <select id="select-ts" class="selectpicker" data-live-search="true" th:field="*{timeSeriesMeta}"
+                        data-width="90%" onchange="form.submit();">
+                    <option value="">Временной ряд</option>
+                    <option th:each="ts : ${listTimeSeries}"
+                            th:value="${ts.key}"
+                            th:utext="${ts.key}">
+                    </option>
+                </select>
+                <script th:inline="javascript" th:if="*{timeSeriesMeta != null}">
+                    $('#select-ts').val([[*{timeSeriesMeta.key}]]);
+                    $('#select-ts').selectpicker('refresh');
+
+                </script>
+
+                <select id="select-method" class="selectpicker" data-live-search="true" th:field="*{methodClassName}"
+                        data-width="90%" onchange="form.submit();">
+                    <option value="">Метод прогнозирования</option>
+                    <option th:each="method : ${methods}"
+                            th:value="${method.key}"
+                            th:utext="${method.name}">
+                    </option>
+                </select>
+                <script th:inline="javascript" th:if="*{methodClassName != null && methodClassName != ''}">
+                    $('#select-method').val([[*{methodClassName}]]);
+                    $('#select-method').selectpicker('refresh');
+
+                </script>
+
+                <div th:if="${forecastDescription != null && forecastDescription.timeSeriesMethod != null}">
+                    <p> Метод прогнозирования: <span th:text="${forecastDescription.timeSeriesMethod}"> </span>
+                    <p> Оценка: <span th:text="${forecastDescription.score.value}"> </span>
+                </div>
+            </div>
+            <div class="col-9">
+                <div id="chart" style="width: 550px; height: 400px; margin: 0 auto"></div>
+            </div>
+        </div>
+    </form>
+</div>
+</html>