multipleAction.html

<!-- Multiple Action PAGE -->
<script>
  var messageHandlers = {};
  window.onmessage = e=>{
    if (messageHandlers[e.data]){messageHandlers[e.data]();} // Excecute handler if exact
    else { // We find ones that contain
        for (const evnt in messageHandlers) {
            if ((evnt.substr(evnt.length - 1) == "*") && e.data.includes(evnt.substr(0, evnt.length - 2))) { // and includes w * chopped off
                messageHandlers[evnt](e.data);
                return;
            } // if contains and ends with wildcard then we do it
        }
    }
  };
  function addMessageHandler(msg, callback) { // calling more than once will just overwrite
    Object.assign(messageHandlers, ((a,b)=>{let _ = {}; _[a]=b; return _;})(msg, callback)); // function ab returns a good formatted obj
  }
</script>
<!-- PAGE CONTENT -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title" style="width: calc(100% - 60px);">`+ rw.logoHTML +` Multiple Action Tool</span>
        <!-- HELP -->
        <div id="helpMe" class="icon material-icons" style="float:right;">
          <span style="cursor: pointer; padding-right:15px;" onclick='Object.assign(document.createElement("a"), { target: "_blank", href: "https://en.wikipedia.org/wiki/User:Ed6767/redwarn/help/Multiple_Action_Tool"}).click();'>
              help
          </span>
        </div>
        <div class="mdl-tooltip" for="helpMe">
            Help!
        </div>

        <!-- CLOSE -->
        <div id="close" class="icon material-icons" style="float:right;">
        <span style="cursor: pointer; padding-right:15px;" onclick="window.parent.postMessage('closeDialogMA');">
            clear
        </span>
        </div>
        <div class="mdl-tooltip" for="close">
            Close
        </div>
    </div>
  </header>
  <main class="mdl-layout__content" style="padding-left: 5%;padding-right: 5%;">
    <!-- CONTROLS - TODO ADD HELP TOOLTIPS -->
    <div class="mdl-card mdl-shadow--4dp" style="width:100%">
      <!-- LOADING -->
      <div class="mdl-card__supporting-text" id="mainLoadCard" style="text-align:center; width:97.5%">
        <h2 id="loadTitle">Loading user info...</h2><br/>
        <!-- progress bar -->
        <div id="p1" class="mdl-progress mdl-js-progress" style="width:100%"></div><br />
        <i id="loadingSupportText"></i>
      </div>
      <!-- END LOADING -->

      <!-- -->
      <div class="mdl-card__supporting-text" id="mainFilterControlCard" style="display:none;">
        <h5>Toggle Select: &nbsp; &nbsp;
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="toggleCheck('unregistered', true);">
            UNREGISTERED / UNKNOWN
          </button>
          &nbsp;
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="toggleCheck(10);">
            &lt; 10 edits
          </button>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="toggleCheck(50);">
            &lt; 50 edits
          </button>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="toggleCheck(250);">
            &lt; 250 edits
          </button>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="toggleCheck(500);">
            &lt; 500 edits
          </button>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="toggleCheck('experienced', true);">
            EXPERIENCED
          </button>
          <!-- REV13 - add filter based on standing -->
        </h5>
        <h5>Set Text from: &nbsp; &nbsp;
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="if (boxChecked()) window.parent.postMessage('RWMATnewNotice');">
            New Notice
          </button>
          &nbsp;
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="if (boxChecked()) window.parent.postMessage('RWMATnewMsg');">
            New Message
          </button>
          <!--
          &nbsp;
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
            Quick Template
          </button>-->
        </h5>
        <h5>Actions: &nbsp; &nbsp;
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="removeSelected();">
            Remove Selected
          </button>
          &nbsp;
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="if (boxChecked()) commitSelected();">
            Commit Selected
          </button>
        </h5>
      </div>
    </div>
    <br/><br/>
    <!-- TABLE -->
    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" style="width:100%">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">User</th>
          <th>Related Contributions</th>
          <th>Total Edit Count</th>
          <th>Standing</th>
          <th>Text to add</th>
          <th>Under date?</th>
        </tr>
      </thead>
      <tbody>
        `+ listHTML +`
      </tbody>
    </table>

    <!-- TOAST CONTAINER -->
    <div id="rw-toast" class="mdl-js-snackbar mdl-snackbar">
      <div class="mdl-snackbar__text"></div>
      <button class="mdl-snackbar__action" type="button"></button>
    </div>
  </main>
<script>
  // Set show toast function once load finished
  var pushToast;
  window.onload = () => {
    'use strict';
    window['counter'] = 0;
    var toast = document.querySelector('#rw-toast');
    componentHandler.upgradeElement(toast); // register comp

    // create function
    pushToast = (text, buttonTxt, btnClick, tOut) => {
        'use strict';
        if (buttonTxt) {
            // Show with action and button
            toast.MaterialSnackbar.showSnackbar({message: text, actionHandler: btnClick, actionText: buttonTxt, timeout: tOut}); 
        } else {
            // Show just message
            toast.MaterialSnackbar.showSnackbar({message: text, timeout: tOut});
        }
    };

    // Register all tolltips
    for (let item of document.getElementsByClassName("mdl-tooltip")) {
      componentHandler.upgradeElement(item); 
    }
  };

  // Progress bar
  var setProgress = (val, max)=>{if (val == max) {$("#mainLoadCard").hide(); $("#mainFilterControlCard").show();}}; // placeholder function, main defined once progress bar registered
  
  document.querySelector('#p1').addEventListener('mdl-componentupgraded', ()=>{
    setProgress = (val, max) => {
      // Calc percent done and set
      document.querySelector('#p1').MaterialProgress.setProgress((100 * val) / max); // set progress bar
      $("#loadingSupportText").text("User "+ (val + 1) + " of " + (max+1) + " ("+ Math.round((100 * val) / max) + "%)"); // set support text
      if (val == max) {
        // Max reached, show main filter
        $("#mainLoadCard").hide(); $("#mainFilterControlCard").show();
      }
    };
  });

  // Main
  var userActions = {}; // useractions: wikitext, underdate

  // Add checkbox handlers
  setInterval(checkUpdate, 100); // refresh every 100ms
  function checkUpdate() {
    // Update checked boxes
    let checkedBoxes = $("tbody > tr > td:visible > label > input:checked");
    $(".mdl-layout-title").html('`+ rw.logoHTML +` Multiple Action Tool'+
    (checkedBoxes.length > 0 ?
      " (" + checkedBoxes.length + " user" + (checkedBoxes.length > 1 ? "s": "") + " selected)"
      : "")); 
  }

  // Toggle check boxes toggleCheck(type or max top, is type?)
  function toggleCheck(filter, isType) {
    // For each in table rows
    $("tbody > tr").each((i, el)=>{
      let editCount = $($(el).find("td:visible")[3]).text().replace(",", ""); // 4th collumn (checkbox counts as one too!)
      if ((filter == "unregistered") && (isNaN(editCount))) { // Unregistered / Unknown
        $(el).find("td:visible > label > input:checkbox").click(); // invoke click to toggle
      } else if ((filter == "experienced") && (editCount > 499)) { // experienced
        $(el).find("td:visible > label > input:checkbox").click(); // invoke click to toggle
      } else if ((!isType) && editCount < filter) { // normal filter
        $(el).find("td:visible > label > input:checkbox").click(); // invoke click to toggle
      }
    });
  }

  function removeSelected() {
    // Hide all selected elements 
    $("tbody > tr").each((i, el)=>{
      if ($(el).find("td:visible > label > input:checkbox:checked").length > 0) {
        // remove element as checked
        $(el).find("td:visible > label > input:checkbox").click(); // click to uncheck
        $(el).fadeOut(); // hide
      }
    });
  }

  function boxChecked() { // Return if any checkbox is checked or not
    let bc = $("tbody > tr > td:visible > label > input:checked").length > 0;
    if (!bc) {
      // Push toast
      pushToast("Please select a user.");
    }
    return bc;
  } 

  // SET TEXT UNDER DATE HANDLER
  addMessageHandler("applyToChecked\`*", cI=>{ // apply to checked b64 txt, underDate (Yes/No), source (i.e New Notice)
    let textToAdd = atob(cI.split("\`")[1]);
    let underDate = cI.split("\`")[2];
    let source = cI.split("\`")[3];
    $("tbody > tr").each((i, el)=>{ // for each row
      if ($(el).find("td:visible > label > input:checkbox:checked").length > 0) { // if checked
        $($(el).find("td:visible")[5]).text(source); // 6th collumn (on click open preview)
        $($(el).find("td:visible")[6]).text(underDate); // 7th
        // Apply to object based on username (2nd)
        userActions[$($(el).find("td:visible")[1]).text()] = {
          "toAdd" : textToAdd,
          "underDate": (underDate.toLowerCase() == "yes")
        };
      }
    });
  });

  // COMMIT SELECTED - i.e actually do
  function commitSelected() {
    // Ensure action has been set for all checked
    let notAllFilled = false;
    $("tbody > tr").each((i, el)=>{ // for each row
      if ($(el).find("td:visible > label > input:checkbox:checked").length > 0) { // if checked
         notAllFilled = ($($(el).find("td:visible")[5]).text() == "-") //If 6th col has blank symb, stop and notif
      }
    });

    if (notAllFilled) {
      // Not all filled, warn and exit
      pushToast("Please set an action for the selected users.");
      return; //exit
    } // else continue
    
    // Show confirm dialog
    window.parent.postMessage('RWMATcommitSelectedConfirm\`'+ $("tbody > tr > td:visible > label > input:checked").length); // push request for confirm to top

    // When confirmed
    addMessageHandler("confirmSelected", ()=>{
      // load dialog is already showing, so interaction impossible in normal use
      // Now for each
      $("tbody > tr").each((i, el)=>{ // for each row
        if ($(el).find("td:visible > label > input:checkbox:checked").length > 0) { // if checked
          let username = $($(el).find("td:visible")[1]).text(); // get username
          let userAct = userActions[username]; // set action
          let userIsIp = (username.match(/([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(\d{1,3}\.){3}\d{1,3}/g) != null); // regex match all IPS
          // Time to commit
          let finalWikiTxt = userAct.toAdd;
          if (userAct.underDate && userIsIp) {
            // Add shared IP advice for under date
            finalWikiTxt += "`+rw.sharedIPadvice()+`";
          }

          // Finally, push upstairs to be done.
          window.parent.postMessage('RWMATToAdd\`'+ btoa(finalWikiTxt) + '\`'+ userAct.underDate + '\`'+ username);
          // Done - Now remove original
          $(el).find("td:visible > label > input:checkbox").click(); // click to uncheck
          $(el).fadeOut(); // hide
        }
      });
      // We done
      window.parent.postMessage('RWMATfinishedandcommit'); // start the commits back upstairs
    });
  }
</script>
</div>