From 91e36eb2226cb5a378cbd405dd1d9a288c35350a Mon Sep 17 00:00:00 2001
From: smilerz <smilerz@gmail.com>
Date: Tue, 9 Mar 2021 15:34:47 -0600
Subject: [PATCH] updated URL import page with tab interface

---
 cookbook/templates/url_import.html | 118 +++++++++--------------------
 1 file changed, 34 insertions(+), 84 deletions(-)

diff --git a/cookbook/templates/url_import.html b/cookbook/templates/url_import.html
index c6f90af8e..a6719a19f 100644
--- a/cookbook/templates/url_import.html
+++ b/cookbook/templates/url_import.html
@@ -8,7 +8,6 @@
 
     {% include 'include/vue_base.html' %}
     <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
-    <script src="{% static 'js/vue-jstree.js' %}"></script>
     <script src="{% static 'js/vue-multiselect.min.js' %}"></script>
     <link rel="stylesheet" href="{% static 'css/vue-multiselect.min.css' %}">
     <style>
@@ -24,77 +23,21 @@
     <div id="app">
         <h2> {% trans 'Import' %} </h2>
         <nav class="nav nav-pills flex-sm-row" style="margin-bottom:10px">
-            <a class="nav-link active" href="#nav-url" data-toggle="tab" role="tab" aria-controls="nav-url" aria-selected="true" @click="mode='url'">URL</a>
-            <a class="nav-link" href="#nav-app" data-toggle="tab" role="tab" aria-controls="nav-app" @click="mode='app'">App</a>
-            <a class="nav-link" href="#nav-source" data-toggle="tab" role="tab" aria-controls="nav-source" @click="mode='source'">Source</a>
-            <a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" aria-controls="nav-text" @click="mode='text'">Text</a>
-            <a class="nav-link disabled" href="#nav-file" data-toggle="tab" role="tab" aria-controls="nav-file" @click="mode='file'">File</a>
+            <a class="nav-link active" href="#nav-url" data-toggle="tab" role="tab" aria-controls="nav-url" aria-selected="true">URL</a>
+            <a class="nav-link" href="#nav-ldjson" data-toggle="tab" role="tab" aria-controls="nav-ldjson">ld+json</a>
+            <a class="nav-link disabled" href="#nav-json" data-toggle="tab" role="tab" aria-controls="nav-json">json</a>
+            <a class="nav-link disabled" href="#nav-html" data-toggle="tab" role="tab" aria-controls="nav-html">HTML</a>
+            <a class="nav-link disabled" href="#nav-text" data-toggle="tab" role="tab" aria-controls="nav-text">text</a>
+            <a class="nav-link disabled" href="#nav-pdf" data-toggle="tab" role="tab" aria-controls="nav-pdf">PDF</a>
         </nav>
 
-        
         <div class="tab-content" id="nav-tabContent">
-            <!-- Import URL -->
-            <div class="tab-pane fade show active" id="nav-url" role="tabpanel">
-                <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-outline-info btn-sm active" @click="automatic=true">
-                    <input type="radio"  autocomplete="off" checked> Automatic
-                    </label>
-
-                    <label class="btn btn-outline-info btn-sm" @click="automatic=false">
-                    <input type="radio" autocomplete="off"> Manual
-                    </label>
-                </div>
-                <div class="input-group my-2">
-                <input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
-                <div class="input-group-append">
-                    <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
-                            id="id_btn_search"><i class="fas fa-search"></i>
-                    </button>
-                </div>
-                </div>
-            </div>
-
-            <!-- Import from Recipe Application -->
-            <div class=" tab-pane fade show" id="nav-app" role="tabpanel">
-                <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-outline-info btn-sm active" @click="recipe_app='DEFAULT'">
-                    <input type="radio" autocomplete="off" checked> Tandoor
-                    </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='PAPRIKA'">
-                    <input type="radio" autocomplete="off"> Paprika
-                    </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='NEXTCLOUD'">
-                    <input type="radio" autocomplete="off"> Nextcloud Cookbook
-                    </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='MEALIE'">
-                    <input type="radio" autocomplete="off"> Mealie
-                    </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='CHOWDOWN'">
-                    <input type="radio" autocomplete="off"> Chowdown
-                    </label>
-                    <label class="btn btn-outline-info btn-sm" @click="recipe_app='SAFRON'">
-                    <input type="radio" autocomplete="off"> Safron
-                    </label>
-                </div>
-                <b-form-file
-                    class="my-2"
-                    accept=".zip"
-                    multiple
-                    v-model="recipe_files"
-                    placeholder="{% trans 'Select recipe files to import or drop them here...' %}"
-                    drop-placeholder="Drop recipe files here...">
-                </b-form-file>
-                <button @click="importAppRecipe()" class="btn btn-primary shadow-none" type="button"
-                            id="id_btn_app"><i class="fas fa-file-archive"></i> {% trans 'Import' %} 
-                </button>
-            </div>
-        </div>
-        <div class="row">
+            <div class="row tab-pane fade show active" id="nav-url" role="tabpanel">
                 <div class="col-md-12">
                     <div class="input-group mb-3">
-                        <input class="form-control" v-model="json_data" placeholder="{% trans 'Enter json directly' %}">
+                        <input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
                         <div class="input-group-append">
-                            <button @click="loadRecipeJson()" class="btn btn-primary shadow-none" type="button"
+                            <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
                                     id="id_btn_search"><i class="fas fa-search"></i>
                             </button>
                         </div>
@@ -102,25 +45,32 @@
                 </div>
             </div>
 
-            <!-- Import JSON or HTML -->
-            <div class=" tab-pane fade show" id="nav-source" role="tabpanel">
-                <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-outline-info btn-sm active" @click="automatic=true">
-                    <input type="radio" autocomplete="off" checked> Automatic
-                    </label>
-
-                    <label class="btn btn-outline-info btn-sm" @click="automatic=false">
-                    <input type="radio" autocomplete="off"> Manual
-                    </label>
+            <div class="row tab-pane fade show" id="nav-ldjson" role="tabpanel">
+                <div class="col-md-12">
+                    <div class="input-group input-group-lg">
+                        <textarea class="form-control input-group-append" v-model="json_data" rows=10; placeholder="{% trans 'Paste ld+json here' %}">
+                        </textarea>
+                    </div>
+                    <br>
+                    <button @click="loadRecipeJson()" class="btn btn-primary shadow-none" type="button"
+                                id="id_btn_json"><i class="fas fa-code"></i> {% trans 'Import' %} 
+                    </button>
                 </div>
-                <div class="input-group my-2">
-                    <textarea class="form-control input-group-append" v-model="source_data" rows=10 placeholder="{% trans 'Paste json or html source here to load recipe.' %}" style="font-size: 12px">
-                    </textarea>
-                </div>
-                <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
-                            id="id_btn_app"><i class="fas fa-code"></i> {% trans 'Import' %} 
-                </button>
             </div>
+
+            <div class="row tab-pane fade show" id="nav-html" role="tabpanel">
+                <div class="col-md-12">
+                    <div class="input-group input-group-lg">
+                        <textarea class="form-control input-group-append" v-model="html_data" rows=10; placeholder="{% trans 'Paste html source here' %}">
+                        </textarea>
+                    </div>
+                    <br>
+                    <button @click="loadRecipeJson()" class="btn btn-primary shadow-none" type="button"
+                                id="id_btn_html"><i class="fas fa-code"></i> {% trans 'Import' %} 
+                    </button>
+                </div>
+            </div>
+
         </div>
         
         <br/>
@@ -622,7 +572,7 @@
             el: '#app',
             data: {
                 remote_url: '',
-                source_data: undefined,
+                json_data: undefined,
                 keywords: [],
                 keywords_loading: false,
                 units: [],