add export function

rss-translator · Dec 20, 2023 · 7fd2e6f · 7fd2e6f
1 parent 26959c7
commit 7fd2e6f
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 0 deletions.
diff --git a/export.html b/export.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RSS Translator</title>
+    <script type="module" src="js/export.js"></script>
+    <script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="171428" async="async" type="text/javascript"></script>
+    <link rel="stylesheet" href="css/picnic.min.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="icon" type="image/png" href="favicon.png">
+  </head>
+
+  <body>
+    <section class="header">
+      <h1 class="brand">RSS Translator</h1>
+      <span class="label">alpha</span>      
+    </section>
+
+    <br />
+
+    <section class="flex center" >
+      <form>
+        <p>Check original RSS feed url</p>
+        <textarea
+          id="t_feed_url"
+          rows="10"
+          cols="50"
+          placeholder="One url per line:
+https://rsstranslator.com/rss/3mYQP%ZXehS^b3$jxrt7
+https://rsstranslator.com/rss/c3eS2HcmYT&&4!*UTy$#"
+        ></textarea><br>
+        <button id="export" class="stack">
+          Check
+        </button>
+      </form>
+    </section>
+
+    <div id="loading" style="display: none;"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_I8Q1{animation:spinner_qhi1 .75s linear infinite}.spinner_vrS7{animation-delay:-.375s}@keyframes spinner_qhi1{0%,100%{r:1.5px}50%{r:3px}}</style><circle class="spinner_I8Q1" cx="4" cy="12" r="1.5"/><circle class="spinner_I8Q1 spinner_vrS7" cx="12" cy="12" r="3"/><circle class="spinner_I8Q1" cx="20" cy="12" r="1.5"/></svg></div>
+
+    <section class="flex center">
+      <form>
+        <div id="result" style="display: none;" >
+          <textarea id="result_text" readonly="true" id="t_feed_url" class="stack" value="Ops! Please try again!" rows="10" cols="50"></textarea>
+          <button id="copy" class="success stack">Copy</button>
+        </div>
+        <span id="error_msg"></span>
+      </form>      
+    </section>
+
+    <section class="footer">
+      <small>
+        By <a href="https://notes.versun.me" target="_blank">Versun</a>
+        ·
+        <a href="https://notes.versun.me/Sponsors" target="_blank">Sponsor</a>
+        ·
+        <a href="https://github.com/versun" target="_blank">Github</a>
+        ·
+        <a href="https://twitter.com/VersunPan" target="_blank">Twitter</a>
+        ·
+        <a href="https://t.me/rsstranslator" target="_blank">Telegram</a>
+        ·
+        <a href="https://rsstranslator.canny.io" target="_blank">Feedback</a>
+        ·
+        <a href="https://status.rsstranslator.com" target="_blank">Status</a>
+      </small>
+    </section>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -179,6 +179,8 @@ <h1 class="brand">RSS Translator</h1>
         <a href="https://rsstranslator.canny.io" target="_blank">Feedback</a>
         ·
         <a href="https://status.rsstranslator.com" target="_blank">Status</a>
+        ·
+        <a href="/export" target="_blank">Export</a>
       </small>
     </section>
   </body>

diff --git a/js/export.js b/js/export.js
@@ -0,0 +1,78 @@
+import { Client, Functions } from 'appwrite';
+
+const Appwrite_Endpoint = process.env.Appwrite_Endpoint;
+const Appwrite_Project = process.env.Appwrite_Project;
+
+const client = new Client()
+  .setEndpoint(Appwrite_Endpoint)
+  .setProject(Appwrite_Project);
+const functions = new Functions(client);
+
+function copy(event) {
+  event.preventDefault();
+  const button = document.querySelector('#copy');
+  const text = result_text.value;
+
+  navigator.clipboard.writeText(text)
+    .then(() => {
+      console.log("Text copied to clipboard");
+      button.innerHTML += ' &#10004;';
+
+      setTimeout(() => {
+        button.innerHTML = "Copy";
+      }, 3000);
+    })
+    .catch((error) => console.error("Could not copy text: ", error));
+}
+
+function o_url_check(event) {
+  event.preventDefault();
+  const textarea = document.querySelector('#t_feed_url');
+  const result = document.querySelector('#result');
+  const result_text = document.querySelector('#result_text');
+  const error_msg = document.querySelector('#error_msg');
+  const loading = document.querySelector('#loading');
+  let responseBody;
+  let urls = textarea.value.split('\n')
+    .map(url => url.trim())
+    .filter(url => url.length);
+
+  try {
+    if (!urls.length) return;
+
+    error_msg.textContent = "";
+    result.style.display = 'none';
+    loading.style.display = 'block';
+
+    let payload = {
+      urls: urls
+    };
+    console.log(payload);
+
+    functions.createExecution('export', JSON.stringify(payload))
+      .then(response => {
+        console.log("Response:", response);
+        responseBody = JSON.parse(JSON.parse(response.responseBody));
+        console.log(responseBody);
+
+        result.style.display = 'block';
+        result_text.value = responseBody.join('\n') || 'Nothing to export. Please verify the URL or try again';
+      })
+      .catch(e => {
+        throw e;
+      })
+      .finally(() => {
+        loading.style.display = 'none';
+      });
+
+  } catch (error) {
+    error_msg.innerHTML = error.message.replace(/\n/g, '<br>');
+    console.error(error);
+  }
+}
+
+//<button id="copy" class="success stack">Copy</button>
+document.querySelector('#copy').addEventListener("click", copy);
+
+document.querySelector('#export').addEventListener("click", o_url_check);
+