<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Epic Downtime Utility</title>
<style>
body {
    font-family: 'Josefin Sans', sans-serif;
    background: url(./mountain-6191719.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    overflow-y: auto;
}
.wrapper {
    background: linear-gradient(45deg, #3459ff5e, #ffffff54, #3459ff5e);
    border-radius: 2rem;
    padding: 2rem;
    max-width: 1440px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1 {
    font-family: 'Poppins', sans-serif;
    color: red;
    font-size: 4rem;
    font-style: italic;
    letter-spacing: -0.4rem;
    margin: 0.5rem 0;
    text-align: center;
}
h2 {
    font-size: 2rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-shadow: 0px 1px 0px rgb(255 255 255 / 30%), 0px -1px 0px rgb(0 0 0);
    text-align: center;
    margin-top: 2rem;
}
#epicStatus h3 {
    margin-top: 0;
    color: #000;
}
#systemStatus {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
}
.system {
    background: #fff8;
    padding: 0.5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#timeInputs {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}
#buttons {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: #6465ed;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    min-width: 200px;
}
#subjectOutput {
    width: 100%;
}
#output {
    width: 100%;
    height: 300px;
    margin-top: 1rem;
    padding: 0.5rem;
    font-family: monospace;
    white-space: pre-wrap;
    box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Epic Downtime Utility</h1>
<!-- Epic Status -->
<div id="epicStatus">
  <h3 style="text-align: center;">Epic System Status</h3>
  <div class="epic-status-options">



  </div>
<div class="epic-status-options"><label><input checked="" name="EpicStatus" type="radio" value="UP"/> UP</label><label><input name="EpicStatus" type="radio" value="TRANSPARENT_PAUSE"/> TRANSPARENT PAUSE</label><label><input name="EpicStatus" type="radio" value="FULLY_DOWN"/> FULLY DOWN</label></div></div>
<h2>System Status</h2>
<div id="systemStatus">
<div class="system" data-name="WellSky">
<div>WellSky</div>
<label><input checked="" name="WellSky" type="radio" value="UP"/> UP</label>
<label><input name="WellSky" type="radio" value="DOWN"/> DOWN</label>
</div>
<div class="system" data-name="Data Innovation">
<div>Data Innovation</div>
<label><input checked="" name="Data Innovation" type="radio" value="UP"/> UP</label>
<label><input name="Data Innovation" type="radio" value="DOWN"/> DOWN</label>
</div>
<div class="system" data-name="Capsule">
<div>Capsule</div>
<label><input checked="" name="Capsule" type="radio" value="UP"/> UP</label>
<label><input name="Capsule" type="radio" value="DOWN"/> DOWN</label>
</div>
<div class="system" data-name="Onbase">
<div>Onbase</div>
<label><input checked="" name="Onbase" type="radio" value="UP"/> UP</label>
<label><input name="Onbase" type="radio" value="DOWN"/> DOWN</label>
</div>
<div class="system" data-name="Forward Advantage">
<div>Forward Advantage</div>
<label><input checked="" name="Forward Advantage" type="radio" value="UP"/> UP</label>
<label><input name="Forward Advantage" type="radio" value="DOWN"/> DOWN</label>
</div>
<div class="system" data-name="Orpheus">
<div>Orpheus</div>
<label><input checked="" name="Orpheus" type="radio" value="UP"/> UP</label>
<label><input name="Orpheus" type="radio" value="DOWN"/> DOWN</label>
</div>
<div class="system" data-name="Cloverleaf">
<div>Cloverleaf</div>
<label><input checked="" name="Cloverleaf" type="radio" value="UP"/> UP</label>
<label><input name="Cloverleaf" type="radio" value="DOWN"/> DOWN</label>
</div>
</div>
<div id="timeInputs">
<label>Downtime Start: <input id="startTime" type="text" value="3:00am"/></label>
<label>Downtime End: <input id="endTime" type="text" value="3:30am"/></label>
</div>
<div id="buttons">
<button id="reminderBtn">Downtime Reminder</button><button id="statusBtn">Third party status message</button><button id="completeBtn">Downtime Complete</button></div>
<label for="subjectOutput">Subject:</label><textarea id="subjectOutput" oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'" readonly="True" style="overflow:hidden; resize:none;"></textarea><textarea id="output" readonly=""></textarea>
<script>
// Systems data
const systems = [
  {
    name: "WellSky",
    upMsg: "Transfusion Medicine (Wellsky) is Up and Online",
    downMsg: "Transfusion Medicine (Wellsky) is down. Use downtime processes for blood product administration. Ordering via Epic is not impacted."
  },
  {
    name: "Data Innovation",
    upMsg: "Laboratory Specimen Reporting (Data Innovations) is Up and Online",
    downMsg: "Laboratory Specimen Reporting (Data Innovations) is down. Expect slower turnaround times for lab result reporting."
  },
  {
    name: "Capsule",
    upMsg: "Integrated medical devices (Capsule) are Up and Online",
    downMsg: "Integrated medical devices (Capsule) such as vital signs monitors, dialysis machines, CRRT machines, ventilators, anesthetic gas machines, patient central station systems, aortic balloon pumps etc. may not receive the most up to date information from Epic."
  },
  {
    name: "Onbase",
    upMsg: "Document retrieval and scanning in Media Manager are Up and Online",
    downMsg: "Document retrieval and scanning in Media Manager is down. Clinical users and health records will be impacted."
  },
  {
    name: "Forward Advantage",
    upMsg: "Faxing via Epic is Up and Online",
    downMsg: "Faxing via Epic is delayed and will be queued and sent when services are restored."
  },
  {
    name: "Orpheus",
    upMsg: "Endoscopy images (Orpheus) via Epic is Up and Online",
    downMsg: "New endoscopy images (Orpheus) will not be available in Epic for resulting. Images will upload once Orpheus is restored."
  },
  {
    name: "Cloverleaf",
    upMsg: "Results and orders to Epic from external systems are flowing and updating properly.",
    downMsg: "Results and orders to Epic from external systems will not be updated until services are restored.\nExamples of external systems include:\n- Ontario Health services such as OLIS, eCHN, and Clinical Viewer\n- Local site applications such as PACS, pharmacy applications, and dietary systems."
  }
];

const output = document.getElementById('output');

function getSelectedRadio(groupName) {
  const radios = document.getElementsByName(groupName);
  for (const r of radios) {
    if (r.checked) return r.value;
  }
  return null;
}

function analyzeThirdPartyStatus() {
  let allUp = true;
  let allDown = true;
  for (const s of systems) {
    const radios = document.getElementsByName(s.name);
    let status = "UP";
    for (const r of radios) {
      if (r.checked && r.value === "DOWN") {
        status = "DOWN";
        break;
      }
    }
    if (status !== "UP") {
      allUp = false;
    }
    if (status !== "DOWN") {
      allDown = false;
    }
  }
  if (allDown) return "ALL_DOWN";
  if (allUp) return "ALL_UP";
  return "SOME_DOWN";
}

// "Third party status message"
document.getElementById('statusBtn').addEventListener('click', () => {
  const epicStatus = getSelectedRadio('EpicStatus');
  const start = document.getElementById('startTime').value;
  const end = document.getElementById('endTime').value;

  let message = "Planned Service Interruption Update\n\n";

  if (epicStatus === 'TRANSPARENT_PAUSE') {
    message += `Epic will be paused for up to 5 minutes between ${start} and ${end}.\n`;
  } else if (epicStatus === 'FULLY_DOWN') {
    message += `Epic is down. Please leverage your SRO during this time.\n`;
  } else if (epicStatus === 'UP') {
    message += `Epic is Up and Available.\n`;
  } else {
    message += `A reminder that Epic will be down during this time.\n`;
  }

  if (message.startsWith("Subject: ")) {
    const subjectEnd = message.indexOf("\n");
    if (subjectEnd !== -1) {
        subjectOutput.value = message.substring(8, subjectEnd).trim();
        output.value = message.substring(subjectEnd + 1).trim();
    } else {
        subjectOutput.value = message.substring(8).trim();
        output.value = "";
    }
} else {
    subjectOutput.value = "";
    output.value = message;
}

  for (const s of systems) {
    const radios = document.getElementsByName(s.name);
    let status = "UP";
    for (const r of radios) {
      if (r.checked && r.value === "DOWN") {
        status = "DOWN";
        break;
      }
    }
    output.value += "- " + (status === "UP" ? s.upMsg : s.downMsg) + "\n";
  }
});

// "Downtime Reminder"
document.getElementById('reminderBtn').addEventListener('click', () => {
  const start = document.getElementById('startTime').value;
  const end = document.getElementById('endTime').value;
  const thirdPartyStatus = analyzeThirdPartyStatus();
  const epicStatus = getSelectedRadio('EpicStatus');

  if (thirdPartyStatus === 'ALL_UP' && epicStatus === 'UP') {
    output.value = "Nothing is down. Please select third party or Epic to be down.";
    return;
  }

  const header = "Reminder: Planned Service Interruption\n\n";
  let message = header;

  if (epicStatus === 'TRANSPARENT_PAUSE') {
    message += `A reminder that Epic will be paused for up to 5 minutes between ${start} and ${end}.\n`;
  } else if (epicStatus === 'FULLY_DOWN') {
    message += `A reminder that Epic will be down. Please leverage your SRO during this time.\n`;
  } else if (epicStatus === 'UP') {
    message += `A reminder that Epic will be Up and Available between ${start} and ${end}.\n`;
  } else {
    message += `A reminder that Epic will be down between ${start} and ${end}.\n`;
  }

  // Handle the third-party impact message
  if (thirdPartyStatus === 'ALL_DOWN') {
    message += "All Third Party Systems will be down.\n";
  } else if (thirdPartyStatus === 'SOME_DOWN') {
    message += "Some third-party systems will be down.\n";
  } else {
    message += "All third-party systems will be up.\n";
  }

  if (message.startsWith("Subject: ")) {
    const subjectEnd = message.indexOf("\n");
    if (subjectEnd !== -1) {
        subjectOutput.value = message.substring(8, subjectEnd).trim();
        output.value = message.substring(subjectEnd + 1).trim();
    } else {
        subjectOutput.value = message.substring(8).trim();
        output.value = "";
    }
} else {
    subjectOutput.value = "";
    output.value = message;
}
});


// "Downtime Complete"
document.getElementById('completeBtn').addEventListener('click', () => {
  const end = document.getElementById('endTime').value;
  const epicStatus = getSelectedRadio('EpicStatus');
  const thirdPartyStatus = analyzeThirdPartyStatus();

  if (epicStatus !== 'UP' || thirdPartyStatus !== 'ALL_UP') {
    output.value = "Not everything is up. Please select all systems to be up.";
  } else {
    subjectOutput.value = "Planned Service Interruption Completed.";
    output.value = `Please note that Epic and third-party systems are now available as of ${end}. An Email Notification will be released shortly.`;
  }
});
</script>
</div>
</body>
</html>