|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>PodGrab</title>
|
|
|
|
|
{{template "commoncss"}}
|
|
|
|
|
<style>
|
|
|
|
|
.button-delete {
|
|
|
|
|
color: #d11a2a;
|
|
|
|
|
}
|
|
|
|
|
.podcasts .button {
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
/* Larger than tablet */
|
|
|
|
|
@media (min-width: 750px) {
|
|
|
|
|
img {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
{{template "navbar" .}}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
|
<template v-for="podcast in podcasts" >
|
|
|
|
|
<div :key="podcast.ID" class="podcasts row" v-bind:id="'podcast-'+podcast.ID" >
|
|
|
|
|
<div class="columns two">
|
|
|
|
|
<img
|
|
|
|
|
onerror="onImageError(this)"
|
|
|
|
|
class="u-full-width"
|
|
|
|
|
v-bind:src="podcast.Image"
|
|
|
|
|
v-bind:alt="podcast.Title"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="columns ten">
|
|
|
|
|
<a style="text-decoration: none" :href="'/podcasts/'+podcast.ID+'/view'">
|
|
|
|
|
<h3>${podcast.Title}</h3></a
|
|
|
|
|
>
|
|
|
|
|
<p class="useMore">${podcast.Summary}</p>
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="columns four">
|
|
|
|
|
|
|
|
|
|
<template v-if="podcast.LastEpisode">Last Ep : ${getFormattedLastEpisodeDate(podcast)}</template>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="columns five"
|
|
|
|
|
:title="getEpisodeCountTooltip(podcast)"
|
|
|
|
|
>
|
|
|
|
|
<template v-if="podcast.DownloadingEpisodesCount">
|
|
|
|
|
(${podcast.DownloadingEpisodesCount})/</template>${podcast.DownloadedEpisodesCount}/${podcast.AllEpisodesCount}
|
|
|
|
|
episodes
|
|
|
|
|
</div>
|
|
|
|
|
<div class="columns three" style="">
|
|
|
|
|
<button
|
|
|
|
|
class="button button-delete"
|
|
|
|
|
@click="deletePodcast(podcast.ID)"
|
|
|
|
|
title="Delete Podcast and episode files"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-trash"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
class="button button-delete"
|
|
|
|
|
title="Delete only episode files"
|
|
|
|
|
@click="deletePodcastEpisodes(podcast.ID)"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-folder-minus"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="button"
|
|
|
|
|
title="Download all episode files"
|
|
|
|
|
@click="downloadAllEpisodes(podcast.ID)"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-download"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{{range .podcasts}}
|
|
|
|
|
<div class="podcasts row" id="podcast-{{ .ID }}">
|
|
|
|
|
<div class="columns two">
|
|
|
|
|
<img
|
|
|
|
|
onerror="onImageError(this)"
|
|
|
|
|
class="u-full-width"
|
|
|
|
|
src="{{ .Image }}"
|
|
|
|
|
alt="{{ .Title }}"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="columns ten">
|
|
|
|
|
<a style="text-decoration: none" href="/podcasts/{{ .ID }}/view">
|
|
|
|
|
<h3>{{.Title}}</h3></a
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<p class="useMore">{{ .Summary }}</p>
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="columns four">
|
|
|
|
|
{{if .LastEpisode}} Last Ep : {{ formatDate .LastEpisode }}
|
|
|
|
|
{{end}}
|
|
|
|
|
</div>
|
|
|
|
|
{{$downloading:= .DownloadingEpisodesCount}}
|
|
|
|
|
<div
|
|
|
|
|
class="columns five"
|
|
|
|
|
title="{{downloadedEpisodes .PodcastItems}} episodes downloaded out of total {{ len .PodcastItems}} episodes.
|
|
|
|
|
{{if gt $downloading 0}} {{$downloading}} episodes in queue {{end}}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{if gt $downloading 0}}
|
|
|
|
|
({{$downloading}})/{{end}}{{.DownloadedEpisodesCount}}/{{.AllEpisodesCount}}
|
|
|
|
|
episodes
|
|
|
|
|
</div>
|
|
|
|
|
<div class="columns three" style="">
|
|
|
|
|
<button
|
|
|
|
|
class="button button-delete"
|
|
|
|
|
onclick="deletePodcast('{{.ID}}')"
|
|
|
|
|
title="Delete Podcast and episode files"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-trash"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
class="button button-delete"
|
|
|
|
|
title="Delete only episode files"
|
|
|
|
|
onclick="deletePodcastEpisodes('{{.ID}}')"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-folder-minus"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="button"
|
|
|
|
|
title="Download all episode files"
|
|
|
|
|
onclick="downloadAllEpisodes('{{.ID}}')"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-download"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
{{else}}
|
|
|
|
|
<div class="welcome">
|
|
|
|
|
<h5>Welcome</h5>
|
|
|
|
|
<p>It seems you have just setup Podgrab for the first time?</p>
|
|
|
|
|
<p>
|
|
|
|
|
Before you start adding and downloading podcasts I recommend that you
|
|
|
|
|
give a quick look to the <a href="/settings"><strong>Settings</strong> here</a> so that you can customize the
|
|
|
|
|
downloading behavior of the software as per your needs.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<a href="/add">Click here</a> to add
|
|
|
|
|
a new podcast to start downloading.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Please feel free to report any issues or request any features on our github page <a target="_blank" href="https://github.com/akhilrex/podgrab">here</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
{{end}}
|
|
|
|
|
<!-- <div class="row">
|
|
|
|
|
<div class="columns twelve" style="text-align: center;">
|
|
|
|
|
<a href="/episodes" class="button button-primary">All Episodes</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
{{template "scripts"}}
|
|
|
|
|
<script>
|
|
|
|
|
var app = new Vue({
|
|
|
|
|
delimiters: ["${", "}"],
|
|
|
|
|
el: "#app",
|
|
|
|
|
methods:{
|
|
|
|
|
getEpisodeCountTooltip(podcast){
|
|
|
|
|
let title=`${podcast.DownloadedEpisodesCount} episodes downloaded out of total ${podcast.AllEpisodesCount} episodes`
|
|
|
|
|
if(podcast.DownloadingEpisodesCount){
|
|
|
|
|
title+= '\n'+podcast.DownloadingEpisodesCount+' episodes in the queue.'
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
return title
|
|
|
|
|
},
|
|
|
|
|
getFormattedLastEpisodeDate(podcast){
|
|
|
|
|
const options={month:"short", day:"numeric", year:"numeric"}
|
|
|
|
|
//todo: this is a really dirty hack which needs to be fixed when we work on the episode page
|
|
|
|
|
let dt=new Date(Date.parse(podcast.LastEpisode.substr(0,10)));
|
|
|
|
|
// console.log(podcast.LastEpisode,dt);
|
|
|
|
|
return dt.toDateString()
|
|
|
|
|
},
|
|
|
|
|
downloadAllEpisodes(id) { downloadAllEpisodes(id);},
|
|
|
|
|
deletePodcast(id){ deletePodcast(id);},
|
|
|
|
|
deletePodcastEpisodes(id){ deletePodcastEpisodes(id)},
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
podcasts: {{ .podcasts }},
|
|
|
|
|
}})
|
|
|
|
|
function downloadAllEpisodes(id) {
|
|
|
|
|
var confirmed = confirm(
|
|
|
|
|
"Are you sure you want to download all episodes of this podcast?"
|
|
|
|
|
);
|
|
|
|
|
if (!confirmed) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
axios
|
|
|
|
|
.get("/podcasts/" + id + "/download")
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
Vue.toasted.show(
|
|
|
|
|
"All episodes of this podcast have been enqueued to download.",
|
|
|
|
|
{
|
|
|
|
|
theme: "bubble",
|
|
|
|
|
type: "info",
|
|
|
|
|
position: "top-right",
|
|
|
|
|
duration: 5000,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
if (error.response) {
|
|
|
|
|
Vue.toasted.show(error.response.data?.message, {
|
|
|
|
|
theme: "bubble",
|
|
|
|
|
type: "error",
|
|
|
|
|
position: "top-right",
|
|
|
|
|
duration: 5000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(function () {});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
function deletePodcast(id) {
|
|
|
|
|
// console.log(id);
|
|
|
|
|
var confirmed = confirm(
|
|
|
|
|
"Are you sure you want to delete this podcast and all files?"
|
|
|
|
|
);
|
|
|
|
|
if (!confirmed) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
axios
|
|
|
|
|
.delete("/podcasts/" + id)
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
Vue.toasted.show("Podcast deleted successfully.", {
|
|
|
|
|
theme: "bubble",
|
|
|
|
|
type: "success",
|
|
|
|
|
position: "top-right",
|
|
|
|
|
duration: 5000,
|
|
|
|
|
});
|
|
|
|
|
var row = document.getElementById("podcast-" + id);
|
|
|
|
|
row.remove();
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
if (error.response) {
|
|
|
|
|
Vue.toasted.show(error.response.data?.message, {
|
|
|
|
|
theme: "bubble",
|
|
|
|
|
type: "error",
|
|
|
|
|
position: "top-right",
|
|
|
|
|
duration: 5000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(function () {});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function deletePodcastEpisodes(id) {
|
|
|
|
|
console.log(id);
|
|
|
|
|
var confirmed = confirm(
|
|
|
|
|
"Are you sure you want to delete all episodes of this podcast?"
|
|
|
|
|
);
|
|
|
|
|
if (!confirmed) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
axios
|
|
|
|
|
.delete("/podcasts/" + id + "/items")
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
Vue.toasted.show("Podcast Episodes deleted successfully.", {
|
|
|
|
|
theme: "bubble",
|
|
|
|
|
type: "success",
|
|
|
|
|
position: "top-right",
|
|
|
|
|
duration: 5000,
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
if (error.response) {
|
|
|
|
|
Vue.toasted.show(error.response.data?.message, {
|
|
|
|
|
theme: "bubble",
|
|
|
|
|
type: "error",
|
|
|
|
|
position: "top-right",
|
|
|
|
|
duration: 5000,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(function () {});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
