added details

client/index.html

@@ -271,6 +271,14 @@
       >
         <i style="color: red;" class="fas fa-dot-circle"></i>
       </button>
+      <button
+      class="button"
+      title="Click to see details."
+      
+      @click="showDetails(podcast)"
+    >
+      <i  class="fas fa-info"></i>
+    </button>
             </div>
             </div>
           </div>
@@ -305,14 +313,52 @@
         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>
+   
   </template>
+  <Modal v-model="showDetail">
+    <table class="table" v-if="detailPodcast">
+      <tr>
+        <td>Title</td>
+        <td>${detailPodcast.Title}</td>
+      </tr>
+     
+      <tr>
+        <td>Author</td>
+        <td>${ detailPodcast.Author }</td>
+      </tr>
+      <tr>
+        <td>Url</td>
+        <td> <a target="_blank" :href="detailPodcast.URL">Link</a></td>
+      </tr>
+
+      <tr>
+        <td>Summary</td>
+        <td style="word-wrap: break-word;">${ detailPodcast.Summary }</td>
+      </tr>
+      <tr>
+        <td>Added On</td>
+        <td>${ getFormattedDate(detailPodcast.CreatedAt)}</td>
+      </tr>
+      <tr>
+        <td>Last Episode</td>
+        <td>${ getFormattedLastEpisodeDate(detailPodcast)}</td>
+      </tr>
+      <tr>
+        <td>Paused</td>
+        <td> ${ detailPodcast.IsPaused?'Yes':'No' }</td>
+      </tr>
+    </table>
+
+  </Modal>
  </div>
     </div>
     {{template "scripts"}}
     <script src="/webassets/popper.min.js"></script>
     <script src="/webassets/tippy-bundle.umd.min.js"></script>
     <script src="/webassets/stopword.js"></script>
-
+    <script src="/webassets/modal/vue-modal.umd.min.js"></script>
+    <link rel="stylesheet" href="/webassets/modal/vue-modal.css">
+ 
     <template id="editTags">
       <div class="tags">
         <div @click="editTags" style="cursor: pointer;">
@@ -338,6 +384,8 @@
        </div>
     </template>
     <script>
+      Vue.component('Modal', VueModal)
+
       Vue.component('tagger',{
         delimiters: ["${", "}"],
         data:function(){
@@ -477,6 +525,10 @@
 
         },
         methods:{
+          showDetails(podcast){
+            this.detailPodcast=podcast;
+            this.showDetail=true;
+          },
           getPodcastImage(item){
             return "/podcasts/"+item.ID+"/image"
           },
@@ -608,6 +660,12 @@
            var dt=new Date(Date.parse(podcast.LastEpisode.substr(0,10)));
            return dt.toDateString()
           },
+          getFormattedDate(date){
+           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
+           var dt=new Date(Date.parse(date.substr(0,10)));
+           return dt.toDateString()
+          },
           downloadAllEpisodes(id) { downloadAllEpisodes(id);},
           deletePodcast(id){ deletePodcast(id,()=>{
            
@@ -702,6 +760,8 @@
         },
         data: {
           socket:null,
+          detailPodcast:null,
+          showDetail:false,
           playerExists:false,
           isMobile:false,
           layoutOptions:["list","grid"],

webassets/modal/vue-modal.css

@@ -0,0 +1 @@
+.vm-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,0.5)}.vm-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;outline:0}.vm{position:relative;margin:0px auto;width:calc(100% - 20px);min-width:110px;max-width:500px;background-color:#fff;top:30px;cursor:default;box-shadow:0 5px 15px rgba(0,0,0,0.5)}.vm-titlebar{padding:10px 15px 10px 15px;overflow:auto;border-bottom:1px solid #e5e5e5}.vm-title{margin-top:2px;margin-bottom:0px;display:inline-block;font-size:18px;font-weight:normal}.vm-btn-close{color:#ccc;padding:0px;cursor:pointer;background:0 0;border:0;float:right;font-size:24px;line-height:1em}.vm-btn-close:before{content:'×';font-family:Arial}.vm-btn-close:hover,.vm-btn-close:focus,.vm-btn-close:focus:hover{color:#bbb;border-color:transparent;background-color:transparent}.vm-content{padding:10px 15px 15px 15px}.vm-content .full-hr{width:auto;border:0;border-top:1px solid #e5e5e5;margin-top:15px;margin-bottom:15px;margin-left:-14px;margin-right:-14px}.vm-fadeIn{animation-name:vm-fadeIn}@keyframes vm-fadeIn{0%{opacity:0}100%{opacity:1}}.vm-fadeOut{animation-name:vm-fadeOut}@keyframes vm-fadeOut{0%{opacity:1}100%{opacity:0}}.vm-fadeIn,.vm-fadeOut{animation-duration:0.25s;animation-fill-mode:both}