Four

css/style.css

@@ -1,7 +1,6 @@
  * {
      font-family: Bahnschrift, sans-serif;
  }
-
  main {
      display: flex;
      width: 100%;
@@ -17,7 +16,6 @@
      padding: 10vh;
  }
 
-
  router-link {
      cursor: pointer;
      font-family: Bahnschrift, sans-serif;
@@ -35,7 +33,6 @@
      z-index: 0;
  }
 
-
  router-link::before {
      content: "";
      position: absolute;
@@ -53,7 +50,6 @@
      transform: scale(2);
  }
 
-
  router-link:hover {
      color: #eeeeee;
  }
@@ -166,4 +162,40 @@
  }
  .disabled-block {
      display: none;
+ }
+
+ .my-div {
+     position: absolute;
+     top: 0;
+     left: 0;
+     height: 100%;
+     width: 100%;
+     background: #252525;
+     color: white;
+     padding: 2vh;
+     overflow: hidden;
+ }
+
+ .my-div label {
+      width: 70vw;
+     border: white;
+ }
+
+ .my-div::before {
+     content: "";
+     position: absolute;
+     bottom: -700px;
+     right: -700px;
+     width: 1400px;
+     height: 1400px;
+     background: white;
+     border-radius: 50%;
+ }
+
+ body {
+     overflow-x: hidden;
+ }
+
+ .none {
+     display: none;
  }

js/components/Home.js

@@ -1,4 +1,5 @@
 import {getTemplateUsers} from "./Templates.js";
+import {getTemplateRegistration} from "./Templates.js";
 import {bindEvents, dEvent} from "../libs/helper.js";
 import {f} from "../libs/helper.js"
 
@@ -10,8 +11,13 @@ export default class Home extends HTMLElement {
         this.bind();
         this.rendered = false;
         this.data = {
-            service: null
+            name:"",
+            price:"",
+            description:"",
+            position:"",
         }
+        this.service = null;
+
     }
 
     connectedCallback() {
@@ -38,15 +44,24 @@ export default class Home extends HTMLElement {
 
         this.registrations = res;
         for (let reg of this.registrations) {
-            console.log(reg)
-            this.innerHTML +=(getTemplateUsers(reg))
+            this.innerHTML += (getTemplateUsers(reg))
         }
         this.attachModel();
     }
 
     attachModel() {
+
+        this.querySelectorAll("input")
+            .forEach(el=>el.addEventListener("input",e =>this.inputText(e)))
+
         this.querySelectorAll('.button')
-            .forEach(el=>el.addEventListener('click', e => this.clickButton(e)))
+            .forEach(el => el.addEventListener('click', e => this.clickButton(e)))
+    }
+
+    inputText(e) {
+        if (this.data[e.target.dataset.model] !== undefined) {
+            this.data[e.target.dataset.model] = e.target.value;
+        }
     }
 
     clickButton(e) {
@@ -56,8 +71,8 @@ export default class Home extends HTMLElement {
     }
 
     async register(e) {
-        this.data.service = e.target.dataset.service
-        let res = await f("servicerecord","post", this.user.user_token,this.data)
+        this.service = e.target.dataset.service
+        let res = await f("servicerecord", "post", this.user.user_token, this.data)
         console.log(res)
         e.target.innerHTML = "Записано"
         e.target.classList.add("disabled")
@@ -65,15 +80,39 @@ export default class Home extends HTMLElement {
 
     async restore(e) {
         let id = e.target.dataset.id;
-        let res = await f(`service/${id}`,"delete", this.user.user_token,null);
+        let res = await f(`service/${id}`, "delete", this.user.user_token, null);
         console.log(res)
         let el = document.getElementById(id);
-
         el.classList.add("disabled-block");
     }
 
-    async put(e) {
+    put(e) {
+        let id = e.target.dataset.id;
+        let el = this.registrations.find(reg=>reg.id == id)
 
+        let div = document.createElement("div");
+        div.classList = "my-div";
+        div.innerHTML = getTemplateRegistration(el);
+        this.append(div);
+        this.attachModel();
+    }
+    async change(e) {
+        console.log(this.data)
         let id = e.target.dataset.id;
+        let res = await f(`service/${id}`, "put", this.user.user_token, this.data);
+
+        console.log(res);
+
+        if (res.error) {
+            this.querySelector('.message').innerHTML = 'Данные введены некорректно';
+            this.querySelector('.message').innerHTML+=`<style>.message {background:crimson}</style>`
+            return;
+        }
+
+        let div = document.getElementsByClassName("my-div")[0];
+
+        div.classList.add("none")
+
     }
+
 }

js/components/Templates.js

@@ -16,7 +16,6 @@ export function getTemplateOut(user) {
         `
 }
 
-
 export function getTemplateUsers(registration) {
     return `
            <div class="basic-card basic-card-aqua" id="${registration.id}">
@@ -35,4 +34,38 @@ export function getTemplateUsers(registration) {
                 </div>
                 </div>
             `;
+}
+
+export function getTemplateRegistration(reg) {
+    return `
+        <h3>Редактировать ${reg.name}</h3>
+        <div class="message"></div>
+        <label>Name: <input type="text" data-model="name"></label>
+        <label>Price: <input type="text" data-model="price"></label>
+        <br>
+        <br>
+        <br>
+        <br>
+        <label>Description: <input type="text" data-model="description"></label>
+        <label>Position: <input type="text" data-model="position"></label>
+         <a data-click="change" data-id="${reg.id}" class="button">Сохранить изменения</a>
+        `
+}
+
+export function getTemplateCab(registration) {
+    return `
+           <div class="basic-card basic-card-aqua" id="${registration.id}">
+                <div class="card-content">
+                    <span class="card-title"><h3>ID:${registration.id}</h3></span>
+                    <p class="card-text">
+                       Url: ${registration.url}, Service: ${registration.name}, Description: ${registration.description}
+                       City: ${registration.position}
+                       
+                       <div class="buttons">      
+                       <a class="button" data-click="restore" data-id="${registration.id}" style="background: firebrick; color: white">Удалить услугу</a>     
+                        </div>
+                    </p>
+                </div>
+                </div>
+            `;
 }

js/components/User.js

@@ -0,0 +1,81 @@
+import {getTemplateCab} from "./Templates.js";
+import {getTemplateRegistration} from "./Templates.js";
+import {bindEvents, dEvent} from "../libs/helper.js";
+import {f} from "../libs/helper.js"
+
+export default class User extends HTMLElement {
+    constructor() {
+        super();
+        this.user = null;
+        this.registrations = null;
+        this.bind();
+        this.rendered = false;
+        this.data = {
+            name:"",
+            price:"",
+            description:"",
+            position:"",
+        }
+        this.service = null;
+
+    }
+
+    connectedCallback() {
+        if (!this.rendered) {
+            this.render();
+        }
+    }
+
+    bind() {
+        bindEvents("UserLogin", "user-login", (e) => {
+            this.user = e.detail;
+            this.render();
+        })
+        bindEvents("UserOut", "user-logout", (e) => {
+            this.user = null;
+        })
+    }
+
+    async render() {
+        if (!this.user) return;
+        this.rendered = true;
+        let res = await f("servicerecord", "get", this.user.user_token);
+        console.log(res)
+
+        this.registrations = res.results;
+        for (let reg of this.registrations) {
+            this.innerHTML += (getTemplateCab(reg))
+        }
+        this.attachModel();
+    }
+
+    attachModel() {
+
+        this.querySelectorAll("input")
+            .forEach(el=>el.addEventListener("input",e =>this.inputText(e)))
+
+        this.querySelectorAll('.button')
+            .forEach(el => el.addEventListener('click', e => this.clickButton(e)))
+    }
+
+    inputText(e) {
+        if (this.data[e.target.dataset.model] !== undefined) {
+            this.data[e.target.dataset.model] = e.target.value;
+        }
+    }
+
+    clickButton(e) {
+        if (this[e.target.dataset.click]) {
+            this[e.target.dataset.click](e);
+        }
+    }
+
+    async restore(e) {
+        let id = e.target.dataset.id;
+        let res = await f(`servicerecord/${id}`, "delete", this.user.user_token, null);
+        console.log(res)
+        let el = document.getElementById(id);
+        el.classList.add("disabled-block");
+    }
+
+}

js/libs/router.js

@@ -39,7 +39,6 @@ class RouterView extends HTMLElement {
             this.append(e.detail);
         })
     }
-
 }
 
 class RouterLink extends HTMLElement {

js/main.js

@@ -3,6 +3,7 @@ import {f} from "./libs/helper.js";
 import Router from "./libs/router.js";
 import LoginForm from "./components/LoginForm.js";
 import Home from "./components/Home.js";
+import User from "./components/User.js";
 
 class App {
 
@@ -11,6 +12,7 @@ class App {
 const routes = [
     {path:"/login", component: LoginForm, name: "Войти"},
     {path:"/home", component: Home, name: "Домашняя страница"},
+    {path:"/user", component: User, name: "Личный кабинет"},
 ]
 
 const router = new Router(