You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
podgrab/client/index.html

241 lines
7.1 KiB

<!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" .}}
<div class="row" style="display: none">
<form action="/" method="post">
<div class="nine columns">
<input
type="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"
/>
</div>
</form>
</div>
<br />
{{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>
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>