From 7cf0ed00c67f0b23e05ec63b5c5bcd87f9d694d6 Mon Sep 17 00:00:00 2001
From: MoskalykA <100430077+MoskalykA@users.noreply.github.com>
Date: Mon, 6 Feb 2023 13:39:56 +0100
Subject: [PATCH] style(esx_context): run prettier

---
 [core]/esx_context/index.html | 899 +++++++++++++++++-----------------
 1 file changed, 459 insertions(+), 440 deletions(-)
diff --git a/[core]/esx_context/index.html b/[core]/esx_context/index.html
index cba395b1..67670963 100644
--- a/[core]/esx_context/index.html
+++ b/[core]/esx_context/index.html
@@ -1,443 +1,462 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-	<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
-
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>ESX Context HUD</title>
-
-	<style type="text/css">
-		:root {
-			--item-main: #242424;
-			--item-unselectable: #161616;
-			--item-hover: #404040;
-			--item-disabled: #393939;
-		}
-
-		html,
-		body {
-			margin: 0;
-			padding: 0;
-			outline: none;
-			border: none;
-		}
-
-		body {
-			position: absolute;
-			top: 0px;
-			left: 0px;
-			width: 100%;
-			height: 100%;
-
-			display: none;
-		}
-
-		#container {
-			position: absolute;
-			width: 280px;
-			max-height: 50%;
-			height: auto;
-			display: flex;
-			flex-direction: column;
-			gap: 10px;
-			overflow-y: auto;
-			padding-right: 5px;
-		}
-
-		.center {
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-		}
-
-		.left {
-			top: 50%;
-			left: 25%;
-			transform: translate(-50%, -50%);
-		}
-
-		.right {
-			top: 50%;
-			left: 75%;
-			transform: translate(-50%, -50%);
-		}
-
-		.item {
-			display: grid;
-			grid-template-columns: 30px calc(100% - 30px);
-			padding: 15px 10px;
-			border-radius: 5px;
-			background: var(--item-main);
-		}
-
-		.item:hover {
-			background: var(--item-hover);
-		}
-
-		.item>i {
-			text-align: center;
-		}
-
-		.item>div {
-			display: flex;
-			flex-direction: column;
-			gap: 5px;
-		}
-
-		.item>div>i {
-			opacity: 0.5;
-		}
-
-		.input {
-			display: flex;
-			flex-direction: column;
-			gap: 5px;
-			padding: 15px 10px;
-			border-radius: 5px;
-			background: var(--item-main);
-		}
-
-		.input:hover {
-			background: var(--item-hover);
-		}
-
-		input {
-			position: relative;
-			width: auto;
-			padding: 5px;
-			margin: 0;
-			border: none;
-			border: none;
-			background: transparent;
-		}
-
-		.unselectable {
-			background: var(--item-unselectable);
-			pointer-events: none;
-		}
-
-		.disabled {
-			pointer-events: none;
-			background: var(--item-disabled);
-		}
-
-		* {
-			color: white;
-			font-family: Arial;
-			user-select: none;
-			font-size: 14px;
-		}
-
-		::-webkit-scrollbar {
-			width: 5px;
-		}
-
-		::-webkit-scrollbar-thumb {
-			background: rgb(20, 20, 20);
-			border-radius: 5px;
-		}
-
-		::-webkit-scrollbar-thumb:hover {
-			background: rgb(30, 30, 30);
-		}
-
-		.container {
-			display: flex;
-			position: relative;
-			cursor: pointer;
-			font-size: 14px;
-			-webkit-user-select: none;
-			-moz-user-select: none;
-			-ms-user-select: none;
-			user-select: none;
-			flex-direction: row-reverse;
-			align-items: center;
-			justify-content: flex-end;
-			gap: 5px;
-		}
-
-		/* Hide the browser's default checkbox */
-		.container input {
-			position: relative;
-			opacity: 0;
-			cursor: pointer;
-			height: 0;
-			width: 0;
-		}
-
-		/* Create a custom checkbox */
-		.checkmark {
-			position: relative;
-			height: 10px;
-			width: 10px;
-			border-radius: 8px;
-			background-color: #eee;
-		}
-
-		/* On mouse-over, add a grey background color */
-		.container:hover input~.checkmark {
-			background-color: #ccc;
-		}
-
-		/* When the checkbox is checked, add a blue background */
-		.container input:checked~.checkmark {
-			background-color: #2196F3;
-		}
-
-		/* Create the checkmark/indicator (hidden when not checked) */
-		.checkmark:after {
-			content: "";
-			position: relative;
-			display: none;
-		}
-
-		/* Show the checkmark when checked */
-		.container input:checked~.checkmark:after {
-			display: block;
-		}
-	</style>
-</head>
-
-<body>
-
-	<div id="container" class="right">
-		<div class="item unselectable">
-			<i class="fas fa-info-circle"></i>
-			<div>
-				<b>Unselectable Item</b>
-				<i>Testing, testing a description here.</i>
-			</div>
-		</div>
-		<div class="item disabled">
-			<i class="fas fa-times"></i>
-			<div>
-				<b>Disabled Item</b>
-				<i>Testing, testing a description here.</i>
-			</div>
-		</div>
-		<div class="item">
-			<i class="fas fa-check"></i>
-			<div>
-				<b>Item</b>
-				<i>Testing, testing a description here. Generic words to force overflow.</i>
-			</div>
-		</div>
-	</div>
-
-	<script type="text/javascript">
-		const container = document.getElementById("container")
-
-		const CreateElement = (tag = "div", className = "", parent) => {
-			const e = document.createElement(tag)
-			e.className = className
-
-			if (parent) {
-				parent.append(e)
-			}
-
-			return e
-		}
-
-		function Open(eles, position = "right") {
-			container.innerHTML = ""
-			container.className = position
-
-			for (let i = 0; i < eles.length; i++) {
-				let ele = eles[i]
-				let item = CreateElement("div", "item", container)
-
-				let icon = CreateElement("i", ele.icon, item)
-				let div = CreateElement("div", "", item)
-
-				let title = CreateElement("b", "", div)
-				title.innerHTML = ele.title
-
-				if (ele.description) {
-					let desc = CreateElement("i", "", div)
-					desc.innerHTML = ele.description || ""
-				}
-
-				if (ele.input) {
-					if (ele.inputType == "radio") {
-						for (let j = 0; j < ele.inputValues.length; j++) {
-							let v = ele.inputValues[j]
-							let container = CreateElement("label", "container", div)
-							container.innerHTML = v.text
-
-							let input = CreateElement("INPUT", "", container)
-							input.type = "radio"
-							input.name = i + 1
-							input.checked = (ele.inputValue || ele.inputPlaceholder || -1) == v.value
-
-							let span = CreateElement("SPAN", "checkmark", container)
-
-							input.onchange = function () {
-								$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
-									index: i + 1,
-									value: v.value
-								}))
-							}
-						}
-					} else {
-						let input = CreateElement("input", "", div)
-						input.type = ele.inputType
-
-						if (ele.inputValue) {
-							input.value = ele.inputValue
-						}
-
-						if (ele.inputPlaceholder) {
-							input.placeholder = ele.inputPlaceholder
-						}
-
-						switch (ele.inputType) {
-							case "number":
-								if (ele.inputMin) input.min = ele.inputMin;
-								if (ele.inputMax) input.max = ele.inputMax;
-
-								input.onchange = function () {
-									let v = Number(input.value)
-
-									if (ele.inputMin) {
-										v = Math.max(ele.inputMin, v)
-									}
-
-									if (ele.inputMax) {
-										v = Math.min(ele.inputMax, v)
-									}
-
-									input.value = v
-
-									$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
-										index: i + 1,
-										value: v
-									}))
-								}
-								break
-
-							case "text":
-								input.onchange = function () {
-									$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
-										index: i + 1,
-										value: input.value
-									}))
-								}
-								break
-						}
-					}
-				} else {
-					if (ele.disabled) {
-						item.className += " disabled"
-					} else if (ele.unselectable) {
-						item.className += " unselectable"
-					} else if (!ele.input) {
-						item.onclick = function () {
-							$.post(`https://${GetParentResourceName()}/selected`, JSON.stringify({
-								index: i + 1
-							}))
-						}
-					}
-				}
-			}
-
-			document.body.style.display = "block"
-		}
-
-		function Closed() {
-			document.body.style.display = "none"
-		}
-
-		function Close() {
-			$.post(`https://${GetParentResourceName()}/closed`,(retVal)=>{
-				if(retVal){
-					Closed()
-				}
-			})
-		}
-
-		window.addEventListener("message", (e) => {
-			let data = e.data
-
-			if (!data.func || !window[data.func]) {
-				return
-			}
-
-			window[data.func](...data.args)
-		})
-
-		window.addEventListener("keydown", (e) => {
-			if (e.key == "Escape" || e.key == "Backspace") {
-				if (e.target.tagName.toLowerCase() == "input") {
-					return
-				}
-
-				Close()
-			}
-		})
-
-		// Open([
-		// 	{
-		// 		unselectable:true,
-		// 		icon:"fas fa-info-circle",
-		// 		title:"Unselectable Item (Header/Label?)",
-		// 	},
-		// 	{
-		// 		icon:"fas fa-check",
-		// 		title:"Item A",
-		// 		description:"Some description here. Add some words to make the text overflow."
-		// 	},
-		// 	{
-		// 		disabled:true,
-		// 		icon:"fas fa-times",
-		// 		title:"Disabled Item",
-		// 		description:"Some description here. Add some words to make the text overflow."
-		// 	},
-		// 	{
-		// 		icon:"fas fa-check",
-		// 		title:"Item B",
-		// 		description:"Some description here. Add some words to make the text overflow."
-		// 	},
-		// 	{
-		// 		input:true,
-		// 		icon:"fas fa-times",
-		// 		title:"Input Text",
-		// 		inputType:"text",
-		// 		inputPlaceholder:"Placeholder..."
-		// 	},
-		// 	{
-		// 		input:true,
-		// 		icon:"",
-		// 		title:"Input Number",
-		// 		inputType:"number",
-		// 		inputPlaceholder:"Placeholder...",
-		// 		inputValue:0,
-		// 		inputMin:0,
-		// 		inputMax:50
-		// 	},
-		// 	{
-		// 		input:true,
-		// 		icon:"",
-		// 		title:"Input Radio",
-		// 		inputType:"radio",
-		// 		inputPlaceholder:"turbocharger",
-		// 		inputValue:"supercharger",
-		// 		inputValues:[
-		// 			{
-		// 				value:"turbocharger",
-		// 				title:"Turbocharger"
-		// 			},
-		// 			{
-		// 				value:"supercharger",
-		// 				title:"Supercharger"
-		// 			},
-		// 		]
-		// 	}
-		// ])
-	</script>
-</body>
-
+  <head>
+    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+    />
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ESX Context HUD</title>
+
+    <style type="text/css">
+      :root {
+        --item-main: #242424;
+        --item-unselectable: #161616;
+        --item-hover: #404040;
+        --item-disabled: #393939;
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        outline: none;
+        border: none;
+      }
+
+      body {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+
+        display: none;
+      }
+
+      #container {
+        position: absolute;
+        width: 280px;
+        max-height: 50%;
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        overflow-y: auto;
+        padding-right: 5px;
+      }
+
+      .center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .left {
+        top: 50%;
+        left: 25%;
+        transform: translate(-50%, -50%);
+      }
+
+      .right {
+        top: 50%;
+        left: 75%;
+        transform: translate(-50%, -50%);
+      }
+
+      .item {
+        display: grid;
+        grid-template-columns: 30px calc(100% - 30px);
+        padding: 15px 10px;
+        border-radius: 5px;
+        background: var(--item-main);
+      }
+
+      .item:hover {
+        background: var(--item-hover);
+      }
+
+      .item > i {
+        text-align: center;
+      }
+
+      .item > div {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+
+      .item > div > i {
+        opacity: 0.5;
+      }
+
+      .input {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        padding: 15px 10px;
+        border-radius: 5px;
+        background: var(--item-main);
+      }
+
+      .input:hover {
+        background: var(--item-hover);
+      }
+
+      input {
+        position: relative;
+        width: auto;
+        padding: 5px;
+        margin: 0;
+        border: none;
+        border: none;
+        background: transparent;
+      }
+
+      .unselectable {
+        background: var(--item-unselectable);
+        pointer-events: none;
+      }
+
+      .disabled {
+        pointer-events: none;
+        background: var(--item-disabled);
+      }
+
+      * {
+        color: white;
+        font-family: Arial;
+        user-select: none;
+        font-size: 14px;
+      }
+
+      ::-webkit-scrollbar {
+        width: 5px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: rgb(20, 20, 20);
+        border-radius: 5px;
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background: rgb(30, 30, 30);
+      }
+
+      .container {
+        display: flex;
+        position: relative;
+        cursor: pointer;
+        font-size: 14px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        flex-direction: row-reverse;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 5px;
+      }
+
+      /* Hide the browser's default checkbox */
+      .container input {
+        position: relative;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+      }
+
+      /* Create a custom checkbox */
+      .checkmark {
+        position: relative;
+        height: 10px;
+        width: 10px;
+        border-radius: 8px;
+        background-color: #eee;
+      }
+
+      /* On mouse-over, add a grey background color */
+      .container:hover input ~ .checkmark {
+        background-color: #ccc;
+      }
+
+      /* When the checkbox is checked, add a blue background */
+      .container input:checked ~ .checkmark {
+        background-color: #2196f3;
+      }
+
+      /* Create the checkmark/indicator (hidden when not checked) */
+      .checkmark:after {
+        content: "";
+        position: relative;
+        display: none;
+      }
+
+      /* Show the checkmark when checked */
+      .container input:checked ~ .checkmark:after {
+        display: block;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container" class="right">
+      <div class="item unselectable">
+        <i class="fas fa-info-circle"></i>
+        <div>
+          <b>Unselectable Item</b>
+          <i>Testing, testing a description here.</i>
+        </div>
+      </div>
+      <div class="item disabled">
+        <i class="fas fa-times"></i>
+        <div>
+          <b>Disabled Item</b>
+          <i>Testing, testing a description here.</i>
+        </div>
+      </div>
+      <div class="item">
+        <i class="fas fa-check"></i>
+        <div>
+          <b>Item</b>
+          <i
+            >Testing, testing a description here. Generic words to force
+            overflow.</i
+          >
+        </div>
+      </div>
+    </div>
+
+    <script type="text/javascript">
+      const container = document.getElementById("container");
+
+      const CreateElement = (tag = "div", className = "", parent) => {
+        const e = document.createElement(tag);
+        e.className = className;
+
+        if (parent) {
+          parent.append(e);
+        }
+
+        return e;
+      };
+
+      function Open(eles, position = "right") {
+        container.innerHTML = "";
+        container.className = position;
+
+        for (let i = 0; i < eles.length; i++) {
+          let ele = eles[i];
+          let item = CreateElement("div", "item", container);
+
+          let icon = CreateElement("i", ele.icon, item);
+          let div = CreateElement("div", "", item);
+
+          let title = CreateElement("b", "", div);
+          title.innerHTML = ele.title;
+
+          if (ele.description) {
+            let desc = CreateElement("i", "", div);
+            desc.innerHTML = ele.description || "";
+          }
+
+          if (ele.input) {
+            if (ele.inputType == "radio") {
+              for (let j = 0; j < ele.inputValues.length; j++) {
+                let v = ele.inputValues[j];
+                let container = CreateElement("label", "container", div);
+                container.innerHTML = v.text;
+
+                let input = CreateElement("INPUT", "", container);
+                input.type = "radio";
+                input.name = i + 1;
+                input.checked =
+                  (ele.inputValue || ele.inputPlaceholder || -1) == v.value;
+
+                let span = CreateElement("SPAN", "checkmark", container);
+
+                input.onchange = function () {
+                  $.post(
+                    `https://${GetParentResourceName()}/changed`,
+                    JSON.stringify({
+                      index: i + 1,
+                      value: v.value,
+                    })
+                  );
+                };
+              }
+            } else {
+              let input = CreateElement("input", "", div);
+              input.type = ele.inputType;
+
+              if (ele.inputValue) {
+                input.value = ele.inputValue;
+              }
+
+              if (ele.inputPlaceholder) {
+                input.placeholder = ele.inputPlaceholder;
+              }
+
+              switch (ele.inputType) {
+                case "number":
+                  if (ele.inputMin) input.min = ele.inputMin;
+                  if (ele.inputMax) input.max = ele.inputMax;
+
+                  input.onchange = function () {
+                    let v = Number(input.value);
+
+                    if (ele.inputMin) {
+                      v = Math.max(ele.inputMin, v);
+                    }
+
+                    if (ele.inputMax) {
+                      v = Math.min(ele.inputMax, v);
+                    }
+
+                    input.value = v;
+
+                    $.post(
+                      `https://${GetParentResourceName()}/changed`,
+                      JSON.stringify({
+                        index: i + 1,
+                        value: v,
+                      })
+                    );
+                  };
+                  break;
+
+                case "text":
+                  input.onchange = function () {
+                    $.post(
+                      `https://${GetParentResourceName()}/changed`,
+                      JSON.stringify({
+                        index: i + 1,
+                        value: input.value,
+                      })
+                    );
+                  };
+                  break;
+              }
+            }
+          } else {
+            if (ele.disabled) {
+              item.className += " disabled";
+            } else if (ele.unselectable) {
+              item.className += " unselectable";
+            } else if (!ele.input) {
+              item.onclick = function () {
+                $.post(
+                  `https://${GetParentResourceName()}/selected`,
+                  JSON.stringify({
+                    index: i + 1,
+                  })
+                );
+              };
+            }
+          }
+        }
+
+        document.body.style.display = "block";
+      }
+
+      function Closed() {
+        document.body.style.display = "none";
+      }
+
+      function Close() {
+        $.post(`https://${GetParentResourceName()}/closed`, (retVal) => {
+          if (retVal) {
+            Closed();
+          }
+        });
+      }
+
+      window.addEventListener("message", (e) => {
+        let data = e.data;
+
+        if (!data.func || !window[data.func]) {
+          return;
+        }
+
+        window[data.func](...data.args);
+      });
+
+      window.addEventListener("keydown", (e) => {
+        if (e.key == "Escape" || e.key == "Backspace") {
+          if (e.target.tagName.toLowerCase() == "input") {
+            return;
+          }
+
+          Close();
+        }
+      });
+
+      // Open([
+      // 	{
+      // 		unselectable:true,
+      // 		icon:"fas fa-info-circle",
+      // 		title:"Unselectable Item (Header/Label?)",
+      // 	},
+      // 	{
+      // 		icon:"fas fa-check",
+      // 		title:"Item A",
+      // 		description:"Some description here. Add some words to make the text overflow."
+      // 	},
+      // 	{
+      // 		disabled:true,
+      // 		icon:"fas fa-times",
+      // 		title:"Disabled Item",
+      // 		description:"Some description here. Add some words to make the text overflow."
+      // 	},
+      // 	{
+      // 		icon:"fas fa-check",
+      // 		title:"Item B",
+      // 		description:"Some description here. Add some words to make the text overflow."
+      // 	},
+      // 	{
+      // 		input:true,
+      // 		icon:"fas fa-times",
+      // 		title:"Input Text",
+      // 		inputType:"text",
+      // 		inputPlaceholder:"Placeholder..."
+      // 	},
+      // 	{
+      // 		input:true,
+      // 		icon:"",
+      // 		title:"Input Number",
+      // 		inputType:"number",
+      // 		inputPlaceholder:"Placeholder...",
+      // 		inputValue:0,
+      // 		inputMin:0,
+      // 		inputMax:50
+      // 	},
+      // 	{
+      // 		input:true,
+      // 		icon:"",
+      // 		title:"Input Radio",
+      // 		inputType:"radio",
+      // 		inputPlaceholder:"turbocharger",
+      // 		inputValue:"supercharger",
+      // 		inputValues:[
+      // 			{
+      // 				value:"turbocharger",
+      // 				title:"Turbocharger"
+      // 			},
+      // 			{
+      // 				value:"supercharger",
+      // 				title:"Supercharger"
+      // 			},
+      // 		]
+      // 	}
+      // ])
+    </script>
+  </body>
 </html>
