init

app/frontend/src/components/torrent/App.vue

@@ -0,0 +1,175 @@
+<template>
+  <v-app>
+    <v-navigation-drawer :permanent="true">
+      <v-list>
+        <v-list-item>
+          <v-list-item-action class="justify-center">
+            <v-row>
+              <v-col class="text-center">
+                <UploadForm @torrent_added="torrentAdded"/>
+              </v-col>
+            </v-row>
+          </v-list-item-action>
+        </v-list-item>
+        <v-divider/>
+      </v-list>
+    </v-navigation-drawer>
+    <v-navigation-drawer v-model="right_drawer" location="right" temporary>
+      <Friend v-if="right_drawer" :active_user="display_user.id" @userSelected="userSelectedUpdated"/>
+    </v-navigation-drawer>
+    <v-app-bar>
+      <v-app-bar-title><v-btn variant="plain" href="/">Oxpanel</v-btn></v-app-bar-title>
+      <v-spacer/>
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props">Manage</v-btn>
+        </template>
+        <v-list>
+          <v-list-item href="/password_change/" title="Change password"/>
+          <v-list-item>
+            <v-list-item-action>
+              <form action="/logout/" method="post">
+                <input type="hidden" name="csrfmiddlewaretoken" :value="Cookies.get('csrftoken')">
+                <button>Disconnect</button>
+              </form>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-btn
+        @click="right_drawer = !right_drawer"
+        prepend-icon="mdi-account-group"
+        :color="display_user.id === user.id ? 'green':'orange'"
+        :text="display_user.username"
+      />
+    </v-app-bar>
+    <v-main>
+      <TorrentList :loading="loading_torrents" :torrents="torrents" :delete_disabled="user.id !== display_user.id"/>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+import Cookies from "js-cookie";
+import TorrentList from "@/components/torrent/TorrentList.vue";
+import UploadForm from "@/components/torrent/UploadForm.vue";
+import Friend from "@/components/auth/Friend.vue";
+</script>
+
+<script>
+export default {
+  data(){
+    return {
+      right_drawer: false,
+      user: current_user,
+      display_user: {
+        id: current_user.id,
+        username: "My torrents"
+      },
+      loading_torrents: false,
+      filters: {},
+      torrents: []
+    }
+  },
+  async mounted(){
+    this.$ws.connect("/ws/torrent_event/");
+    this.$ws.on("connect", () => {
+      this.$ws.send(JSON.stringify({"context": "change_follow_user", "user_id": this.display_user.id}));
+    });
+    this.$ws.on("json_message", (message) => {
+      switch(message.context){
+        case "transmission_data_updated":
+          this.updateTransmissionData(message.data);
+          break;
+        case "add_torrent":
+          this.fetchTorrent(message.torrent_id);
+          break;
+        case "remove_torrent":
+          this.removeTorrent(message.torrent_id);
+          break;
+        case "update_torrent":
+          this.updateTorrent(message.torrent_id, message.updated_fields)
+      }
+    })
+    await this.fetchTorrents();
+  },
+  methods: {
+    torrentAdded(torrent){
+      if(!(torrent.id in this.torrentsAsObject)){
+        this.torrents.unshift(torrent);
+      }
+    },
+    changeDisplayUser(user){
+      if(user){
+        this.display_user = {
+          "username": this.user.id === user.id ? "My torrents": `${user.username} torrents`,
+          "id": user.id
+        }
+      }else{
+
+      }
+      this.display_user = {
+        "username": this.user.id === user.id ? "My torrents": `${user.username} torrents`,
+        "id": user.id
+      }
+      this.$ws.send(JSON.stringify({"context": "change_follow_user", "user_id": this.display_user.id}));
+    },
+    updateTransmissionData(data){
+      if(data.hashString in this.torrentsAsObject){
+        this.torrentsAsObject[data.hashString].transmission_data = data
+      }
+    },
+    async fetchTorrents(){
+      this.loading_torrents = true;
+      let filters = {...this.filters, user: this.display_user.id},
+        url = `/api/torrents/?${new URLSearchParams(filters)}`;
+
+      let response = await fetch(url);
+      this.torrents = await response.json();
+      this.loading_torrents = false;
+    },
+    async fetchTorrent(torrent_id){
+      if(torrent_id in this.torrentsAsObject) return;
+      let url = `/api/torrents/${torrent_id}/`;
+      let response = await fetch(url);
+      if(response.ok){
+        let torrent = await response.json();
+        if(!(torrent.id in this.torrentsAsObject)) this.torrents.unshift(torrent);
+      }else{
+        setTimeout(() => this.fetchTorrent(torrent_id), 1000);
+      }
+    },
+    async updateTorrent(torrent_id, updated_fields){
+      if(torrent_id in this.torrentsAsObject){
+        for(let key in updated_fields){
+          this.torrentsAsObject[torrent_id][key] = updated_fields[key];
+        }
+      }
+    },
+    async removeTorrent(torrent_id){
+      if(!(torrent_id in this.torrentsAsObject)) return;
+      for(let i = 0; i < this.torrents.length; i++){
+        if(this.torrents[i].id === torrent_id){
+          this.torrents.splice(i, 1);
+          break;
+        }
+      }
+    },
+    async userSelectedUpdated(user){
+      await this.changeDisplayUser(user ? user: this.user);
+      await this.fetchTorrents();
+
+      this.right_drawer = false
+    },
+  },
+  computed: {
+    torrentsAsObject(){
+      let r = {};
+      this.torrents.forEach(torrent => {
+        r[torrent.id] = torrent;
+      });
+      return r;
+    }
+  }
+}
+</script>