docbrown/app/views/moderations/index.html.erb

<% if current_user&.trusted %>
  <style>
    .level-rating-button {
      border-radius: 8px;
      font-size: 1.1em;
      padding: 3px;
      width: 42px;
      border: 2px solid black;
      font-weight: bold;
    }

    .level-rating-button.selected {
      background: #9bebff;
    }
      .tag-mod-form {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    margin: 40px auto;
  }

  .tag-mod-form ul {
    text-align: left;
    font-size: 15px;
  }

  .tag-mod-form form {
    width: 500px;
    margin: auto;
    max-width: 90%;
  }

  .tag-mod-form form input {
    width: 100%;
    padding: 5px;
    font-size: 20px;
    margin-bottom: 5px;
    border: 1px solid #888;
  }

  .tag-mod-form form input[type="submit"] {
    background: #0045ff;
    color: white;
    font-weight: bold;
    padding: 10px;
    margin: auto;
    display: block;
  }

  .tag-mod-form form textarea {
    width: 100%;
    padding: 5px;
    font-size: 17px;
    height: 100px;
    border: 1px solid #888;
  }
  </style>

  <br /><br /><br /><br />
  <center>
    <h1>Mod Convenience Dashboard</h1>
    <h2>Add "Experience Level" ratings</h2>
    <h5>More mod tools will be added as they are created.</h5>
  </center>
  <div class="container">
    <% @articles.each do |article| %>
      <% @rating_vote = article.rating_votes.where(user_id: current_user.id).first %>
      <% if !@rating_vote || article.last_buffered.nil? %>
        <div style="border-bottom: 20px solid black; margin-bottom: 15px;">
          <center>
            <h1><%= article.title %></h1>
            <% cache("main-article-tags-#{article.cached_tag_list}", expires_in: 30.hours) do %>
              <div class="tags">
                <% article.cached_tag_list_array.each do |tag| %>
                  <a class="tag" href="/t/<%= tag %>" style="background-color:<%= tag_colors(tag)[:background] %>;color:<%= tag_colors(tag)[:color] %>">#<%= tag %></a>
                <% end %>
              </div>
            <% end %>
          </center>
          <div class="body">
            <%= HTML_Truncator.truncate(article.processed_html,
                                        200, ellipsis: '<a class="comment-read-more" href="' + article.path + '">... Read Entire Post</a>').html_safe %>
          </div>
          <center>
            <% if article.last_buffered.nil? %>
              <div class="tag-mod-form" style="padding: 10px 0px 20px">
                <%= form_for(BufferUpdate.new) do |f| %>
                  <h2>Suggest a Tweet</h2>
                  <%= f.hidden_field :article_id, value: article.id %>
                  <%= f.text_area :body_text, maxlength: 220 %>
                  <%= f.submit "Share Tweet Suggestion" %>
                <% end %>
              </div>
                <p style="width: 90%;margin:50px auto;text-align:left">
                  <br /><br />Text will be used in the body of a tweet linking to this post.
                  <br /><br />Tweet suggestion can be a TLDR of the post, an interesting quote from the post, or bullet points from topics covered in the post.
                </p>
            <% end %>
            <div style="padding: 10px 0px 20px">
              <h2>Experience Level Target:</h2>
              <% 10.times do |i| %>
                <%= form_for(RatingVote.new, html: { style: "display: inline-block" }) do |f| %>
                  <%= f.hidden_field :article_id, value: article.id %>
                  <%= f.hidden_field :group, value: "experience_level" %>
                  <%= f.hidden_field :rating, value: i + 1 %>
                  <button value="<%= i + 1 %>" name="rating_vote[rating]" class="level-rating-button <%= "selected" if @rating_vote&.rating == i + 1 %>"><%= i + 1 %></button>
                <% end %>
              <% end %>
            </div>
            <h2><a href="<%= article.path %>/mod">Full Moderation</a></h2>
            <br /><br /> <br /><br />
          </center>
        </div>
      <% end %>
    <% end %>
  </div>
<% else %>
  <br /><br /><br /><br />
  <div class="container">
    <h1 style="text-align: center">DEV Mods</h1>
    <div class="body">
      <p>We periodically award some DEV members with heightened privileges to help moderate the community.</p>
      <p>Email <a href="mailto:yo@dev.to">yo@dev.to</a> if you'd like to be considered right away.</p>
      <% if !user_signed_in? %>
        <p><em>P.S. You are not currently signed in.</em></p>
      <% end %>
    </div>
  </div>
<% end %>

<script>
  var forms = document.getElementsByTagName("form");

  for (i=0; i < forms.length; i++){
    var form = forms[i];
    form.onsubmit = function(e) {
      e.preventDefault();
      var thisForm = this;
      thisForm.parentNode.style.background = "#b7ffe7"
      var data = new URLSearchParams();
      for (var pair of new FormData(thisForm)) {
          console.log(pair[0])
          data.append(pair[0], pair[1]);
      }
      fetch(thisForm.action, {
        method: 'post',
        body: data,
      })
      .then(function() {
        thisForm.parentNode.style.background = "#00ffa9"
        console.log("form submitted")
      });
    }
  }
</script>