From 515370eac7ff5f018cae5ec790ccc8e90c025718 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 21 Aug 2021 10:56:44 +0200
Subject: [PATCH] More basics for the shorturl creation module

---
 src/lib/CreateUrl.svelte | 201 +++++++++++++++++++++------------------
 1 file changed, 107 insertions(+), 94 deletions(-)

diff --git a/src/lib/CreateUrl.svelte b/src/lib/CreateUrl.svelte
index 5053e19..ae4dc91 100644
--- a/src/lib/CreateUrl.svelte
+++ b/src/lib/CreateUrl.svelte
@@ -1,98 +1,111 @@
 <script>
-	$: targetUrl = '';
-	$: customShortcode = '';
-	$: shortcode = '';
-    $: error = '';
-
-    function createUrl() {
-        
-    }
-
-    function reset() {
-        error = '';
-        shortcode = '';
-        customShortcode = '';
-        targetUrl = '';
-    }
-</script>
-
-<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
-{#if error != ""}
-<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
-    <div class="flex">
-        <div class="flex-shrink-0">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20"
-                fill="currentColor">
-                <path fill-rule="evenodd"
-                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                    clip-rule="evenodd" />
-            </svg>
-        </div>
-        <div class="ml-3">
-            <p class="text-sm font-medium text-red-800" id="error_text">
-                {error}
-            </p>
-        </div>
-        <div class="ml-auto pl-3">
-            <div class="-mx-1.5 -my-1.5">
-                <button
-                    on:click={()=>{
-                        error='';
-                    }}
-                    class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
-                    <span class="sr-only">Dismiss</span>
-                    <svg class="h-5 w-5" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd"
-                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                            clip-rule="evenodd"></path>
-                    </svg>
-                </button>
+    import Apiclient from "./Apiclient";
+    
+    
+        $: targetUrl = '';
+        $: customShortcode = '';
+        $: shortcode = '';
+        $: error = '';
+    
+        function createUrl() {
+            console.log("here")
+            Apiclient.createUrl(targetUrl, shortcode).then((res)=>{
+                console.log(res)
+                if(res.status != 200){
+                    error = res.data;
+                }
+                else{
+                    shortcode = res.data.shortcode;
+                }
+            });
+        }
+    
+        function reset() {
+            error = '';
+            shortcode = '';
+            customShortcode = '';
+            targetUrl = '';
+        }
+    </script>
+    
+    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-100 pb-3">Create new url</h2>
+    {#if error != ""}
+    <div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
+        <div class="flex">
+            <div class="flex-shrink-0">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20"
+                    fill="currentColor">
+                    <path fill-rule="evenodd"
+                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                        clip-rule="evenodd" />
+                </svg>
+            </div>
+            <div class="ml-3">
+                <p class="text-sm font-medium text-red-800" id="error_text">
+                    {error}
+                </p>
+            </div>
+            <div class="ml-auto pl-3">
+                <div class="-mx-1.5 -my-1.5">
+                    <button
+                        on:click={()=>{
+                            error='';
+                        }}
+                        class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
+                        <span class="sr-only">Dismiss</span>
+                        <svg class="h-5 w-5" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd"
+                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-</div>
-{/if}
-{#if shortcode == ''}
-	<div>
-		<div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
-			<input
-				type="url"
-				required
-				class="flex-1 min-w-0 block border rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
-				placeholder="https://target.url"
-			/>
-		</div>
-		<div class="mt-1 flex rounded-md shadow-sm mx-auto lg:w-1/3 w-full">
-			<span
-				class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 text-gray-500 sm:text-sm dark:border-gray-600"
-			>
-				https://kauf.es/
-			</span>
-			<input
-				type="text"
-				class="flex-1 min-w-0 block w-full px-3 py-2 border-t border-b border-r rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
-				placeholder="custom_code"
-			/>
-		</div>
-	</div>
-{:else}
-	TODO:
-{/if}
-<div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
-	{#if shortcode == ''}
-		<button
-        on:click={createUrl}
-			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
-		>
-			Create shorturl
-		</button>
-	{:else}
-		<button
-        on:click={reset}
-			class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
-		>
-			Add another url
-		</button>
-	{/if}
-</div>
+    {/if}
+    {#if shortcode == ''}
+        <div>
+            <div class="mx-auto lg:w-1/3 w-full mt-1 flex rounded-md shadow-sm">
+                <input
+                    type="url"
+                    required
+                    class="flex-1 min-w-0 block border rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
+                    placeholder="https://target.url"
+                />
+            </div>
+            <div class="mt-1 flex rounded-md shadow-sm mx-auto lg:w-1/3 w-full">
+                <span
+                    class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 text-gray-500 sm:text-sm dark:border-gray-600"
+                >
+                    https://kauf.es/
+                </span>
+                <input
+                    type="text"
+                    class="flex-1 min-w-0 block w-full px-3 py-2 border-t border-b border-r rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600"
+                    placeholder="custom_code"
+                />
+            </div>
+        </div>
+    {:else}
+        <!-- TODO: -->
+    {/if}
+    <div class="mt-3 mx-auto text-center lg:w-1/3 w-full">
+        {#if shortcode == ''}
+            <button
+            on:click={createUrl}
+                class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
+            >
+                Create shorturl
+            </button>
+        {:else}
+            <button
+            on:click={reset}
+                class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md dark:bg-gray-900 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700"
+            >
+                Add another url
+            </button>
+        {/if}
+    </div>
+    
\ No newline at end of file