From 37441d2dd430858fa5fa7d4ed7b7f160af5bc9b0 Mon Sep 17 00:00:00 2001
From: CakesTwix <oleg.kiryazov@gmail.com>
Date: Sat, 1 Feb 2025 16:59:26 +0200
Subject: [PATCH] Implement account/bittorrent settings

---
 frontend/src/pages/settings/account.vue    |  69 ++++++++------
 frontend/src/pages/settings/bittorrent.vue | 106 ++++++++++++++++++---
 2 files changed, 134 insertions(+), 41 deletions(-)

diff --git a/frontend/src/pages/settings/account.vue b/frontend/src/pages/settings/account.vue
index bb79fe8..50512f3 100644
--- a/frontend/src/pages/settings/account.vue
+++ b/frontend/src/pages/settings/account.vue
@@ -18,7 +18,7 @@
     </article>
 
     <article class="primary-text">
-        <a class="row wave" @click="openDialog('login')">
+        <a class="row wave" @click="openDialog('username')">
             <i>person</i>
             <div class="max">
                 <h6 class="small">Логін</h6>
@@ -34,7 +34,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave" @click="openDialog('hub')">
+        <a class="row wave" @click="openDialog('client')">
             <i>hub</i>
             <div class="max">
                 <h6 class="small">Торрент клієнт</h6>
@@ -42,7 +42,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave" @click="openDialog('directory')">
+        <a class="row wave" @click="openDialog('default_download_dir')">
             <i>description</i>
             <div class="max">
                 <h6 class="small">Директорія завантажень</h6>
@@ -50,7 +50,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave" @click="openDialog('delay')">
+        <a class="row wave" @click="openDialog('wait_time')">
             <i>hourglass_top</i>
             <div class="max">
                 <h6 class="small">Затримка</h6>
@@ -67,8 +67,8 @@
         <form @submit.prevent="editTitle" class="grid">
             <div class="field label prefix border s12">
                 <i>folder</i>
-                <input type="text" v-model="dialogValue" placeholder="Назва директорії" required />
-                <label>Назва директорії</label>
+                <input type="text" v-model="dialogValue" required />
+                <label>{{ fieldLabels[currentField] }}</label>
             </div>
             <nav class="right-align small-padding s12">
                 <button class="border small-round" @click="closeDialog">
@@ -85,16 +85,32 @@
 
 <script>
 import axios from 'axios';
+
 export default {
     data() {
         return {
             isDialogOpen: false,
             dialogValue: '',
-            currentField: ''
+            currentField: '',
+            config: {},
+            fieldLabels: {
+                username: 'Логін',
+                password: 'Пароль',
+                client: 'Торрент Клієнт',
+                default_download_dir: 'Директорія завантажень',
+                client_wait_time: 'Затримка'
+            },
         };
     },
-    created() {
 
+    async created() {
+        try {
+            // Fetch the current config from the server
+            const response = await axios.get('/api/config');
+            this.config = response.data;
+        } catch (error) {
+            console.error('Error fetching config:', error);
+        }
     },
 
     methods: {
@@ -103,7 +119,7 @@ export default {
         },
         openDialog(field) {
             this.currentField = field;
-            this.dialogValue = field; // очищаем значение при открытии диалога
+            this.dialogValue = this.config.Toloka?.[field] || ''; // Prefill value if available
             this.isDialogOpen = true;
         },
         closeDialog() {
@@ -111,37 +127,30 @@ export default {
         },
         async editTitle() {
             try {
-                // Здесь можно установить URL вашего API
-                const response = await fetch(`https://your-api-endpoint/${this.currentField}`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        value: this.dialogValue
-                    })
-                });
+                // Construct URL for the request
+                const url = `/api/config/Toloka/${this.currentField}/${encodeURIComponent(this.dialogValue)}`;
 
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
+                // Send the request
+                const response = await axios.get(url);
+
+                if (response.status !== 200) {
+                    throw new Error('Server response error');
                 }
 
-                const data = await response.json();
-                // Обработка ответа сервера (если необходимо)
-                console.log(data);
+                // Update local config
+                this.config.Toloka[this.currentField] = this.dialogValue;
 
+                // Handle successful response
+                console.log('Successfully updated:', response.data);
                 this.closeDialog();
             } catch (error) {
-                console.error('Ошибка:', error);
+                console.error('Error:', error);
             }
-        },
-        goBack() {
-            this.$router.back();
         }
     }
-}
+};
 </script>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/pages/settings/bittorrent.vue b/frontend/src/pages/settings/bittorrent.vue
index daf4bb1..f24107b 100644
--- a/frontend/src/pages/settings/bittorrent.vue
+++ b/frontend/src/pages/settings/bittorrent.vue
@@ -19,7 +19,7 @@
 
 
     <article class="primary-text">
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('username')">
             <i>person</i>
             <div class="max">
                 <h6 class="small">Логін</h6>
@@ -27,7 +27,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('password')">
             <i>password</i>
             <div class="max">
                 <h6 class="small">Пароль</h6>
@@ -35,7 +35,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('port')">
             <i>lan</i>
             <div class="max">
                 <h6 class="small">Порт</h6>
@@ -43,7 +43,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('host')">
             <i>link</i>
             <div class="max">
                 <h6 class="small">IP/Домен</h6>
@@ -51,7 +51,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('protocol')">
             <i>http</i>
             <div class="max">
                 <h6 class="small">Протокол</h6>
@@ -59,7 +59,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('rpc')">
             <i>api</i>
             <div class="max">
                 <h6 class="small">RPC</h6>
@@ -67,7 +67,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('category')">
             <i>category</i>
             <div class="max">
                 <h6 class="small">Категорія</h6>
@@ -75,7 +75,7 @@
             </div>
         </a>
         <hr>
-        <a class="row wave">
+        <a class="row wave" @click="openDialog('tag')">
             <i>tag</i>
             <div class="max">
                 <h6 class="small">Тег</h6>
@@ -87,24 +87,108 @@
         <hr>
     </article>
 
+    <dialog :class="{ 'active': isDialogOpen }">
+        <h5 class="primary-text">Edit</h5>
+        <form @submit.prevent="editField" class="grid">
+            <div class="field label prefix border s12">
+                <i>folder</i>
+                <input type="text" v-model="dialogValue" :placeholder="fieldPlaceholders[currentField]" required />
+                <label>{{ fieldLabels[currentField] }}</label>
+            </div>
+            <nav class="right-align small-padding s12">
+                <button class="border small-round" @click="closeDialog">
+                    <i>cancel</i>
+                </button>
+                <button class="border small-round" type="submit">
+                    <i>edit</i>
+                </button>
+            </nav>
+        </form>
+    </dialog>
 
 </template>
 
 <script>
 import axios from 'axios';
+
 export default {
     data() {
         return {
+            isDialogOpen: false,
+            dialogValue: '',
+            currentField: '',
+            config: {},
+            fieldLabels: {
+                username: 'Username',
+                password: 'Password',
+                port: 'Port',
+                host: 'IP/Domain',
+                protocol: 'Protocol',
+                rpc: 'RPC',
+                category: 'Category',
+                tag: 'Tag'
+            },
+            fieldPlaceholders: {
+                username: 'Enter your username',
+                password: 'Enter your password',
+                port: 'Enter port number',
+                host: 'Enter IP or domain',
+                protocol: 'Enter protocol (e.g., HTTP)',
+                rpc: 'Enter RPC path (default: /transmission/rpc)',
+                category: 'Enter category name',
+                tag: 'Enter torrent tag'
+            }
         };
     },
-    created() {
 
+    async created() {
+        try {
+            // Fetch the current configuration from the server
+            const response = await axios.get('/api/config');
+            this.config = response.data;
+        } catch (error) {
+            console.error('Error fetching config:', error);
+        }
     },
 
     methods: {
         goBack() {
             this.$router.back();
+        },
+        openDialog(field) {
+            this.currentField = field;
+            this.dialogValue = this.config.transmission?.[field] || ''; // Pre-fill value if available
+            this.isDialogOpen = true;
+        },
+        closeDialog() {
+            this.isDialogOpen = false;
+        },
+        async editField() {
+            try {
+                // Construct URL for the API request
+                const url = `/api/config/transmission/${this.currentField}/${encodeURIComponent(this.dialogValue)}`;
+
+                // Send the update request
+                const response = await axios.post(url);
+
+                if (response.status !== 200) {
+                    throw new Error('Server response error');
+                }
+
+                // Update local configuration
+                this.config.transmission[this.currentField] = this.dialogValue;
+
+                // Log success message
+                console.log('Successfully updated:', response.data);
+                this.closeDialog();
+            } catch (error) {
+                console.error('Error:', error);
+            }
         }
     }
-}
-</script>
\ No newline at end of file
+};
+</script>
+
+<style scoped>
+
+</style>