Page History

<!-- <script src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/js/esg/addJudgeScript.js"> </script> -->
<script>
/* 
ReadME: 
This script can be added to any page to add in an "Add/Remove/View" judge entity. Made to be paired with the event page from confiform macro. 
*/

// global variables for judge script 
let judges_parent_container_selector = "#hosts-details-container"; 
let modal_parent_container_selector = "body"; 
let insert_tab = false; 
let tab_container_selector = "";
let insert_stylesheets = ["https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/ESG/addEventJudgeStyles.css"];
let arj_group_name = entryId + "-judges"

/* MODAL FUNCTIONS */
const closeArjModal = (identifier) => {
  // refresh form
  refreshArjForm(identifier)
  $(identifier).hidefadeOut();
}

// to do: add fall back for entry id disabled="disabled"disable button
const getFormrefreshArjForm = (form_type, user_display_name, usernameidentifier) => {
  if(form_type === "add"){// reset response
   return `        <h2 class="form-title fullSite" id="form-title-addjudgeglobalfinalists">Add New Judge</h2>
            <form id="formaddeventjudge" class="add-user-form fullSite">
              <input type="text" id="user_first_name" name="user_first_name" placeholder="First Name" required="" class="add-user-input fullSite">
 $(identifier + " #arj-form-response-container").hide();
  $("#arj-successful-img").hide();
  $("#arj-form-response-text").text(" ");
  $("#arj-form-response-text").hide();
  $("#arj-form-response-btn").hide();
  // reset form
  $(identifier + " form")[0].reset();
  // disable button

  // show form
  $(identifier + " form").show();

}

// to do: add fall back for entry id disabled="disabled"
const getForm = (form_type, user_display_name, username) => {
  if(form_type === "add"){
   return `        <h2 class="form-title fullSite" id="form-title-addjudgeglobalfinalists">Add New Judge</h2>
            <form id="formaddeventjudge" class="add-user-form fullSite">
              <input type="text" id="user_first_name" name="user_first_name" placeholder="First Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_last_name" name="user_last_name" placeholder="Last Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_email" name="email" placeholder="Email" required="" class="add-user-input fullSite">
              <input type="hidden" name="groups" value="judge-users,${arj_group_name},event-judges" checked="" class="fullSite">
              <input type="hidden" name="addUserType" value="judge" checked="" class="fullSite">
              <input type="hidden" name="event_name" value="`+AJS.params.pageTitle+`" checked="" class="fullSite">
              <input type="submit" id="form_submit_addjudgeglobalfinalists" name="Submit" class="pressbtn add-form-submit add-user-submit fullSite" value="Add Event Judge" >
            </form>`
  } else {
   return `<h2 class="delete-text fullSite" id="remove-text-adminsremove">Are you sure you want to delete ${user_display_name}?</h2>
            <div class="remove-button-container fullSite">
              <button id="no-cancel-button-adminsremove" class="pressbtn modal-button fullSite" onclick="closeModal('adminsremove')" style="display: block;">No, Cancel</button>
              <a class="pressbtn modal-button go-to-company-page fullSite" href="#" id="company-page-button-adminsremove" rel="nofollow" style="display: none;">Go to Company Page</a>
             <input type="text"<form id="user_last_name" name="user_last_name" placeholder="Last Name" required="" class="add-user-input fullSite"form_deactivate_adminsremove" class="fullSite" style="display: block;">
                <input class="hidden fullSite" value="${username}" type="text" id="userremove_username_emailadminsremove" name="user_email" placeholder="Email" required="" classrequired="add-user-input fullSite">
                <input type="hidden" id="remove_groups_adminsremove" name="remove_groups" class="fullSite" value="judge-users,${arj_group_name},event-judges" checked="" class="fullSite">
>
                <input type="submit" class="pressbtn modal-button  <input type="hiddendelete-submit-button fullSite" name="addUserTypeSubmit" value="judge" checked="" class="fullSite">
Yes, Delete">
              </form>
  <input type="hidden" name="event_name" value="`+AJS.params.pageTitle+`" checked="" class="fullSite">          </div>
    `
  }
}

const insertModal = () => {
  let <inputmodal_html type="submit"= `
  <div id="form_submit_addjudgeglobalfinalists" name="Submitaddremovejudge" class="pressbtn addarj-form-submit add-user-submit fullSitemodal-overlay" valuestyle="Add Event Judge" display: none;">
    <div class="arj-modal-content">
       </form>`<div class="arj-invitation">
  } else {
   return `<h2<span class="deletearj-text fullSitecloseModalBtn" id="remove-text-adminsremove">Are you sure you want to delete ${user_display_name}?</h2>onclick="closeArjModal('#addremovejudge')">X</span>
            <div classid="removemodal-buttoncontent-container fullSite"> </div>
            <div  <button id="nomodal-cancel-button-adminsremove"waiting-container" style="display:none;"><div class="pressbtnloader modal-button fullSite" onclickid="closeModal('adminsremove')modal-loader" style="display: blockmargin: 65px auto;">No, Cancel</button>> </div></div>
              <a class<div id="pressbtn modal-button go-to-company-page fullSite" href="#" id="company-page-button-adminsremove" rel="nofollowarj-form-response-container" style="display:none" class="arj-form-response-container">
            <img id="arj-successful-img" class="arj-successful-img" style="display: none;">Go to Company Page</a>
              <form id="user_form_deactivate_adminsremove" class="fullSite" style="display: block; src="https://passport-media.s3-us-west-1.amazonaws.com/EWC/judgingdashboard/successful_invite.png">
                <input class="hidden fullSite" value="${username}" type="text" id="remove_username_adminsremove" name="user_email" placeholder="Email" required=""><p id="arj-form-response-text" style="display: none;" class="arj-form-response-text"> </p>
                <input type="hidden" id="remove_groups_adminsremove" name="remove_groups" class="fullSite" value="${arj_group_name}"><button id="arj-form-response-btn" style="display: none;" class="arj-pressbtn arj-modal-button arj-form-response-button" onclick="refreshArjForm('#addremovejudge')">Refresh Form</button>
        </div>
      </div>
    <input type="submit" class="pressbtn modal-button delete-submit-button fullSite" name="Submit" value="Yes, Delete">
              </form>
            </div>
    `
  }
}

const insertModal</div>
  </div>`
  return modal_html;
}

const openArjModal = (modal_type) => {
  let modal_form = getForm(modal_type);
  $("#modal-content-container").html(modal_form)
  $("#formaddeventjudge").submit(function(e){ console.log("in jquery submit"); e.preventDefault(); handleAddForm(); })
  // todo: add on input change toggle disable button
  $("#addremovejudge").show();
}


/* END MODAL FUNCTIONS */

/* CONTENT FUNCTIONS */
const insertARJHTML = () => {
  let modalarj_htmlskeleton = `
  <div id="addremovejudge" class="arj-modal-overlay" style="display: none;">
    <div class="arj-modal-contentcontainer">
      <div class="arj-invitation"><h2>Event Judges</h2>
      <div  <span class="arj-closeModalBtnbutton" onclick="closeArjModalopenArjModal('#addremovejudgeadd')">X<>Add Judge</span>div>
          <div id="modalarj-content-containerjudges">

      </div>
    </div>
  `;
  return arj_skeleton;
}

const generateARJJudgeHTML = <div(judge) id="arj-form-response-container" class="arj-form-response-container">=> {
    let judge_html = "";
    var button_html =
      <img`<div idclass="fixed-button-container arj-successfulfixed-button-imgcontainer" classonclick="arj-successful-img" style="display: none;" src="https://passport-media.s3-us-west-1.amazonaws.com/EWC/judgingdashboard/successful_invite.pngopenArjModal('remove')" data-remove_groups="${arj_group_name}" data-username="`+judge.username+`" data-displayname="`+judge.displayName+`">
        <img  <p idsrc="arj-form-response-text" style="display: none;" class="arj-form-response-text"> </p>https://passport-media.s3-us-west-1.amazonaws.com/ESG/judgingdashboard/trash-ESG.png"/>
      </div>`;
    <buttonjudge_html id="arj-form-response-btn" style="display: none;"+=
    `<div class="arjjudging-pressbtn arj-modal-buttoncard-container arj-form-response-button">Refresh Form</button>card">
        </div>
      </div><div class="image-container arj-card-image-container">
    </div>
  </div>`
  return modal_html;
}

const openArjModal = (modal_type) => {
  let modal_form = getForm(modal_type);
  $("#modal-content-container").html(modal_form)
  $("#formaddeventjudge").submit(function(e){ console.log("in jquery submit"); e.preventDefault(); handleAddForm(); })
  $("#addremovejudge").show();
}

/* END MODAL FUNCTIONS */

/* CONTENT FUNCTIONS */
const insertARJHTML = <a href="#">
          <p class="judging-card-subtitle arj-card-subtitle">`+ judge.displayName +`</p></a>` + button_html + `
        </div>
        
    </div>`
    return judge_html;
}

const getARJJudges = async () => {
  let arj_skeletonres = `
    <div class="arj-container">;
  res =   <h2>Event Judges</h2>await jQuery.ajax({
      <div class="arj-button" onclick="openArjModal('add')">Add Judge</div>url: "/rest/api/group/"+arj_group_name+"/member?", 
    type: "get", 
      <div id="arj-judges">

dataType: 'json', 
      </div>async: true
  }).then(res  </div>=> res);

  `res = res.results;
  return arj_skeletonres;
}

const generateARJJudgeHTMLinsertARJJudges = async (judge) => {
    let judgearj_judges_html = ""'';
    var button_html =
      `<div class="fixed-button-container arj-fixed-button-container" onclick="openArjModal('remove')" data-remove_groups="${if(arj_group_name}" data-username="`+judge.username+`" data-displayname="`+judge.displayName+`">){
    // get judges in <img src="https://passport-media.s3-us-west-1.amazonaws.com/ESG/judgingdashboard/trash-ESG.png"/>
      </div>`entry ID group
    let arj_judges_arr = await getARJJudges();
    judge_html +=
console.log(arj_judges_arr)
    for(var `<divi class="judging-card-container arj-card">= 0; i < arj_judges_arr.length; i++){
        <div class="image-container arj-card-image-container">arj_judges_html += generateARJJudgeHTML(arj_judges_arr[i]); 
    }
  }
  <a href="#">
          <p class="judging-card-subtitle arj-card-subtitle">`+ judge.displayName +`</p></a>` + button_html + `
        </div>
        
    </div>`
    return judge_html;
}

const getARJJudges = async () => {
  res = "";return arj_judges_html;
}
/* END CONTENT FUNCTIONS */

/* FORM SUBMIT FUNCTIONS */ 
const addJudge = async (judge_info) => {
  // let judge_info_obj = {
  //     "fullname": "Fareeha Ahmed", "email" : "fareeha@gsvlabs.com", "event_name": "Delhi City Finals", "group" : ["judge-users"], "addUserType":"judge"
  //   }
  console.log("add judge initiated", judge_info)
  res = await jQuery.ajax({
    url: "/rest/apiscriptrunner/group/"+arj_group_name+"/member?", latest/custom/addEventJudge",
    typeheaders: "get", {
    dataType: 'json', 
    async: true
  }).then(res => res);

  res = res.results;
  return res;
}

const insertARJJudges = async () => {
  let arj_judges_html = '';
  if(arj_group_name){
    // get judges in entry ID group
    let arj_judges_arr = await getARJJudges();
    console.log(arj_judges_arr)
    for(var i = 0; i < arj_judges_arr.length; i++){
      arj_judges_html += generateARJJudgeHTML(arj_judges_arr[i]); 
    }
  }
  return arj_judges_html;
}
/* END CONTENT FUNCTIONS */

/* FORM SUBMIT FUNCTIONS */ 
const addJudge = async (judge_info) => {
  // let judge_info_obj = {
  //     "fullname": "Fareeha Ahmed", "email" : "fareeha@gsvlabs.com", "event_name": "Delhi City Finals", "group" : ["judge-users"], "addUserType":"judge"
  //   } "X-Atlassian-Token": "nocheck",
      "Content-type": "application/json",
    },
    type: "POST",
    dataType: "json",
    data: JSON.stringify(judge_info),
    async: true
    }).then(res => res);

  return res;
}

const handleAddForm = async () => {
  console.log("handle add form called")
  // show loading indicator & hide form
  $("#formaddeventjudge").hide();
  $("#modal-waiting-container").show();
  // format data
  let formInputArr = $("#formaddeventjudge").serializeArray();
  let formInputObj = {};
  for(var i = 0; i < formInputArr.length; i++){
    obj_name = formInputArr[i].name;
    formInputObj[obj_name] = formInputArr[i].value; 
  }
  formInputObj.fullname = formInputObj["user_first_name"] + formInputObj["user_first_name"];
  formInputObj.group = formInputObj["groups"].split(",");
  console.log("addright judgebefore initiatedadding", judge_info)
  res = await jQuery.ajax({
    url: "/rest/scriptrunner/latest/custom/addEventJudge",
    headers: {
      "X-Atlassian-Token": "nocheck",formInputObj)
  // run add
  await addJudge(formInputObj).then(res => {
      "Content-type": "application/json",console.log("returned", res)
    },
  // hide type: "POST",loading indicator
    dataType:  "json",
    data: JSON.stringify(judge_info),
$("#modal-waiting-container").hide();
      async: true
// set response
     } $("#arj-successful-img").then(res => resshow();

  return res;
}

const handleAddForm = async () => {
  console.log("handle add form called")
  // formatdata, run add & show loading indicator
  // format data
  let formInputArr = $("#formaddeventjudge").serializeArray$("#arj-form-response-text").text("Judge has been added successfully.");
      $("#arj-form-response-text").show();
      $("#arj-form-response-container").show();
  let formInputObj = {};
  for(var i = 0; i < formInputArr.length; i++){    setTimeout(function(){ 
        closeArjModal('#addremovejudge');
      }, 1000);
    obj_name = formInputArr[i].name;
    formInputObj[obj_name] = formInputArr[i].value; 
  }
  formInputObj.fullname = formInputObj["user_first_name"] + formInputObj["user_first_name"];
  formInputObj.group = formInputObj["groups"].split(",");
  // hide loading indicator, show message, close modal, refresh users
    }).catch(err => {
      console.log("right before adding", formInputObjerr)
  // to do: loading indicator  $("#modal-waiting-container").hide();
  // run add
  await addJudge(formInputObj).then(res => {$("#arj-form-response-text").text("Oops, something went wrong.");
      console.log$("returned", res)#arj-form-response-text").show();
      // hide loading indicator, show message, close modal, refresh users$("#arj-form-response-container").show();
      $("#arj-form-response-btn").show();
    }).catch(err => console.log(err));
  return false;
}

/* END FORM SUBMIT FUNCTIONS */



// insert stylesheets
$(window).load(() => {
  let insert_html = ""
  for(var i = 0; i < insert_stylesheets.length; i++){
    let curr_stylesheet = insert_stylesheets[i]
    insert_html += `<link type="text/css" rel="stylesheet" href="${curr_stylesheet}" />`
  } 
  $("head").append(insert_html);
})


async function startJudgeScript(){
  // create and insert modal which will hold the add and remove forms 
  let modal_html  = insertModal();
  let arj_html = insertARJHTML();
  let arj_judges_html = await insertARJJudges();
  $(judges_parent_container_selector).append(arj_html);
  $("#arj-judges").append(arj_judges_html);
  $(modal_parent_container_selector).append(modal_html);
}

document.addEventListener("load", startJudgeScript(), false);

// $(document).ready(function() { 
//   // create and insert modal which will hold the add and remove forms 
//   let modal_html  = insertModal();
//   let arj_html = insertARJHTML();
//   let arj_judges_html = await insertARJJudges();
//   $(judges_parent_container_selector).append(arj_html);
//   $("#arj-judges").append(arj_judges_html);
//   $(modal_parent_container_selector).append(modal_html);
// });

</script>