@ -1,55 +1,112 @@
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Add Podcast - PodGrab< / title >
{{template "commoncss"}}
< style >
[v-cloak] { display: none }
[v-cloak] {
display: none;
}
< / style >
< / head >
< body >
< div class = "container" >
{{template "navbar" .}}
< br >
< br / >
< div id = "app" v-cloak >
< div class = "row" >
< h4 > Add using the direct link to rss feed< / h4 >
< form action = "/" method = "post" @ submit = "addPodcastManual" >
< div class = "nine columns" >
< input type = "url" v-model = "url" name = "url" id = "url" placeholder = "Enter Podcast RSS feed to add" class = "u-full-width" >
< input
type="url"
v-model="url"
name="url"
id="url"
placeholder="Enter Podcast RSS feed to add"
class="u-full-width"
/>
< / div >
< div class = "three columns" >
< input type = "submit" value = "Add Podcast" class = "u-full-width button-primary" >
< input
type="submit"
value="Add Podcast"
class="u-full-width button-primary"
/>
< / div >
< / form >
< / div >
< hr >
< hr / >
< div class = "row" >
< div >
< h4 > Import OPML file< / h4 >
< i
>< small
>Most of the major podcast manager apps (eg. Podcast Addict) have the option to export add your podcast subscriptions in the opml format. You can migrate all your podcast in one go by exportin that OPML file and importing it here.< /small
>< /i
>
< / div > < br >
< form enctype = "multipart/form-data" action = "/" @ submit = "uploadOpml" ref = "uploadForm" >
< div class = "nine columns" >
< input
type="file"
:name="uploadFieldName"
@change="selectFile"
ref="file"
accept="text/xml,.opml"
/>
< / div >
< div class = "three columns" >
< input
type="submit"
value="Upload"
class="u-full-width button-primary"
/>
< / div > < / form >
< / div >
< hr / >
< div class = "row" id = "searchContainer" >
< h4 > Search for your favorite podcast< / h4 >
< i > < small > Experimental: Uses iTunes API to show search results.< / small > < / i >
< br >
< i
>< small
>Experimental: Uses iTunes API to show search results.< /small
>< /i
>
< br / >
< form action = "/search" method = "post" @ submit = "search" >
< div class = "nine columns" >
< input type = "search" name = "search" id = "search" placeholder = "Search for your podcast" v-model = "query" class = "u-full-width" >
< input
type="search"
name="search"
id="search"
placeholder="Search for your podcast"
v-model="query"
class="u-full-width"
/>
< / div >
< div class = "three columns" >
< input type = "submit" value = "Search" class = "u-full-width button-primary" >
< input
type="submit"
value="Search"
class="u-full-width button-primary"
/>
< / div >
< / form >
< br >
< br / >
< progress v-if = "searching" class = "u-full-width" > < / progress >
< div class = "results" >
< div v-for = "item in results" :key = "item.url" >
< div class = "row" >
< div class = "columns two" >
< img class = "u-full-width" :src = "item.image" :alt = "item.title" >
< img
class="u-full-width"
:src="item.image"
:alt="item.title"
/>
< / div >
< div class = "columns nine" >
< h5 > ${item.title}< / h5 >
@ -57,12 +114,23 @@
< p > ${ item.description }< / p >
< / div >
< div class = "columns one" >
< button v-if = "!item.already_saved" v-on:click = "addPodcast(item)" class = "button button-primary" > + Add< / button >
< button v-if = "item.already_saved" class = "button" disabled = "disabled" > Already Added< / button >
< button
v-if="!item.already_saved"
v-on:click="addPodcast(item)"
class="button button-primary"
>
+ Add
< / button >
< button
v-if="item.already_saved"
class="button"
disabled="disabled"
>
Already Added
< / button >
< / div >
< / div >
< hr >
< hr / >
< / div >
< / div >
< / div >
@ -72,78 +140,116 @@
< script >
var app = new Vue({
delimiters: ['${', '}' ],
el: '#app' ,
delimiters: ["${", "}" ],
el: "#app" ,
data: {
results: [],
query:'' ,
query: "" ,
searching: false,
url:''
url: "",
selectedFiles: undefined,
},
methods: {
search:function(e){
selectFile: function () {
this.selectedFiles = this.$refs.file.files;
},
uploadOpml: function (e) {
e.preventDefault();
if(!this.query){
var currentFile = this.selectedFiles.item(0);
if (!currentFile) {
return;
}
var self=this;
self.searching = true;
axios.get("/search?q="+this.query)
let formData = new FormData();
formData.append("file", currentFile);
axios
.post("/opml", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(function (response) {
self.results= response.data
Vue.toasted.show("File uploaded successfully.", {
theme: "bubble",
position: "top-right",
duration: 5000,
});
item.already_saved = true;
})
.catch(function (error) {
}).
then(function(){
self.searching=false;
if (error.response) {
Vue.toasted.show(error.response.data?.message, {
theme: "bubble",
position: "top-right",
duration: 5000,
});
}
})
.then(function () {
self.searching = false;
self.$refs.uploadForm.reset()
});
},
search: function (e) {
e.preventDefault();
if (!this.query) {
return;
}
var self = this;
self.searching = true;
axios
.get("/search?q=" + this.query)
.then(function (response) {
self.results = response.data;
})
.catch(function (error) {})
.then(function () {
self.searching = false;
});
},
addPodcastManual: function (e) {
e.preventDefault();
if (!this.url) {
return;
}
this.addPodcast({url:this.url})
}
,
this.addPodcast({ url: this.url });
},
addPodcast: function (item) {
// console.log(item);
var self = this;
self.searching = true;
axios.post("/podcasts",{
url:item.url
axios
.post("/podcasts", {
url: item.url,
})
.then(function (response) {
Vue.toasted.show('Podcast added successfully.' ,{
Vue.toasted.show("Podcast added successfully.", {
theme: "bubble",
position: "top-right",
duration : 5000
})
item.already_saved= true
duration: 5000,
});
item.already_saved = true;
})
.catch(function (error) {
if (error.response) {
Vue.toasted.show(error.response.data?.message, {
theme: "bubble",
position: "top-right",
duration : 5000
})
duration: 5000,
});
}
}).
then(function(){
self.searching=false;
self.url=""
})
.then(function () {
self.searching = false;
self.url = "";
});
return false;
}
}
})
},
},
});
< / script >
< / body >
< / html >
Akhil Gupta
4 years ago