vuework

client/index.html

@@ -27,27 +27,70 @@
     <div class="container">
       {{template "navbar" .}}
 
-      <div class="row" style="display: none">
+   
-        <form action="/" method="post">
+      <br />
-          <div class="nine columns">
+
-            <input
+      <div id="app" v-cloak>
-              type="url"
+          <template  v-for="podcast in podcasts"  >
-              name="url"
+        <div :key="podcast.ID" class="podcasts row" v-bind:id="'podcast-'+podcast.ID" >
-              id="url"
+          <div class="columns two">
-              placeholder="Enter Podcast RSS feed to add"
+            <img
+              onerror="onImageError(this)"
               class="u-full-width"
+              v-bind:src="podcast.Image"
+              v-bind:alt="podcast.Title"
             />
           </div>
-          <div class="three columns">
+          <div class="columns ten">
-            <input
+            <a style="text-decoration: none" :href="'/podcasts/'+podcast.ID+'/view'">
-              type="submit"
+              <h3>${podcast.Title}</h3></a
-              value="Add Podcast"
+            >
-              class="u-full-width button-primary"
+            <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>
-        </form>
+        </div>
+        <hr>
+      </template>
       </div>
-      <br />
 
       {{range .podcasts}}
       <div class="podcasts row" id="podcast-{{ .ID }}">
@@ -137,6 +180,32 @@
     </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?"

client/scripts.html

@@ -1,5 +1,5 @@
 {{define "scripts"}}
-<script src="/webassets/vue.min.js"></script>
+<script src="/webassets/vue.js"></script>
 <script src="/webassets/axios.min.js"></script>
 <script src="/webassets/vue-toasted.min.js"></script>