add a feature for showing upvote ratio in posts #147

app.js

@@ -137,6 +137,12 @@ const preferencesMiddleware = (req, res, next) => {
     res.cookie('collapse_child_comments', collapseChildComments, { maxAge: 31536000, httpOnly: true })
   }
   
+  let showUpvotedPercentage = req.query.show_upvoted_percentage
+  if(showUpvotedPercentage) {
+    req.cookies.show_upvoted_percentage = showUpvotedPercentage
+    res.cookie('show_upvoted_percentage', showUpvotedPercentage, { maxAge: 31536000, httpOnly: true })
+  }
+  
   next()
 }
 

inc/processJsonPost.js

@@ -29,6 +29,7 @@ module.exports = function(fetch) {
           id: post.id,
           domain: post.domain,
           contest_mode: post.contest_mode,
+          upvote_ratio: post.upvote_ratio,
           comments: null,
           has_media: false,
           media: null,

routes.js

@@ -1582,6 +1582,7 @@ module.exports = (app, redis, fetch, RedditAPI) => {
     let highlight_controversial = req.body.highlight_controversial
     let post_media_max_height = req.body.post_media_max_height
     let collapse_child_comments = req.body.collapse_child_comments
+    let show_upvoted_percentage = req.body.show_upvoted_percentage
 
     res.cookie('theme', theme, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
     
@@ -1612,6 +1613,12 @@ module.exports = (app, redis, fetch, RedditAPI) => {
       collapse_child_comments = 'false'
     res.cookie('collapse_child_comments', collapse_child_comments, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
     
+    if(show_upvoted_percentage === 'on')
+      show_upvoted_percentage = 'true'
+    else
+      show_upvoted_percentage = 'false'
+    res.cookie('show_upvoted_percentage', show_upvoted_percentage, { maxAge: 365 * 24 * 60 * 60 * 1000, httpOnly: true })
+    
     return res.redirect('/preferences')
   })
   

static/css/styles.css

@@ -698,6 +698,11 @@ footer a {
   font-weight: bold;
   font-size: small;
 }
+#post .ratio {
+  font-size: 0.6rem;
+  display: block;
+  padding: 4px 0px 5px 0px;
+}
 #post .title {
   float: left;
   width: calc(100% - 60px);

views/post.pug

@@ -41,6 +41,9 @@ html
             .score
               div.arrow
               span #{kFormatter(post.ups)}
+              if user_preferences.show_upvoted_percentage === 'true'
+                - let downvoted = parseInt(post.ups * (1 - post.upvote_ratio))
+                span.ratio(title="~"+ downvoted +" downvoted") #{post.upvote_ratio  * 100}%
               div.arrow.down
             .title
               a(href="" + post.url + "", rel="noopener noreferrer")
@@ -80,6 +83,9 @@ html
               .score
                 div.arrow
                 span #{kFormatter(post.crosspost.ups)}
+                if user_preferences.show_upvoted_percentage === 'true'
+                  - let downvoted = parseInt(post.ups * (1 - post.upvote_ratio))
+                  span.ratio(title="~"+ downvoted +" downvoted") #{post.upvote_ratio  * 100}%
                 div.arrow.down
               p.submitted
                 span(title="" + toUTCString(post.crosspost.created) + "") submitted #{timeDifference(post.crosspost.created)} by

views/preferences.pug

@@ -71,6 +71,12 @@ html
                 input(type="checkbox", name="collapse_child_comments", id="collapse_child_comments", checked="checked")
               else
                 input(type="checkbox", name="collapse_child_comments", id="collapse_child_comments")
+          .setting
+            label(for="show_upvoted_percentage") Show upvote ratio percentage in posts: 
+              if(user_preferences.show_upvoted_percentage == 'true')
+                input(type="checkbox", name="show_upvoted_percentage", id="show_upvoted_percentage", checked="checked")
+              else
+                input(type="checkbox", name="show_upvoted_percentage", id="show_upvoted_percentage")
           legend Subscribed subreddits
           .setting
             details