History and print settings (#16)

[x] Closes #1 
[x] Closes #2 
[x] Выпилил тайпскрипт

.env.development

@@ -0,0 +1,2 @@
+VUE_APP_API_PRINTER =https://printer.api.test.profcomff.com
+VUE_APP_API_MARKETING =https://marketing.api.test.profcomff.com/v1

.env.production

@@ -0,0 +1,2 @@
+VUE_APP_API_PRINTER =https://printer.api.profcomff.com
+VUE_APP_API_MARKETING =https://marketing.api.profcomff.com/v1

Dockerfile

@@ -1,9 +1,10 @@
 FROM node:16 AS build
+ARG BUILD_MODE=production
 WORKDIR /app
 ADD ./package.json ./yarn.lock /app/
 RUN yarn
 ADD . /app
-RUN yarn build
+RUN yarn build --mode ${BUILD_MODE}
 
 FROM nginx:1.21
 ADD ./default.conf /etc/nginx/conf.d/default.conf

package.json

@@ -22,23 +22,18 @@
     "yarn": "^1.22.19"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
-    "prettier": "^2.2.1",
-    "typescript": "~4.1.5"
+    "prettier": "^2.2.1"
   },
   "eslintConfig": {
     "root": true,
@@ -48,9 +43,7 @@
     "extends": [
       "plugin:vue/vue3-essential",
       "eslint:recommended",
-      "@vue/typescript/recommended",
-      "@vue/prettier",
-      "@vue/prettier/@typescript-eslint"
+      "@vue/prettier"
     ],
     "parserOptions": {
       "ecmaVersion": 2020

public/index.html

@@ -13,6 +13,7 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

@@ -1,12 +1,18 @@
 <template>
-  <!--
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+  <div class="container-fluid">
+    <router-view />
+
+    <div v-if="!this.$route.query.embeded">
+      <small class="text-muted">
+        Сделано в <a href="https://dyakov.space/">dyakov.space</a>
+      </small>
+    </div>
   </div>
-  -->
-  <router-view />
 </template>
 
-<style>
+<style scoped>
+.container-fluid {
+  max-width: 500px;
+  margin: 30px auto;
+}
 </style>

src/components/SendTaskDialog.vue

@@ -33,7 +33,7 @@
         id="file"
         type="file"
         accept="application/pdf"
-        @input="file_on_change"
+        @input="(event) => (file = event.target.files[0])"
         aria-describedby="fileHelp"
         required
       />
@@ -45,23 +45,90 @@
       </small>
     </div>
 
+    <div class="accordion accordion-flush" id="accordionFlush">
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="flush-headingOne">
+          <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#flush-collapseOne"
+            aria-expanded="false"
+            aria-controls="flush-collapseOne"
+          >
+            Больше настроек
+          </button>
+        </h2>
+        <div
+          id="flush-collapseOne"
+          class="accordion-collapse collapse"
+          aria-labelledby="flush-headingOne"
+          data-bs-parent="#accordionFlush"
+        >
+          <div class="form-group">
+            <label for="copies">Количество копий:</label>
+            <input
+              class="form-control"
+              type="number"
+              name="copies"
+              min="1"
+              max="10"
+              v-model="copies"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="pages">Номера страниц:</label>
+            <input
+              class="form-control"
+              type="text"
+              name="pages"
+              placeholder="Все"
+              v-model="pages"
+            />
+            <small id="pagesHelp" class="form-text text-muted">
+              <i>Формат: 1-2, 4</i>
+            </small>
+          </div>
+
+          <div class="form-group">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              name="twosided"
+              v-model="twosided"
+            />
+            <label for="twosided">&nbsp;Двусторонняя печать</label>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="form-actions">
-      <button type="submit" class="btn btn-primary">Отправить</button>
+      <button type="submit" class="btn btn-success btn-lg">Отправить</button>
+      <router-link class="btn btn-primary btn-lg" to="/history">
+        История печати
+      </router-link>
     </div>
   </form>
 </template>
 
 <script>
 import axios from "axios";
 
-const API_ROOT = "https://printer.api.profcomff.com";
 
 export default {
   data() {
     return {
       surname: undefined,
       number: undefined,
       file: undefined,
+
+      copies: 1,
+      pages: "",
+      twosided: false,
+
       api_pin: undefined,
       status: "PENDING",
     };
@@ -76,17 +143,13 @@ export default {
   },
   watch: {
     surname(new_surname) {
-      localStorage.surname = new_surname;
+      localStorage.setItem("surname", new_surname);
     },
     number(new_number) {
-      localStorage.number = new_number;
+      localStorage.setItem("number", new_number);
     },
   },
   methods: {
-    file_on_change(event) {
-      this.file = event.target.files[0];
-    },
-
     async send() {
       console.log("Start send routine");
       this.status = "PROGRESS";
@@ -108,7 +171,7 @@ export default {
           }
         }
       } finally {
-        this.$emit("uploaded", this.status, this.api_pin);
+        this.$emit("uploaded", this.status, this.api_pin, this.file.name);
         console.log("Finished!");
       }
     },
@@ -117,11 +180,16 @@ export default {
       console.log("Request to API");
 
       var response = await axios.post(
-        `${API_ROOT}/file`,
+        `${process.env.VUE_APP_API_PRINTER}/file`,
         {
           surname: this.surname.trim(),
           number: this.number.trim(),
           filename: this.file.name,
+          options: {
+            pages: this.pages,
+            copies: this.copies,
+            two_sided: this.twosided,
+          },
         },
         {
           headers: { "Content-Type": "application/json" },
@@ -138,7 +206,7 @@ export default {
       var body_data = new FormData();
       body_data.append("file", this.file);
 
-      await axios.post(`${API_ROOT}/file/${this.api_pin}`, body_data);
+      await axios.post(`${process.env.VUE_APP_API_PRINTER}/file/${this.api_pin}`, body_data);
     },
   },
 };

src/components/TaskCompleteDialog.vue

@@ -16,8 +16,7 @@
     </div>
     <div v-else-if="status == 422">
       <p class="h5">Не вышло =(</p>
-      <p class="h3">Запонены не все поля</p>
-      <sup>Как? O_o</sup>
+      <p class="h3">Проверьте параметры печати и попробуйте снова</p>
     </div>
     <div v-else>
       <p class="h5">Не вышло =(</p>
@@ -27,7 +26,11 @@
       </sup>
     </div>
     <div class="form-actions">
-      <button class="btn btn-primary" type="button" @click="returnButtonClick">
+      <button
+        class="btn btn-primary btn-lg"
+        type="button"
+        @click="this.$emit('click_return')"
+      >
         Вернуться
       </button>
     </div>
@@ -46,10 +49,5 @@ export default {
       required: false,
     },
   },
-  methods: {
-    returnButtonClick() {
-      this.$emit("click_return");
-    },
-  },
 };
 </script>

src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "@/views/Home.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/history",
+    name: "History",
+    component: () =>
+      import(/* webpackChunkName: "history" */ "@/views/History.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

src/utils/history.js

@@ -0,0 +1,13 @@
+export function get_history() {
+  let hist = localStorage.getItem("print-history") || "[]";
+  hist = JSON.parse(hist);
+  return hist;
+}
+
+export function add_history(pin, name) {
+  let hist = get_history();
+  hist = hist.slice(-9);
+  hist.push({ pin: pin, name: name });
+  localStorage.setItem("print-history", JSON.stringify(hist));
+  return hist;
+}