server/client workflow

index.html

@@ -6,12 +6,12 @@
   <title>File Whizz</title>
   <link rel="stylesheet" href="style.css" />
   <link rel="stylesheet" href="material-colors.css" />
-  <script src="https://unpkg.com/lucide@0"></script>
-  <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/peerjs@1.5.4/dist/peerjs.min.js"></script>
   <script type="importmap">
       {
         "imports": {
-          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+          "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js",
+          "lucide": "https://cdn.jsdelivr.net/npm/lucide@0/dist/esm/lucide.js"
         }
       }
     </script>
@@ -30,27 +30,42 @@
     <br />
     <div>
       <label>Local ID</label><br>
-      <input readonly :value="localId" />
+      <input :value="localId" disabled />
       <br>
       <br>
-      <template v-if="canConnect">
-        <label>Remote ID</label><br>
-        <input v-model="remoteId" @change="onRemoteIdChange" :readonly="isConnected">
+      <template v-if="serverIsReady">
+        <input disabled :value="server.url" />
+        <input type="submit" @click.prevent="onCopy" value="Share / Copy" />
         <br>
         <br>
       </template>
-      <template v-if="canConnect && !downloading && !readyToDownload">
-        <input type="file" @change="onFileChange" :disabled="data" />
+      <template v-if="remoteId">
+        <label>Remote ID</label><br>
+        <input v-model="remoteId" disabled>
+        <br>
+        <br>
+      </template>
+      <template v-if="isServer">
+        <input type="file" @change="onFileChange" :disabled="server.data" />
         <br>
       </template>
       <template v-if="readyToDownload">
-        <input type="submit" @click.prevent="clientStartTransfer" value="Download" />
+        <input type="submit" @click.prevent="onDownload" value="Download" />
+        <br>
+        <br>
+      </template>
+      <template v-if="downloading">
+        <progress :value="downloadProgress" :max="downloadTotal"></progress>
+        <br>
+        <br>
+      </template>
+      <template v-if="error">
+        <span class="red">{{error}}</span>
         <br>
         <br>
       </template>
-      <progress v-if="downloading" :value="downloadProgress" :max="downloadTotal"></progress>
     </div>
-    <br />
+    <br>
     <small class="footer">
       <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>
       -