diff --git a/basicswap/static/css/style.css b/basicswap/static/css/style.css index cf9f1b6..d650ab3 100644 --- a/basicswap/static/css/style.css +++ b/basicswap/static/css/style.css @@ -16,16 +16,16 @@ .floatright { - position: fixed; - top: 2em; - right: 2em; + position:fixed; + top:10px; + right:18px; margin: 0; - z-index: 50; + width:calc(33.33% - 25px); } .error { - border: 1px solid red; + background:#ff5b5b; } .error_msg diff --git a/basicswap/static/images/coins/Firo-20.png b/basicswap/static/images/coins/Firo-20.png new file mode 100644 index 0000000..82f8130 Binary files /dev/null and b/basicswap/static/images/coins/Firo-20.png differ diff --git a/basicswap/static/images/coins/Firo.png b/basicswap/static/images/coins/Firo.png new file mode 100644 index 0000000..cd317dd Binary files /dev/null and b/basicswap/static/images/coins/Firo.png differ diff --git a/basicswap/static/images/coins/Veil-20.png b/basicswap/static/images/coins/Veil-20.png new file mode 100644 index 0000000..1c9933d Binary files /dev/null and b/basicswap/static/images/coins/Veil-20.png differ diff --git a/basicswap/static/images/coins/Veil.png b/basicswap/static/images/coins/Veil.png new file mode 100644 index 0000000..858664d Binary files /dev/null and b/basicswap/static/images/coins/Veil.png differ diff --git a/basicswap/static/js/chart.js b/basicswap/static/js/chart.js new file mode 100644 index 0000000..c95358a --- /dev/null +++ b/basicswap/static/js/chart.js @@ -0,0 +1,19768 @@ +/** + * Skipped minification because the original files appears to be already minified. + * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files + */ +var CryptoCharts = (function (t) { + var e = {}; + function i(a) { + if (e[a]) return e[a].exports; + var s = (e[a] = { i: a, l: !1, exports: {} }); + return t[a].call(s.exports, s, s.exports, i), (s.l = !0), s.exports; + } + return ( + (i.m = t), + (i.c = e), + (i.d = function (t, e, a) { + i.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: a }); + }), + (i.r = function (t) { + "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 }); + }), + (i.t = function (t, e) { + if ((1 & e && (t = i(t)), 8 & e)) return t; + if (4 & e && "object" == typeof t && t && t.__esModule) return t; + var a = Object.create(null); + if ((i.r(a), Object.defineProperty(a, "default", { enumerable: !0, value: t }), 2 & e && "string" != typeof t)) + for (var s in t) + i.d( + a, + s, + function (e) { + return t[e]; + }.bind(null, s) + ); + return a; + }), + (i.n = function (t) { + var e = + t && t.__esModule + ? function () { + return t.default; + } + : function () { + return t; + }; + return i.d(e, "a", e), e; + }), + (i.o = function (t, e) { + return Object.prototype.hasOwnProperty.call(t, e); + }), + (i.p = ""), + i((i.s = 106)) + ); +})([ + function (t, e, i) { + (function (e) { + var i = "object", + a = function (t) { + return t && t.Math == Math && t; + }; + t.exports = a(typeof globalThis == i && globalThis) || a(typeof window == i && window) || a(typeof self == i && self) || a(typeof e == i && e) || Function("return this")(); + }.call(this, i(23))); + }, + function (t, e, i) { + var a = i(0), + s = i(16), + n = i(40), + r = i(59), + o = a.Symbol, + l = s("wks"); + t.exports = function (t) { + return l[t] || (l[t] = (r && o[t]) || (r ? o : n)("Symbol." + t)); + }; + }, + function (t, e, i) { + "use strict"; + (function (t, a) { + /*! + * ApexCharts v3.8.0 + * (c) 2018-2019 Juned Chhipa + * Released under the MIT License. + */ + function s(t) { + return (s = + "function" == typeof Symbol && "symbol" == typeof Symbol.iterator + ? function (t) { + return typeof t; + } + : function (t) { + return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t; + })(t); + } + function n(t, e) { + if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function"); + } + function r(t, e) { + for (var i = 0; i < e.length; i++) { + var a = e[i]; + (a.enumerable = a.enumerable || !1), (a.configurable = !0), "value" in a && (a.writable = !0), Object.defineProperty(t, a.key, a); + } + } + function o(t, e, i) { + return e && r(t.prototype, e), i && r(t, i), t; + } + function l(t, e, i) { + return e in t ? Object.defineProperty(t, e, { value: i, enumerable: !0, configurable: !0, writable: !0 }) : (t[e] = i), t; + } + function h(t) { + for (var e = 1; e < arguments.length; e++) { + var i = null != arguments[e] ? arguments[e] : {}, + a = Object.keys(i); + "function" == typeof Object.getOwnPropertySymbols && + (a = a.concat( + Object.getOwnPropertySymbols(i).filter(function (t) { + return Object.getOwnPropertyDescriptor(i, t).enumerable; + }) + )), + a.forEach(function (e) { + l(t, e, i[e]); + }); + } + return t; + } + function c(t, e) { + if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); + (t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } })), e && u(t, e); + } + function d(t) { + return (d = Object.setPrototypeOf + ? Object.getPrototypeOf + : function (t) { + return t.__proto__ || Object.getPrototypeOf(t); + })(t); + } + function u(t, e) { + return (u = + Object.setPrototypeOf || + function (t, e) { + return (t.__proto__ = e), t; + })(t, e); + } + function f(t, e) { + return !e || ("object" != typeof e && "function" != typeof e) + ? (function (t) { + if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + return t; + })(t) + : e; + } + function g(t) { + return ( + (function (t) { + if (Array.isArray(t)) { + for (var e = 0, i = new Array(t.length); e < t.length; e++) i[e] = t[e]; + return i; + } + })(t) || + (function (t) { + if (Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t)) return Array.from(t); + })(t) || + (function () { + throw new TypeError("Invalid attempt to spread non-iterable instance"); + })() + ); + } + var p = (function () { + function t() { + n(this, t); + } + return ( + o( + t, + [ + { + key: "shadeRGBColor", + value: function (t, e) { + var i = e.split(","), + a = t < 0 ? 0 : 255, + s = t < 0 ? -1 * t : t, + n = parseInt(i[0].slice(4)), + r = parseInt(i[1]), + o = parseInt(i[2]); + return "rgb(" + (Math.round((a - n) * s) + n) + "," + (Math.round((a - r) * s) + r) + "," + (Math.round((a - o) * s) + o) + ")"; + }, + }, + { + key: "shadeHexColor", + value: function (t, e) { + var i = parseInt(e.slice(1), 16), + a = t < 0 ? 0 : 255, + s = t < 0 ? -1 * t : t, + n = i >> 16, + r = (i >> 8) & 255, + o = 255 & i; + return "#" + (16777216 + 65536 * (Math.round((a - n) * s) + n) + 256 * (Math.round((a - r) * s) + r) + (Math.round((a - o) * s) + o)).toString(16).slice(1); + }, + }, + { + key: "shadeColor", + value: function (t, e) { + return e.length > 7 ? this.shadeRGBColor(t, e) : this.shadeHexColor(t, e); + }, + }, + ], + [ + { + key: "bind", + value: function (t, e) { + return function () { + return t.apply(e, arguments); + }; + }, + }, + { + key: "isObject", + value: function (t) { + return t && "object" === s(t) && !Array.isArray(t) && null != t; + }, + }, + { + key: "listToArray", + value: function (t) { + var e, + i = []; + for (e = 0; e < t.length; e++) i[e] = t[e]; + return i; + }, + }, + { + key: "extend", + value: function (t, e) { + var i = this; + "function" != typeof Object.assign && + (Object.assign = function (t) { + if (null == t) throw new TypeError("Cannot convert undefined or null to object"); + for (var e = Object(t), i = 1; i < arguments.length; i++) { + var a = arguments[i]; + if (null != a) for (var s in a) a.hasOwnProperty(s) && (e[s] = a[s]); + } + return e; + }); + var a = Object.assign({}, t); + return ( + this.isObject(t) && + this.isObject(e) && + Object.keys(e).forEach(function (s) { + i.isObject(e[s]) && s in t ? (a[s] = i.extend(t[s], e[s])) : Object.assign(a, l({}, s, e[s])); + }), + a + ); + }, + }, + { + key: "extendArray", + value: function (e, i) { + var a = []; + return ( + e.map(function (e) { + a.push(t.extend(i, e)); + }), + (e = a) + ); + }, + }, + { + key: "monthMod", + value: function (t) { + return t % 12; + }, + }, + { + key: "addProps", + value: function (t, e, i) { + "string" == typeof e && (e = e.split(".")), (t[e[0]] = t[e[0]] || {}); + var a = t[e[0]]; + return e.length > 1 ? (e.shift(), this.addProps(a, e, i)) : (t[e[0]] = i), t; + }, + }, + { + key: "clone", + value: function (t) { + if ("[object Array]" === Object.prototype.toString.call(t)) { + for (var e = [], i = 0; i < t.length; i++) e[i] = this.clone(t[i]); + return e; + } + if ("object" === s(t)) { + var a = {}; + for (var n in t) t.hasOwnProperty(n) && (a[n] = this.clone(t[n])); + return a; + } + return t; + }, + }, + { + key: "log10", + value: function (t) { + return Math.log(t) / Math.LN10; + }, + }, + { + key: "roundToBase10", + value: function (t) { + return Math.pow(10, Math.floor(Math.log10(t))); + }, + }, + { + key: "roundToBase", + value: function (t, e) { + return Math.pow(e, Math.floor(Math.log(t) / Math.log(e))); + }, + }, + { + key: "parseNumber", + value: function (t) { + return null === t ? t : parseFloat(t); + }, + }, + { + key: "noExponents", + value: function (t) { + var e = String(t).split(/[eE]/); + if (1 == e.length) return e[0]; + var i = "", + a = t < 0 ? "-" : "", + s = e[0].replace(".", ""), + n = Number(e[1]) + 1; + if (n < 0) { + for (i = a + "0."; n++; ) i += "0"; + return i + s.replace(/^\-/, ""); + } + for (n -= s.length; n--; ) i += "0"; + return s + i; + }, + }, + { + key: "getDimensions", + value: function (t) { + var e = getComputedStyle(t), + i = [], + a = t.clientHeight, + s = t.clientWidth; + return (a -= parseFloat(e.paddingTop) + parseFloat(e.paddingBottom)), (s -= parseFloat(e.paddingLeft) + parseFloat(e.paddingRight)), i.push(s), i.push(a), i; + }, + }, + { + key: "getBoundingClientRect", + value: function (t) { + var e = t.getBoundingClientRect(); + return { top: e.top, right: e.right, bottom: e.bottom, left: e.left, width: e.width, height: e.height, x: e.x, y: e.y }; + }, + }, + { + key: "hexToRgba", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "#999999", + e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0.6; + "#" !== t.substring(0, 1) && (t = "#999999"); + var i = t.replace("#", ""); + i = i.match(new RegExp("(.{" + i.length / 3 + "})", "g")); + for (var a = 0; a < i.length; a++) i[a] = parseInt(1 === i[a].length ? i[a] + i[a] : i[a], 16); + return void 0 !== e && i.push(e), "rgba(" + i.join(",") + ")"; + }, + }, + { + key: "getOpacityFromRGBA", + value: function (t) { + return (t = t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))[3]; + }, + }, + { + key: "rgb2hex", + value: function (t) { + return (t = t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)) && 4 === t.length + ? "#" + ("0" + parseInt(t[1], 10).toString(16)).slice(-2) + ("0" + parseInt(t[2], 10).toString(16)).slice(-2) + ("0" + parseInt(t[3], 10).toString(16)).slice(-2) + : ""; + }, + }, + { + key: "isColorHex", + value: function (t) { + return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t); + }, + }, + { + key: "polarToCartesian", + value: function (t, e, i, a) { + var s = ((a - 90) * Math.PI) / 180; + return { x: t + i * Math.cos(s), y: e + i * Math.sin(s) }; + }, + }, + { + key: "escapeString", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "x", + i = t.toString().slice(); + return (i = i.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, e)); + }, + }, + { + key: "negToZero", + value: function (t) { + return t < 0 ? 0 : t; + }, + }, + { + key: "moveIndexInArray", + value: function (t, e, i) { + if (i >= t.length) for (var a = i - t.length + 1; a--; ) t.push(void 0); + return t.splice(i, 0, t.splice(e, 1)[0]), t; + }, + }, + { + key: "extractNumber", + value: function (t) { + return parseFloat(t.replace(/[^\d\.]*/g, "")); + }, + }, + { + key: "randomString", + value: function (t) { + for (var e = "", i = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", a = 0; a < t; a++) e += i.charAt(Math.floor(Math.random() * i.length)); + return e; + }, + }, + { + key: "findAncestor", + value: function (t, e) { + for (; (t = t.parentElement) && !t.classList.contains(e); ); + return t; + }, + }, + { + key: "setELstyles", + value: function (t, e) { + for (var i in e) e.hasOwnProperty(i) && (t.style.key = e[i]); + }, + }, + { + key: "isNumber", + value: function (t) { + return !isNaN(t) && parseFloat(Number(t)) === t && !isNaN(parseInt(t, 10)); + }, + }, + { + key: "isFloat", + value: function (t) { + return Number(t) === t && t % 1 != 0; + }, + }, + { + key: "isSafari", + value: function () { + return /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + }, + }, + { + key: "isFirefox", + value: function () { + return navigator.userAgent.toLowerCase().indexOf("firefox") > -1; + }, + }, + { + key: "isIE11", + value: function () { + if (-1 !== window.navigator.userAgent.indexOf("MSIE") || window.navigator.appVersion.indexOf("Trident/") > -1) return !0; + }, + }, + { + key: "isIE", + value: function () { + var t = window.navigator.userAgent, + e = t.indexOf("MSIE "); + if (e > 0) return parseInt(t.substring(e + 5, t.indexOf(".", e)), 10); + if (t.indexOf("Trident/") > 0) { + var i = t.indexOf("rv:"); + return parseInt(t.substring(i + 3, t.indexOf(".", i)), 10); + } + var a = t.indexOf("Edge/"); + return a > 0 && parseInt(t.substring(a + 5, t.indexOf(".", a)), 10); + }, + }, + ] + ), + t + ); + })(), + x = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "getDefaultFilter", + value: function (t, e) { + var i = this.w; + t.unfilter(!0), + new window.SVG.Filter().size("120%", "180%", "-5%", "-40%"), + "none" !== i.config.states.normal.filter + ? this.applyFilter(t, e, i.config.states.normal.filter.type, i.config.states.normal.filter.value) + : i.config.chart.dropShadow.enabled && this.dropShadow(t, i.config.chart.dropShadow, e); + }, + }, + { + key: "addNormalFilter", + value: function (t, e) { + var i = this.w; + i.config.chart.dropShadow.enabled && this.dropShadow(t, i.config.chart.dropShadow, e); + }, + }, + { + key: "addLightenFilter", + value: function (t, e, i) { + var a = this, + s = this.w, + n = i.intensity; + if (!p.isFirefox()) { + t.unfilter(!0); + var r = new window.SVG.Filter(); + r.size("120%", "180%", "-5%", "-40%"), + t.filter(function (t) { + var i = s.config.chart.dropShadow; + (r = i.enabled ? a.addShadow(t, e, i) : t).componentTransfer({ rgb: { type: "linear", slope: 1.5, intercept: n } }); + }), + t.filterer.node.setAttribute("filterUnits", "userSpaceOnUse"); + } + }, + }, + { + key: "addDarkenFilter", + value: function (t, e, i) { + var a = this, + s = this.w, + n = i.intensity; + if (!p.isFirefox()) { + t.unfilter(!0); + var r = new window.SVG.Filter(); + r.size("120%", "180%", "-5%", "-40%"), + t.filter(function (t) { + var i = s.config.chart.dropShadow; + (r = i.enabled ? a.addShadow(t, e, i) : t).componentTransfer({ rgb: { type: "linear", slope: n } }); + }), + t.filterer.node.setAttribute("filterUnits", "userSpaceOnUse"); + } + }, + }, + { + key: "applyFilter", + value: function (t, e, i) { + var a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0.5; + switch (i) { + case "none": + this.addNormalFilter(t, e); + break; + case "lighten": + this.addLightenFilter(t, e, { intensity: a }); + break; + case "darken": + this.addDarkenFilter(t, e, { intensity: a }); + } + }, + }, + { + key: "addShadow", + value: function (t, e, i) { + var a = i.blur, + s = i.top, + n = i.left, + r = i.color, + o = i.opacity, + l = t + .flood(Array.isArray(r) ? r[e] : r, o) + .composite(t.sourceAlpha, "in") + .offset(n, s) + .gaussianBlur(a) + .merge(t.source); + return t.blend(t.source, l); + }, + }, + { + key: "dropShadow", + value: function (t, e) { + var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0, + a = e.top, + s = e.left, + n = e.blur, + r = e.color, + o = e.opacity, + l = e.noUserSpaceOnUse; + return ( + t.unfilter(!0), + (r = Array.isArray(r) ? r[i] : r), + new window.SVG.Filter().size("120%", "180%", "-5%", "-40%"), + t.filter(function (t) { + var e = null; + (e = + p.isSafari() || p.isFirefox() || p.isIE() + ? t.flood(r, o).composite(t.sourceAlpha, "in").offset(s, a).gaussianBlur(n) + : t.flood(r, o).composite(t.sourceAlpha, "in").offset(s, a).gaussianBlur(n).merge(t.source)), + t.blend(t.source, e); + }), + l || t.filterer.node.setAttribute("filterUnits", "userSpaceOnUse"), + t + ); + }, + }, + { + key: "setSelectionFilter", + value: function (t, e, i) { + var a = this.w; + if (void 0 !== a.globals.selectedDataPoints[e] && a.globals.selectedDataPoints[e].indexOf(i) > -1) { + t.node.setAttribute("selected", !0); + var s = a.config.states.active.filter; + "none" !== s && this.applyFilter(t, e, s.type, s.value); + } + }, + }, + ]), + t + ); + })(), + v = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), this.setEasingFunctions(); + } + return ( + o(t, [ + { + key: "setEasingFunctions", + value: function () { + var t; + switch (this.w.config.chart.animations.easing) { + case "linear": + t = "-"; + break; + case "easein": + t = "<"; + break; + case "easeout": + t = ">"; + break; + case "easeinout": + t = "<>"; + break; + case "swing": + t = function (t) { + var e = 1.70158; + return (t -= 1) * t * ((e + 1) * t + e) + 1; + }; + break; + case "bounce": + t = function (t) { + return t < 1 / 2.75 + ? 7.5625 * t * t + : t < 2 / 2.75 + ? 7.5625 * (t -= 1.5 / 2.75) * t + 0.75 + : t < 2.5 / 2.75 + ? 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375 + : 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375; + }; + break; + case "elastic": + t = function (t) { + return t === !!t ? t : Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1; + }; + break; + default: + t = "<>"; + } + this.w.globals.easing = t; + }, + }, + { + key: "animateLine", + value: function (t, e, i, a) { + t.attr(e).animate(a).attr(i); + }, + }, + { + key: "animateCircleRadius", + value: function (t, e, i, a, s) { + e || (e = 0), t.attr({ r: e }).animate(a, s).attr({ r: i }); + }, + }, + { + key: "animateCircle", + value: function (t, e, i, a, s) { + t.attr({ r: e.r, cx: e.cx, cy: e.cy }).animate(a, s).attr({ r: i.r, cx: i.cx, cy: i.cy }); + }, + }, + { + key: "animateRect", + value: function (t, e, i, a, s) { + t.attr(e) + .animate(a) + .attr(i) + .afterAll(function () { + s(); + }); + }, + }, + { + key: "animatePathsGradually", + value: function (t) { + var e = t.el, + i = t.j, + a = t.pathFrom, + s = t.pathTo, + n = t.speed, + r = t.delay, + o = t.strokeWidth, + l = this.w, + h = 0; + l.config.chart.animations.animateGradually.enabled && (h = l.config.chart.animations.animateGradually.delay), + l.config.chart.animations.dynamicAnimation.enabled && l.globals.dataChanged && (h = 0), + this.morphSVG(e, i, a, s, n, o, r * h); + }, + }, + { + key: "showDelayedElements", + value: function () { + this.w.globals.delayedElements.forEach(function (t) { + t.el.classList.remove("hidden"); + }); + }, + }, + { + key: "morphSVG", + value: function (t, e, i, a, s, n, r) { + var o = this, + l = this.w; + i || (i = t.attr("pathFrom")), + a || (a = t.attr("pathTo")), + (!i || i.indexOf("undefined") > -1 || i.indexOf("NaN") > -1) && ((i = "M 0 ".concat(l.globals.gridHeight)), (s = 1)), + (a.indexOf("undefined") > -1 || a.indexOf("NaN") > -1) && ((a = "M 0 ".concat(l.globals.gridHeight)), (s = 1)), + l.globals.shouldAnimate || (s = 1), + t + .plot(i) + .animate(1, l.globals.easing, r) + .plot(i) + .animate(s, l.globals.easing, r) + .plot(a) + .afterAll(function () { + p.isNumber(e) + ? e === l.globals.series[l.globals.maxValsInArrayIndex].length - 2 && l.globals.shouldAnimate && (l.globals.animationEnded = !0) + : l.globals.shouldAnimate && ((l.globals.animationEnded = !0), "function" == typeof l.config.chart.events.animationEnd && l.config.chart.events.animationEnd(o.ctx, l)), + o.showDelayedElements(); + }); + }, + }, + ]), + t + ); + })(), + m = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o( + t, + [ + { + key: "drawLine", + value: function (t, e, i, a) { + var s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : "#a8a8a8", + n = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : 0, + r = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : null; + return this.w.globals.dom.Paper.line().attr({ x1: t, y1: e, x2: i, y2: a, stroke: s, "stroke-dasharray": n, "stroke-width": r }); + }, + }, + { + key: "drawRect", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0, + e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0, + i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0, + a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0, + s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 0, + n = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : "#fefefe", + r = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : 1, + o = arguments.length > 7 && void 0 !== arguments[7] ? arguments[7] : null, + l = arguments.length > 8 && void 0 !== arguments[8] ? arguments[8] : null, + h = arguments.length > 9 && void 0 !== arguments[9] ? arguments[9] : 0, + c = this.w.globals.dom.Paper.rect(); + return ( + c.attr({ x: t, y: e, width: i > 0 ? i : 0, height: a > 0 ? a : 0, rx: s, ry: s, fill: n, opacity: r, "stroke-width": null !== o ? o : 0, stroke: null !== l ? l : "none", "stroke-dasharray": h }), + c + ); + }, + }, + { + key: "drawPolygon", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "#e1e1e1", + i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "none"; + return this.w.globals.dom.Paper.polygon(t).attr({ fill: i, stroke: e }); + }, + }, + { + key: "drawCircle", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null, + i = this.w.globals.dom.Paper.circle(2 * t); + return null !== e && i.attr(e), i; + }, + }, + { + key: "drawPath", + value: function (t) { + var e = t.d, + i = void 0 === e ? "" : e, + a = t.stroke, + s = void 0 === a ? "#a8a8a8" : a, + n = t.strokeWidth, + r = void 0 === n ? 1 : n, + o = t.fill, + l = t.fillOpacity, + h = void 0 === l ? 1 : l, + c = t.strokeOpacity, + d = void 0 === c ? 1 : c, + u = t.classes, + f = t.strokeLinecap, + g = void 0 === f ? null : f, + p = t.strokeDashArray, + x = void 0 === p ? 0 : p, + v = this.w; + return ( + null === g && (g = v.config.stroke.lineCap), + (i.indexOf("undefined") > -1 || i.indexOf("NaN") > -1) && (i = "M 0 ".concat(v.globals.gridHeight)), + v.globals.dom.Paper.path(i).attr({ fill: o, "fill-opacity": h, stroke: s, "stroke-opacity": d, "stroke-linecap": g, "stroke-width": r, "stroke-dasharray": x, class: u }) + ); + }, + }, + { + key: "group", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, + e = this.w.globals.dom.Paper.group(); + return null !== t && e.attr(t), e; + }, + }, + { + key: "move", + value: function (t, e) { + var i = ["M", t, e].join(" "); + return i; + }, + }, + { + key: "line", + value: function (t, e) { + var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null, + a = null; + return null === i ? (a = ["L", t, e].join(" ")) : "H" === i ? (a = ["H", t].join(" ")) : "V" === i && (a = ["V", e].join(" ")), a; + }, + }, + { + key: "curve", + value: function (t, e, i, a, s, n) { + var r = ["C", t, e, i, a, s, n].join(" "); + return r; + }, + }, + { + key: "quadraticCurve", + value: function (t, e, i, a) { + return ["Q", t, e, i, a].join(" "); + }, + }, + { + key: "arc", + value: function (t, e, i, a, s, n, r) { + var o = "A"; + arguments.length > 7 && void 0 !== arguments[7] && arguments[7] && (o = "a"); + var l = [o, t, e, i, a, s, n, r].join(" "); + return l; + }, + }, + { + key: "renderPaths", + value: function (t) { + var e, + i = t.i, + a = t.j, + s = t.realIndex, + n = t.pathFrom, + r = t.pathTo, + o = t.stroke, + l = t.strokeWidth, + c = t.strokeLinecap, + d = t.fill, + u = t.animationDelay, + f = t.initialSpeed, + g = t.dataChangeSpeed, + p = t.className, + m = t.id, + b = t.shouldClipToGrid, + y = void 0 === b || b, + w = t.bindEventsOnPaths, + k = void 0 === w || w, + S = t.drawShadow, + A = void 0 === S || S, + C = this.w, + L = new x(this.ctx), + E = new v(this.ctx), + P = this.w.config.chart.animations.enabled, + T = P && this.w.config.chart.animations.dynamicAnimation.enabled, + M = !!((P && !C.globals.resized) || (T && C.globals.dataChanged && C.globals.shouldAnimate)); + M ? (e = n) : ((e = r), (this.w.globals.animationEnded = !0)); + var z = C.config.stroke.dashArray, + I = 0; + I = Array.isArray(z) ? z[s] : C.config.stroke.dashArray; + var X = this.drawPath({ d: e, stroke: o, strokeWidth: l, fill: d, fillOpacity: 1, classes: p, strokeLinecap: c, strokeDashArray: I }); + if ((X.attr("id", "".concat(m, "-").concat(i)), X.attr("index", s), y && X.attr({ "clip-path": "url(#gridRectMask".concat(C.globals.cuid, ")") }), "none" !== C.config.states.normal.filter.type)) + L.getDefaultFilter(X, s); + else if ( + C.config.chart.dropShadow.enabled && + A && + (!C.config.chart.dropShadow.enabledSeries || (C.config.chart.dropShadow.enabledSeries && -1 !== C.config.chart.dropShadow.enabledSeries.indexOf(s))) + ) { + var F = C.config.chart.dropShadow; + L.dropShadow(X, F, s); + } + k && + (X.node.addEventListener("mouseenter", this.pathMouseEnter.bind(this, X)), + X.node.addEventListener("mouseleave", this.pathMouseLeave.bind(this, X)), + X.node.addEventListener("mousedown", this.pathMouseDown.bind(this, X))), + X.attr({ pathTo: r, pathFrom: n }); + var Y = { el: X, j: a, pathFrom: n, pathTo: r, strokeWidth: l }; + return ( + !P || C.globals.resized || C.globals.dataChanged ? (!C.globals.resized && C.globals.dataChanged) || E.showDelayedElements() : E.animatePathsGradually(h({}, Y, { speed: f, delay: u })), + C.globals.dataChanged && T && M && E.animatePathsGradually(h({}, Y, { speed: g })), + X + ); + }, + }, + { + key: "drawPattern", + value: function (t, e, i) { + var a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : "#a8a8a8", + s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 0; + return this.w.globals.dom.Paper.pattern(e, i, function (n) { + "horizontalLines" === t + ? n.line(0, 0, i, 0).stroke({ color: a, width: s + 1 }) + : "verticalLines" === t + ? n.line(0, 0, 0, e).stroke({ color: a, width: s + 1 }) + : "slantedLines" === t + ? n.line(0, 0, e, i).stroke({ color: a, width: s }) + : "squares" === t + ? n.rect(e, i).fill("none").stroke({ color: a, width: s }) + : "circles" === t && n.circle(e).fill("none").stroke({ color: a, width: s }); + }); + }, + }, + { + key: "drawGradient", + value: function (t, e, i, a, s) { + var n, + r = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : null, + o = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : null, + l = arguments.length > 7 && void 0 !== arguments[7] ? arguments[7] : null, + h = arguments.length > 8 && void 0 !== arguments[8] ? arguments[8] : 0, + c = this.w; + (e = p.hexToRgba(e, a)), (i = p.hexToRgba(i, s)); + var d = 0, + u = 1, + f = 1, + g = null; + null !== o && ((d = void 0 !== o[0] ? o[0] / 100 : 0), (u = void 0 !== o[1] ? o[1] / 100 : 1), (f = void 0 !== o[2] ? o[2] / 100 : 1), (g = void 0 !== o[3] ? o[3] / 100 : null)); + var x = !("donut" !== c.config.chart.type && "pie" !== c.config.chart.type && "bubble" !== c.config.chart.type); + if ( + ((n = + null === l || 0 === l.length + ? c.globals.dom.Paper.gradient(x ? "radial" : "linear", function (t) { + t.at(d, e, a), t.at(u, i, s), t.at(f, i, s), null !== g && t.at(g, e, a); + }) + : c.globals.dom.Paper.gradient(x ? "radial" : "linear", function (t) { + (Array.isArray(l[h]) ? l[h] : l).forEach(function (e) { + t.at(e.offset / 100, e.color, e.opacity); + }); + })), + x) + ) { + var v = c.globals.gridWidth / 2, + m = c.globals.gridHeight / 2; + "bubble" !== c.config.chart.type ? n.attr({ gradientUnits: "userSpaceOnUse", cx: v, cy: m, r: r }) : n.attr({ cx: 0.5, cy: 0.5, r: 0.8, fx: 0.2, fy: 0.2 }); + } else "vertical" === t ? n.from(0, 0).to(0, 1) : "diagonal" === t ? n.from(0, 0).to(1, 1) : "horizontal" === t ? n.from(0, 1).to(1, 1) : "diagonal2" === t && n.from(0, 1).to(2, 2); + return n; + }, + }, + { + key: "drawText", + value: function (t) { + var e, + i = this.w, + a = t.x, + s = t.y, + n = t.text, + r = t.textAnchor, + o = t.fontSize, + l = t.fontFamily, + h = t.foreColor, + c = t.opacity; + return ( + void 0 === n && (n = ""), + r || (r = "start"), + h || (h = i.config.chart.foreColor), + (l = l || i.config.chart.fontFamily), + (e = Array.isArray(n) + ? i.globals.dom.Paper.text(function (t) { + for (var e = 0; e < n.length; e++) t.tspan(n[e]); + }) + : i.globals.dom.Paper.plain(n)).attr({ x: a, y: s, "text-anchor": r, "dominant-baseline": "auto", "font-size": o, "font-family": l, fill: h, class: t.cssClass }), + (e.node.style.fontFamily = l), + (e.node.style.opacity = c), + e + ); + }, + }, + { + key: "addTspan", + value: function (t, e, i) { + var a = t.tspan(e); + i || (i = this.w.config.chart.fontFamily), (a.node.style.fontFamily = i); + }, + }, + { + key: "drawMarker", + value: function (t, e, i) { + t = t || 0; + var a = i.pSize || 0, + s = null; + if ("square" === i.shape) { + var n = void 0 === i.pRadius ? a / 2 : i.pRadius; + null === e && ((a = 0), (n = 0)); + var r = 1.2 * a + n, + o = this.drawRect(r, r, r, r, n); + o.attr({ + x: t - r / 2, + y: e - r / 2, + cx: t, + cy: e, + class: i.class ? i.class : "", + fill: i.pointFillColor, + "fill-opacity": i.pointFillOpacity ? i.pointFillOpacity : 1, + stroke: i.pointStrokeColor, + "stroke-width": i.pWidth ? i.pWidth : 0, + "stroke-opacity": i.pointStrokeOpacity ? i.pointStrokeOpacity : 1, + }), + (s = o); + } else + "circle" === i.shape && + (p.isNumber(e) || ((a = 0), (e = 0)), + (s = this.drawCircle(a, { + cx: t, + cy: e, + class: i.class ? i.class : "", + stroke: i.pointStrokeColor, + fill: i.pointFillColor, + "fill-opacity": i.pointFillOpacity ? i.pointFillOpacity : 1, + "stroke-width": i.pWidth ? i.pWidth : 0, + "stroke-opacity": i.pointStrokeOpacity ? i.pointStrokeOpacity : 1, + }))); + return s; + }, + }, + { + key: "pathMouseEnter", + value: function (t, e) { + var i = this.w, + a = new x(this.ctx), + s = parseInt(t.node.getAttribute("index")), + n = parseInt(t.node.getAttribute("j")); + if ( + ("function" == typeof i.config.chart.events.dataPointMouseEnter && i.config.chart.events.dataPointMouseEnter(e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }), + this.ctx.fireEvent("dataPointMouseEnter", [e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }]), + ("none" === i.config.states.active.filter.type || "true" !== t.node.getAttribute("selected")) && + "none" !== i.config.states.hover.filter.type && + "none" !== i.config.states.active.filter.type && + !i.globals.isTouchDevice) + ) { + var r = i.config.states.hover.filter; + a.applyFilter(t, s, r.type, r.value); + } + }, + }, + { + key: "pathMouseLeave", + value: function (t, e) { + var i = this.w, + a = new x(this.ctx), + s = parseInt(t.node.getAttribute("index")), + n = parseInt(t.node.getAttribute("j")); + "function" == typeof i.config.chart.events.dataPointMouseLeave && i.config.chart.events.dataPointMouseLeave(e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }), + this.ctx.fireEvent("dataPointMouseLeave", [e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }]), + ("none" !== i.config.states.active.filter.type && "true" === t.node.getAttribute("selected")) || ("none" !== i.config.states.hover.filter.type && a.getDefaultFilter(t, s)); + }, + }, + { + key: "pathMouseDown", + value: function (t, e) { + var i = this.w, + a = new x(this.ctx), + s = parseInt(t.node.getAttribute("index")), + n = parseInt(t.node.getAttribute("j")), + r = "false"; + if ("true" === t.node.getAttribute("selected")) { + if ((t.node.setAttribute("selected", "false"), i.globals.selectedDataPoints[s].indexOf(n) > -1)) { + var o = i.globals.selectedDataPoints[s].indexOf(n); + i.globals.selectedDataPoints[s].splice(o, 1); + } + } else { + if (!i.config.states.active.allowMultipleDataPointsSelection && i.globals.selectedDataPoints.length > 0) { + i.globals.selectedDataPoints = []; + var l = i.globals.dom.Paper.select(".apexcharts-series path").members, + h = i.globals.dom.Paper.select(".apexcharts-series circle, .apexcharts-series rect").members; + l.forEach(function (t) { + t.node.setAttribute("selected", "false"), a.getDefaultFilter(t, s); + }), + h.forEach(function (t) { + t.node.setAttribute("selected", "false"), a.getDefaultFilter(t, s); + }); + } + t.node.setAttribute("selected", "true"), (r = "true"), void 0 === i.globals.selectedDataPoints[s] && (i.globals.selectedDataPoints[s] = []), i.globals.selectedDataPoints[s].push(n); + } + if ("true" === r) { + var c = i.config.states.active.filter; + "none" !== c && a.applyFilter(t, s, c.type, c.value); + } else "none" !== i.config.states.active.filter.type && a.getDefaultFilter(t, s); + "function" == typeof i.config.chart.events.dataPointSelection && + i.config.chart.events.dataPointSelection(e, this.ctx, { selectedDataPoints: i.globals.selectedDataPoints, seriesIndex: s, dataPointIndex: n, w: i }), + e && this.ctx.fireEvent("dataPointSelection", [e, this.ctx, { selectedDataPoints: i.globals.selectedDataPoints, seriesIndex: s, dataPointIndex: n, w: i }]); + }, + }, + { + key: "rotateAroundCenter", + value: function (t) { + var e = t.getBBox(); + return { x: e.x + e.width / 2, y: e.y + e.height / 2 }; + }, + }, + { + key: "getTextRects", + value: function (t, e, i, a) { + var s = !(arguments.length > 4 && void 0 !== arguments[4]) || arguments[4], + n = this.w, + r = this.drawText({ x: -200, y: -200, text: t, textAnchor: "start", fontSize: e, fontFamily: i, foreColor: "#fff", opacity: 0 }); + a && r.attr("transform", a), n.globals.dom.Paper.add(r); + var o = r.bbox(); + return s || (o = r.node.getBoundingClientRect()), r.remove(), { width: o.width, height: o.height }; + }, + }, + { + key: "placeTextWithEllipsis", + value: function (t, e, i) { + if (((t.textContent = e), e.length > 0 && t.getComputedTextLength() >= i)) { + for (var a = e.length - 3; a > 0; a -= 3) if (t.getSubStringLength(0, a) <= i) return void (t.textContent = e.substring(0, a) + "..."); + t.textContent = "..."; + } + }, + }, + ], + [ + { + key: "setAttrs", + value: function (t, e) { + for (var i in e) e.hasOwnProperty(i) && t.setAttribute(i, e[i]); + }, + }, + ] + ), + t + ); + })(); + var b = { + name: "en", + options: { + months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], + shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], + shortDays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], + toolbar: { + exportToSVG: "Download SVG", + exportToPNG: "Download PNG", + menu: "Menu", + selection: "Selection", + selectionZoom: "Selection Zoom", + zoomIn: "Zoom In", + zoomOut: "Zoom Out", + pan: "Panning", + reset: "Reset Zoom", + }, + }, + }, + y = (function () { + function t() { + n(this, t), + (this.yAxis = { + show: !0, + showAlways: !1, + seriesName: void 0, + opposite: !1, + reversed: !1, + logarithmic: !1, + tickAmount: void 0, + forceNiceScale: !1, + max: void 0, + min: void 0, + floating: !1, + decimalsInFloat: void 0, + labels: { show: !0, minWidth: 0, maxWidth: 160, offsetX: 0, offsetY: 0, align: void 0, rotate: 0, padding: 20, style: { colors: [], fontSize: "11px", fontFamily: void 0, cssClass: "" }, formatter: void 0 }, + axisBorder: { show: !1, color: "#78909C", offsetX: 0, offsetY: 0 }, + axisTicks: { show: !1, color: "#78909C", width: 6, offsetX: 0, offsetY: 0 }, + title: { text: void 0, rotate: 90, offsetY: 0, offsetX: 0, style: { color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "" } }, + tooltip: { enabled: !1, offsetX: 0 }, + crosshairs: { show: !0, position: "front", stroke: { color: "#b6b6b6", width: 1, dashArray: 0 } }, + }), + (this.xAxisAnnotation = { + x: 0, + x2: null, + strokeDashArray: 1, + fillColor: "#c2c2c2", + borderColor: "#c2c2c2", + opacity: 0.3, + offsetX: 0, + offsetY: 0, + label: { + borderColor: "#c2c2c2", + borderWidth: 1, + text: void 0, + textAnchor: "middle", + orientation: "vertical", + position: "top", + offsetX: 0, + offsetY: 0, + style: { background: "#fff", color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "", padding: { left: 5, right: 5, top: 2, bottom: 2 } }, + }, + }), + (this.yAxisAnnotation = { + y: 0, + y2: null, + strokeDashArray: 1, + fillColor: "#c2c2c2", + borderColor: "#c2c2c2", + opacity: 0.3, + offsetX: 0, + offsetY: 0, + yAxisIndex: 0, + label: { + borderColor: "#c2c2c2", + borderWidth: 1, + text: void 0, + textAnchor: "end", + position: "right", + offsetX: 0, + offsetY: -3, + style: { background: "#fff", color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "", padding: { left: 5, right: 5, top: 0, bottom: 2 } }, + }, + }), + (this.pointAnnotation = { + x: 0, + y: null, + yAxisIndex: 0, + seriesIndex: 0, + marker: { size: 0, fillColor: "#fff", strokeWidth: 2, strokeColor: "#333", shape: "circle", offsetX: 0, offsetY: 0, radius: 2, cssClass: "" }, + label: { + borderColor: "#c2c2c2", + borderWidth: 1, + text: void 0, + textAnchor: "middle", + offsetX: 0, + offsetY: -15, + style: { background: "#fff", color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "", padding: { left: 5, right: 5, top: 0, bottom: 2 } }, + }, + customSVG: { SVG: void 0, cssClass: void 0, offsetX: 0, offsetY: 0 }, + }); + } + return ( + o(t, [ + { + key: "init", + value: function () { + return { + annotations: { position: "front", yaxis: [this.yAxisAnnotation], xaxis: [this.xAxisAnnotation], points: [this.pointAnnotation] }, + chart: { + animations: { enabled: !0, easing: "easeinout", speed: 800, animateGradually: { delay: 150, enabled: !0 }, dynamicAnimation: { enabled: !0, speed: 350 } }, + background: "transparent", + locales: [b], + defaultLocale: "en", + dropShadow: { enabled: !1, enabledSeries: void 0, top: 2, left: 2, blur: 4, color: "#000", opacity: 0.35 }, + events: { + animationEnd: void 0, + beforeMount: void 0, + mounted: void 0, + updated: void 0, + click: void 0, + legendClick: void 0, + markerClick: void 0, + selection: void 0, + dataPointSelection: void 0, + dataPointMouseEnter: void 0, + dataPointMouseLeave: void 0, + beforeZoom: void 0, + zoomed: void 0, + scrolled: void 0, + }, + foreColor: "#373d3f", + fontFamily: "Helvetica, Arial, sans-serif", + height: "auto", + parentHeightOffset: 15, + id: void 0, + group: void 0, + offsetX: 0, + offsetY: 0, + selection: { + enabled: !1, + type: "x", + fill: { color: "#24292e", opacity: 0.1 }, + stroke: { width: 1, color: "#24292e", opacity: 0.4, dashArray: 3 }, + xaxis: { min: void 0, max: void 0 }, + yaxis: { min: void 0, max: void 0 }, + }, + sparkline: { enabled: !1 }, + brush: { enabled: !1, autoScaleYaxis: !0, target: void 0 }, + stacked: !1, + stackType: "normal", + toolbar: { show: !0, tools: { download: !0, selection: !0, zoom: !0, zoomin: !0, zoomout: !0, pan: !0, reset: !0, customIcons: [] }, autoSelected: "zoom" }, + type: "line", + width: "100%", + zoom: { enabled: !0, type: "x", autoScaleYaxis: !1, zoomedArea: { fill: { color: "#90CAF9", opacity: 0.4 }, stroke: { color: "#0D47A1", opacity: 0.4, width: 1 } } }, + }, + plotOptions: { + bar: { + horizontal: !1, + columnWidth: "70%", + barHeight: "70%", + distributed: !1, + endingShape: "flat", + colors: { ranges: [], backgroundBarColors: [], backgroundBarOpacity: 1 }, + dataLabels: { maxItems: 100, hideOverflowingLabels: !0, position: "top" }, + }, + candlestick: { colors: { upward: "#00B746", downward: "#EF403C" }, wick: { useFillColor: !0 } }, + heatmap: { radius: 2, enableShades: !0, shadeIntensity: 0.5, reverseNegativeShade: !0, distributed: !1, colorScale: { inverse: !1, ranges: [], min: void 0, max: void 0 } }, + radialBar: { + size: void 0, + inverseOrder: !1, + startAngle: 0, + endAngle: 360, + offsetX: 0, + offsetY: 0, + hollow: { + margin: 5, + size: "50%", + background: "transparent", + image: void 0, + imageWidth: 150, + imageHeight: 150, + imageOffsetX: 0, + imageOffsetY: 0, + imageClipped: !0, + position: "front", + dropShadow: { enabled: !1, top: 0, left: 0, blur: 3, color: "#000", opacity: 0.5 }, + }, + track: { + show: !0, + startAngle: void 0, + endAngle: void 0, + background: "#f2f2f2", + strokeWidth: "97%", + opacity: 1, + margin: 5, + dropShadow: { enabled: !1, top: 0, left: 0, blur: 3, color: "#000", opacity: 0.5 }, + }, + dataLabels: { + show: !0, + name: { show: !0, fontSize: "16px", fontFamily: void 0, color: void 0, offsetY: 0 }, + value: { + show: !0, + fontSize: "14px", + fontFamily: void 0, + color: void 0, + offsetY: 16, + formatter: function (t) { + return t + "%"; + }, + }, + total: { + show: !1, + label: "Total", + color: void 0, + formatter: function (t) { + return ( + t.globals.seriesTotals.reduce(function (t, e) { + return t + e; + }, 0) / + t.globals.series.length + + "%" + ); + }, + }, + }, + }, + rangeBar: {}, + pie: { + size: void 0, + customScale: 1, + offsetX: 0, + offsetY: 0, + expandOnClick: !0, + dataLabels: { offset: 0, minAngleToShowLabel: 10 }, + donut: { + size: "65%", + background: "transparent", + labels: { + show: !1, + name: { show: !0, fontSize: "16px", fontFamily: void 0, color: void 0, offsetY: -10 }, + value: { + show: !0, + fontSize: "20px", + fontFamily: void 0, + color: void 0, + offsetY: 10, + formatter: function (t) { + return t; + }, + }, + total: { + show: !1, + label: "Total", + color: void 0, + formatter: function (t) { + return t.globals.seriesTotals.reduce(function (t, e) { + return t + e; + }, 0); + }, + }, + }, + }, + }, + radar: { size: void 0, offsetX: 0, offsetY: 0, polygons: { strokeColors: "#e8e8e8", connectorColors: "#e8e8e8", fill: { colors: void 0 } } }, + }, + colors: void 0, + dataLabels: { + enabled: !0, + enabledOnSeries: void 0, + formatter: function (t) { + return null !== t ? t : ""; + }, + textAnchor: "middle", + offsetX: 0, + offsetY: 0, + style: { fontSize: "12px", fontFamily: void 0, colors: void 0 }, + dropShadow: { enabled: !1, top: 1, left: 1, blur: 1, color: "#000", opacity: 0.45 }, + }, + fill: { + type: "solid", + colors: void 0, + opacity: 0.85, + gradient: { shade: "dark", type: "horizontal", shadeIntensity: 0.5, gradientToColors: void 0, inverseColors: !0, opacityFrom: 1, opacityTo: 1, stops: [0, 50, 100], colorStops: [] }, + image: { src: [], width: void 0, height: void 0 }, + pattern: { style: "sqaures", width: 6, height: 6, strokeWidth: 2 }, + }, + grid: { + show: !0, + borderColor: "#e0e0e0", + strokeDashArray: 0, + position: "back", + xaxis: { lines: { show: !1, animate: !1 } }, + yaxis: { lines: { show: !0, animate: !1 } }, + row: { colors: void 0, opacity: 0.5 }, + column: { colors: void 0, opacity: 0.5 }, + padding: { top: 0, right: 10, bottom: 0, left: 12 }, + }, + labels: [], + legend: { + show: !0, + showForSingleSeries: !1, + showForNullSeries: !0, + showForZeroSeries: !0, + floating: !1, + position: "bottom", + horizontalAlign: "center", + fontSize: "12px", + fontFamily: void 0, + width: void 0, + height: void 0, + formatter: void 0, + offsetX: -20, + offsetY: 0, + labels: { colors: void 0, useSeriesColors: !1 }, + markers: { width: 12, height: 12, strokeWidth: 0, strokeColor: "#fff", radius: 12, customHTML: void 0, offsetX: 0, offsetY: 0, onClick: void 0 }, + itemMargin: { horizontal: 0, vertical: 5 }, + onItemClick: { toggleDataSeries: !0 }, + onItemHover: { highlightDataSeries: !0 }, + }, + markers: { + discrete: [], + size: 0, + colors: void 0, + strokeColors: "#fff", + strokeWidth: 2, + strokeOpacity: 0.9, + fillOpacity: 1, + shape: "circle", + radius: 2, + offsetX: 0, + offsetY: 0, + hover: { size: void 0, sizeOffset: 3 }, + }, + noData: { text: void 0, align: "center", verticalAlign: "middle", offsetX: 0, offsetY: 0, style: { color: void 0, fontSize: "14px", fontFamily: void 0 } }, + responsive: [], + series: void 0, + states: { + normal: { filter: { type: "none", value: 0 } }, + hover: { filter: { type: "lighten", value: 0.15 } }, + active: { allowMultipleDataPointsSelection: !1, filter: { type: "darken", value: 0.65 } }, + }, + title: { text: void 0, align: "left", margin: 10, offsetX: 0, offsetY: 0, floating: !1, style: { fontSize: "14px", fontFamily: void 0, color: void 0 } }, + subtitle: { text: void 0, align: "left", margin: 10, offsetX: 0, offsetY: 30, floating: !1, style: { fontSize: "12px", fontFamily: void 0, color: void 0 } }, + stroke: { show: !0, curve: "smooth", lineCap: "butt", width: 2, colors: void 0, dashArray: 0 }, + tooltip: { + enabled: !0, + enabledOnSeries: void 0, + shared: !0, + followCursor: !1, + intersect: !1, + inverseOrder: !1, + custom: void 0, + fillSeriesColor: !1, + theme: "light", + style: { fontSize: "12px", fontFamily: void 0 }, + onDatasetHover: { highlightDataSeries: !1 }, + x: { show: !0, format: "dd MMM", formatter: void 0 }, + y: { + formatter: void 0, + title: { + formatter: function (t) { + return t; + }, + }, + }, + z: { formatter: void 0, title: "Size: " }, + marker: { show: !0 }, + items: { display: "flex" }, + fixed: { enabled: !1, position: "topRight", offsetX: 0, offsetY: 0 }, + }, + xaxis: { + type: "category", + categories: [], + offsetX: 0, + offsetY: 0, + labels: { + show: !0, + rotate: -45, + rotateAlways: !1, + hideOverlappingLabels: !0, + trim: !0, + minHeight: void 0, + maxHeight: 120, + showDuplicates: !0, + style: { colors: [], fontSize: "12px", fontFamily: void 0, cssClass: "" }, + offsetX: 0, + offsetY: 0, + format: void 0, + formatter: void 0, + datetimeFormatter: { year: "yyyy", month: "MMM 'yy", day: "dd MMM", hour: "HH:mm", minute: "HH:mm:ss" }, + }, + axisBorder: { show: !0, color: "#78909C", width: "100%", height: 1, offsetX: 0, offsetY: 0 }, + axisTicks: { show: !0, color: "#78909C", height: 6, offsetX: 0, offsetY: 0 }, + tickAmount: void 0, + tickPlacement: "on", + min: void 0, + max: void 0, + range: void 0, + floating: !1, + position: "bottom", + title: { text: void 0, offsetX: 0, offsetY: 0, style: { color: void 0, fontSize: "12px", fontFamily: void 0, cssClass: "" } }, + crosshairs: { + show: !0, + width: 1, + position: "back", + opacity: 0.9, + stroke: { color: "#b6b6b6", width: 1, dashArray: 3 }, + fill: { type: "solid", color: "#B1B9C4", gradient: { colorFrom: "#D8E3F0", colorTo: "#BED1E6", stops: [0, 100], opacityFrom: 0.4, opacityTo: 0.5 } }, + dropShadow: { enabled: !1, left: 0, top: 0, blur: 1, opacity: 0.4 }, + }, + tooltip: { enabled: !0, offsetY: 0, formatter: void 0, style: { fontSize: "12px", fontFamily: void 0 } }, + }, + yaxis: this.yAxis, + theme: { mode: "light", palette: "palette1", monochrome: { enabled: !1, color: "#008FFB", shadeTo: "light", shadeIntensity: 0.65 } }, + }; + }, + }, + ]), + t + ); + })(), + w = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.graphics = new m(this.ctx)), this.w.globals.isBarHorizontal && (this.invertAxis = !0), (this.xDivision = this.w.globals.gridWidth / this.w.globals.dataPoints); + } + return ( + o(t, [ + { + key: "drawAnnotations", + value: function () { + var t = this.w; + if (t.globals.axisCharts) { + for ( + var e = this.drawYAxisAnnotations(), i = this.drawXAxisAnnotations(), a = this.drawPointAnnotations(), s = t.config.chart.animations.enabled, n = [e, i, a], r = [i.node, e.node, a.node], o = 0; + o < 3; + o++ + ) + t.globals.dom.elGraphical.add(n[o]), !s || t.globals.resized || t.globals.dataChanged || r[o].classList.add("hidden"), t.globals.delayedElements.push({ el: r[o], index: 0 }); + this.annotationsBackground(); + } + }, + }, + { + key: "getStringX", + value: function (t) { + var e = this.w, + i = t, + a = e.globals.labels.indexOf(t), + s = e.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child(" + (a + 1) + ")"); + return s && (i = parseFloat(s.getAttribute("x"))), i; + }, + }, + { + key: "addXaxisAnnotation", + value: function (t, e, i) { + var a = this.w, + s = this.invertAxis ? a.globals.minY : a.globals.minX, + n = this.invertAxis ? a.globals.yRange[0] : a.globals.xRange, + r = (t.x - s) / (n / a.globals.gridWidth), + o = t.label.text; + ("category" !== a.config.xaxis.type && !a.config.xaxis.convertedCatToNumeric) || this.invertAxis || (r = this.getStringX(t.x)); + var l = t.strokeDashArray; + if (!(r < 0 || r > a.globals.gridWidth)) { + if (null === t.x2) { + var h = this.graphics.drawLine(r + t.offsetX, 0 + t.offsetY, r + t.offsetX, a.globals.gridHeight + t.offsetY, t.borderColor, l); + e.appendChild(h.node); + } else { + var c = (t.x2 - s) / (n / a.globals.gridWidth); + if ((("category" !== a.config.xaxis.type && !a.config.xaxis.convertedCatToNumeric) || this.invertAxis || (c = this.getStringX(t.x2)), c < r)) { + var d = r; + (r = c), (c = d); + } + if (o) { + var u = this.graphics.drawRect(r + t.offsetX, 0 + t.offsetY, c - r, a.globals.gridHeight + t.offsetY, 0, t.fillColor, t.opacity, 1, t.borderColor, l); + e.appendChild(u.node); + } + } + var f = "top" === t.label.position ? -3 : a.globals.gridHeight, + g = this.graphics.drawText({ + x: r + t.label.offsetX, + y: f + t.label.offsetY, + text: o, + textAnchor: t.label.textAnchor, + fontSize: t.label.style.fontSize, + fontFamily: t.label.style.fontFamily, + foreColor: t.label.style.color, + cssClass: "apexcharts-xaxis-annotation-label " + t.label.style.cssClass, + }); + g.attr({ rel: i }), e.appendChild(g.node), this.setOrientations(t, i); + } + }, + }, + { + key: "drawXAxisAnnotations", + value: function () { + var t = this, + e = this.w, + i = this.graphics.group({ class: "apexcharts-xaxis-annotations" }); + return ( + e.config.annotations.xaxis.map(function (e, a) { + t.addXaxisAnnotation(e, i.node, a); + }), + i + ); + }, + }, + { + key: "addYaxisAnnotation", + value: function (t, e, i) { + var a, + s, + n = this.w, + r = t.strokeDashArray; + if (this.invertAxis) { + var o = n.globals.labels.indexOf(t.y), + l = n.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child(" + (o + 1) + ")"); + l && (a = parseFloat(l.getAttribute("y"))); + } else + (a = n.globals.gridHeight - (t.y - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight)), + n.config.yaxis[t.yAxisIndex] && n.config.yaxis[t.yAxisIndex].reversed && (a = (t.y - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight)); + var h = t.label.text; + if (null === t.y2) { + var c = this.graphics.drawLine(0 + t.offsetX, a + t.offsetY, n.globals.gridWidth + t.offsetX, a + t.offsetY, t.borderColor, r); + e.appendChild(c.node); + } else { + if (this.invertAxis) { + var d = n.globals.labels.indexOf(t.y2), + u = n.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child(" + (d + 1) + ")"); + u && (s = parseFloat(u.getAttribute("y"))); + } else + (s = n.globals.gridHeight - (t.y2 - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight)), + n.config.yaxis[t.yAxisIndex] && n.config.yaxis[t.yAxisIndex].reversed && (s = (t.y2 - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight)); + if (s > a) { + var f = a; + (a = s), (s = f); + } + if (h) { + var g = this.graphics.drawRect(0 + t.offsetX, s + t.offsetY, n.globals.gridWidth + t.offsetX, a - s, 0, t.fillColor, t.opacity, 1, t.borderColor, r); + e.appendChild(g.node); + } + } + var p = "right" === t.label.position ? n.globals.gridWidth : 0, + x = this.graphics.drawText({ + x: p + t.label.offsetX, + y: (s || a) + t.label.offsetY - 3, + text: h, + textAnchor: t.label.textAnchor, + fontSize: t.label.style.fontSize, + fontFamily: t.label.style.fontFamily, + foreColor: t.label.style.color, + cssClass: "apexcharts-yaxis-annotation-label " + t.label.style.cssClass, + }); + x.attr({ rel: i }), e.appendChild(x.node); + }, + }, + { + key: "drawYAxisAnnotations", + value: function () { + var t = this, + e = this.w, + i = this.graphics.group({ class: "apexcharts-yaxis-annotations" }); + return ( + e.config.annotations.yaxis.map(function (e, a) { + t.addYaxisAnnotation(e, i.node, a); + }), + i + ); + }, + }, + { + key: "clearAnnotations", + value: function (t) { + var e = t.w.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations"); + (e = p.listToArray(e)).forEach(function (t) { + for (; t.firstChild; ) t.removeChild(t.firstChild); + }); + }, + }, + { + key: "addPointAnnotation", + value: function (t, e, i) { + var a = this.w, + s = 0, + n = 0, + r = 0; + if ((this.invertAxis && console.warn("Point annotation is not supported in horizontal bar charts."), "string" == typeof t.x)) { + var o = a.globals.labels.indexOf(t.x), + l = a.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child(" + (o + 1) + ")"); + s = parseFloat(l.getAttribute("x")); + var h = t.y; + null === t.y && (h = a.globals.series[t.seriesIndex][o]), + (n = a.globals.gridHeight - (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) - parseInt(t.label.style.fontSize) - t.marker.size), + (r = a.globals.gridHeight - (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight)), + a.config.yaxis[t.yAxisIndex] && + a.config.yaxis[t.yAxisIndex].reversed && + ((n = (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) + parseInt(t.label.style.fontSize) + t.marker.size), + (r = (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight))); + } else + (s = (t.x - a.globals.minX) / (a.globals.xRange / a.globals.gridWidth)), + (n = a.globals.gridHeight - (parseFloat(t.y) - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) - parseInt(t.label.style.fontSize) - t.marker.size), + (r = a.globals.gridHeight - (t.y - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight)), + a.config.yaxis[t.yAxisIndex] && + a.config.yaxis[t.yAxisIndex].reversed && + ((n = (parseFloat(t.y) - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) - parseInt(t.label.style.fontSize) - t.marker.size), + (r = (t.y - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight))); + if (!(s < 0 || s > a.globals.gridWidth)) { + var c = { + pSize: t.marker.size, + pWidth: t.marker.strokeWidth, + pointFillColor: t.marker.fillColor, + pointStrokeColor: t.marker.strokeColor, + shape: t.marker.shape, + radius: t.marker.radius, + class: "apexcharts-point-annotation-marker " + t.marker.cssClass, + }, + d = this.graphics.drawMarker(s + t.marker.offsetX, r + t.marker.offsetY, c); + e.appendChild(d.node); + var u = t.label.text ? t.label.text : "", + f = this.graphics.drawText({ + x: s + t.label.offsetX, + y: n + t.label.offsetY, + text: u, + textAnchor: t.label.textAnchor, + fontSize: t.label.style.fontSize, + fontFamily: t.label.style.fontFamily, + foreColor: t.label.style.color, + cssClass: "apexcharts-point-annotation-label " + t.label.style.cssClass, + }); + if ((f.attr({ rel: i }), e.appendChild(f.node), t.customSVG.SVG)) { + var g = this.graphics.group({ class: "apexcharts-point-annotations-custom-svg " + t.customSVG.cssClass }); + g.attr({ transform: "translate(".concat(s + t.customSVG.offsetX, ", ").concat(n + t.customSVG.offsetY, ")") }), (g.node.innerHTML = t.customSVG.SVG), e.appendChild(g.node); + } + } + }, + }, + { + key: "drawPointAnnotations", + value: function () { + var t = this, + e = this.w, + i = this.graphics.group({ class: "apexcharts-point-annotations" }); + return ( + e.config.annotations.points.map(function (e, a) { + t.addPointAnnotation(e, i.node, a); + }), + i + ); + }, + }, + { + key: "setOrientations", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null, + i = this.w; + if ("vertical" === t.label.orientation) { + var a = null !== e ? e : 0, + s = i.globals.dom.baseEl.querySelector(".apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='".concat(a, "']")); + if (null !== s) { + var n = s.getBoundingClientRect(); + s.setAttribute("x", parseFloat(s.getAttribute("x")) - n.height + 4), + "top" === t.label.position ? s.setAttribute("y", parseFloat(s.getAttribute("y")) + n.width) : s.setAttribute("y", parseFloat(s.getAttribute("y")) - n.width); + var r = this.graphics.rotateAroundCenter(s), + o = r.x, + l = r.y; + s.setAttribute("transform", "rotate(-90 ".concat(o, " ").concat(l, ")")); + } + } + }, + }, + { + key: "addBackgroundToAnno", + value: function (t, e) { + var i = this.w; + if (!e.label.text || (e.label.text && !e.label.text.trim())) return null; + var a = i.globals.dom.baseEl.querySelector(".apexcharts-grid").getBoundingClientRect(), + s = t.getBoundingClientRect(), + n = e.label.style.padding.left, + r = e.label.style.padding.right, + o = e.label.style.padding.top, + l = e.label.style.padding.bottom; + "vertical" === e.label.orientation && ((o = e.label.style.padding.left), (l = e.label.style.padding.right), (n = e.label.style.padding.top), (r = e.label.style.padding.bottom)); + var h = s.left - a.left - n, + c = s.top - a.top - o; + return this.graphics.drawRect(h, c, s.width + n + r, s.height + o + l, 0, e.label.style.background, 1, e.label.borderWidth, e.label.borderColor, 0); + }, + }, + { + key: "annotationsBackground", + value: function () { + var t = this, + e = this.w, + i = function (i, a, s) { + var n = e.globals.dom.baseEl.querySelector(".apexcharts-".concat(s, "-annotations .apexcharts-").concat(s, "-annotation-label[rel='").concat(a, "']")); + if (n) { + var r = n.parentNode, + o = t.addBackgroundToAnno(n, i); + o && r.insertBefore(o.node, n); + } + }; + e.config.annotations.xaxis.map(function (t, e) { + i(t, e, "xaxis"); + }), + e.config.annotations.yaxis.map(function (t, e) { + i(t, e, "yaxis"); + }), + e.config.annotations.points.map(function (t, e) { + i(t, e, "point"); + }); + }, + }, + { + key: "addText", + value: function (t, e, i) { + var a = t.x, + s = t.y, + n = t.text, + r = t.textAnchor, + o = t.appendTo, + l = void 0 === o ? ".apexcharts-inner" : o, + h = t.foreColor, + c = t.fontSize, + d = t.fontFamily, + u = t.cssClass, + f = t.backgroundColor, + g = t.borderWidth, + p = t.strokeDashArray, + x = t.radius, + v = t.borderColor, + m = t.paddingLeft, + b = void 0 === m ? 4 : m, + y = t.paddingRight, + w = void 0 === y ? 4 : y, + k = t.paddingBottom, + S = void 0 === k ? 2 : k, + A = t.paddingTop, + C = void 0 === A ? 2 : A, + L = i, + E = L.w, + P = E.globals.dom.baseEl.querySelector(l), + T = this.graphics.drawText({ x: a, y: s, text: n, textAnchor: r || "start", fontSize: c || "12px", fontFamily: d || E.config.chart.fontFamily, foreColor: h || E.config.chart.foreColor, cssClass: u }); + P.appendChild(T.node); + var M = T.bbox(); + if (n) { + var z = this.graphics.drawRect(M.x - b, M.y - C, M.width + b + w, M.height + S + C, x, f, 1, g, v, p); + T.before(z); + } + return ( + e && + E.globals.memory.methodsToExec.push({ + context: L, + method: L.addText, + params: { + x: a, + y: s, + text: n, + textAnchor: r, + appendTo: l, + foreColor: h, + fontSize: c, + cssClass: u, + backgroundColor: f, + borderWidth: g, + strokeDashArray: p, + radius: x, + borderColor: v, + paddingLeft: b, + paddingRight: w, + paddingBottom: S, + paddingTop: C, + }, + }), + i + ); + }, + }, + { + key: "addPointAnnotationExternal", + value: function (t, e, i) { + return ( + void 0 === this.invertAxis && (this.invertAxis = i.w.globals.isBarHorizontal), + this.addAnnotationExternal({ params: t, pushToMemory: e, context: i, type: "point", contextMethod: i.addPointAnnotation }), + i + ); + }, + }, + { + key: "addYaxisAnnotationExternal", + value: function (t, e, i) { + return this.addAnnotationExternal({ params: t, pushToMemory: e, context: i, type: "yaxis", contextMethod: i.addYaxisAnnotation }), i; + }, + }, + { + key: "addXaxisAnnotationExternal", + value: function (t, e, i) { + return this.addAnnotationExternal({ params: t, pushToMemory: e, context: i, type: "xaxis", contextMethod: i.addXaxisAnnotation }), i; + }, + }, + { + key: "addAnnotationExternal", + value: function (t) { + var e = t.params, + i = t.pushToMemory, + a = t.context, + s = t.type, + n = t.contextMethod, + r = a, + o = r.w, + l = o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s, "-annotations")), + h = l.childNodes.length + 1, + c = new y(), + d = Object.assign({}, "xaxis" === s ? c.xAxisAnnotation : "yaxis" === s ? c.yAxisAnnotation : c.pointAnnotation), + u = p.extend(d, e); + switch (s) { + case "xaxis": + this.addXaxisAnnotation(u, l, h); + break; + case "yaxis": + this.addYaxisAnnotation(u, l, h); + break; + case "point": + this.addPointAnnotation(u, l, h); + } + var f = o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s, "-annotations .apexcharts-").concat(s, "-annotation-label[rel='").concat(h, "']")), + g = this.addBackgroundToAnno(f, u); + return g && l.insertBefore(g.node, f), i && o.globals.memory.methodsToExec.push({ context: r, method: n, params: e }), a; + }, + }, + ]), + t + ); + })(), + k = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.months31 = [1, 3, 5, 7, 8, 10, 12]), (this.months30 = [2, 4, 6, 9, 11]), (this.daysCntOfYear = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334]); + } + return ( + o(t, [ + { + key: "isValidDate", + value: function (t) { + return !isNaN(this.parseDate(t)); + }, + }, + { + key: "getUTCTimeStamp", + value: function (t) { + return Date.parse(t) ? new Date(new Date(t).toISOString().substr(0, 25)).getTime() : t; + }, + }, + { + key: "parseDate", + value: function (t) { + var e = Date.parse(t); + if (!isNaN(e)) return this.getUTCTimeStamp(t); + var i = Date.parse(t.replace(/-/g, "/").replace(/[a-z]+/gi, " ")); + return (i = this.getUTCTimeStamp(i)); + }, + }, + { + key: "treatAsUtc", + value: function (t) { + var e = new Date(t); + return e.setMinutes(e.getMinutes() - e.getTimezoneOffset()), e; + }, + }, + { + key: "formatDate", + value: function (t, e) { + var i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2], + a = !(arguments.length > 3 && void 0 !== arguments[3]) || arguments[3], + s = this.w.globals.locale, + n = ["\0"].concat(g(s.months)), + r = [""].concat(g(s.shortMonths)), + o = [""].concat(g(s.days)), + l = [""].concat(g(s.shortDays)); + function h(t, e) { + var i = t + ""; + for (e = e || 2; i.length < e; ) i = "0" + i; + return i; + } + a && (t = this.treatAsUtc(t)); + var c = i ? t.getUTCFullYear() : t.getFullYear(); + e = (e = (e = e.replace(/(^|[^\\])yyyy+/g, "$1" + c)).replace(/(^|[^\\])yy/g, "$1" + c.toString().substr(2, 2))).replace(/(^|[^\\])y/g, "$1" + c); + var d = (i ? t.getUTCMonth() : t.getMonth()) + 1; + e = (e = (e = (e = e.replace(/(^|[^\\])MMMM+/g, "$1" + n[0])).replace(/(^|[^\\])MMM/g, "$1" + r[0])).replace(/(^|[^\\])MM/g, "$1" + h(d))).replace(/(^|[^\\])M/g, "$1" + d); + var u = i ? t.getUTCDate() : t.getDate(); + e = (e = (e = (e = e.replace(/(^|[^\\])dddd+/g, "$1" + o[0])).replace(/(^|[^\\])ddd/g, "$1" + l[0])).replace(/(^|[^\\])dd/g, "$1" + h(u))).replace(/(^|[^\\])d/g, "$1" + u); + var f = i ? t.getUTCHours() : t.getHours(), + p = f > 12 ? f - 12 : 0 === f ? 12 : f; + e = (e = (e = (e = e.replace(/(^|[^\\])HH+/g, "$1" + h(f))).replace(/(^|[^\\])H/g, "$1" + f)).replace(/(^|[^\\])hh+/g, "$1" + h(p))).replace(/(^|[^\\])h/g, "$1" + p); + var x = i ? t.getUTCMinutes() : t.getMinutes(); + e = (e = e.replace(/(^|[^\\])mm+/g, "$1" + h(x))).replace(/(^|[^\\])m/g, "$1" + x); + var v = i ? t.getUTCSeconds() : t.getSeconds(); + e = (e = e.replace(/(^|[^\\])ss+/g, "$1" + h(v))).replace(/(^|[^\\])s/g, "$1" + v); + var m = i ? t.getUTCMilliseconds() : t.getMilliseconds(); + (e = e.replace(/(^|[^\\])fff+/g, "$1" + h(m, 3))), (m = Math.round(m / 10)), (e = e.replace(/(^|[^\\])ff/g, "$1" + h(m))), (m = Math.round(m / 10)); + var b = f < 12 ? "AM" : "PM"; + e = (e = (e = e.replace(/(^|[^\\])f/g, "$1" + m)).replace(/(^|[^\\])TT+/g, "$1" + b)).replace(/(^|[^\\])T/g, "$1" + b.charAt(0)); + var y = b.toLowerCase(); + e = (e = e.replace(/(^|[^\\])tt+/g, "$1" + y)).replace(/(^|[^\\])t/g, "$1" + y.charAt(0)); + var w = -t.getTimezoneOffset(), + k = i || !w ? "Z" : w > 0 ? "+" : "-"; + if (!i) { + var S = (w = Math.abs(w)) % 60; + k += h(Math.floor(w / 60)) + ":" + h(S); + } + e = e.replace(/(^|[^\\])K/g, "$1" + k); + var A = (i ? t.getUTCDay() : t.getDay()) + 1; + return (e = (e = (e = (e = (e = e.replace(new RegExp(o[0], "g"), o[A])).replace(new RegExp(l[0], "g"), l[A])).replace(new RegExp(n[0], "g"), n[d])).replace(new RegExp(r[0], "g"), r[d])).replace( + /\\(.)/g, + "$1" + )); + }, + }, + { + key: "getTimeUnitsfromTimestamp", + value: function (t, e) { + var i = this.w; + void 0 !== i.config.xaxis.min && (t = i.config.xaxis.min), void 0 !== i.config.xaxis.max && (e = i.config.xaxis.max); + var a = new Date(t).getFullYear(), + s = new Date(e).getFullYear(), + n = new Date(t).getMonth(), + r = new Date(e).getMonth(), + o = new Date(t).getDate(), + l = new Date(e).getDate(), + h = new Date(t).getHours(), + c = new Date(e).getHours(); + return { minMinute: new Date(t).getMinutes(), maxMinute: new Date(e).getMinutes(), minHour: h, maxHour: c, minDate: o, maxDate: l, minMonth: n, maxMonth: r, minYear: a, maxYear: s }; + }, + }, + { + key: "isLeapYear", + value: function (t) { + return (t % 4 == 0 && t % 100 != 0) || t % 400 == 0; + }, + }, + { + key: "calculcateLastDaysOfMonth", + value: function (t, e, i) { + return this.determineDaysOfMonths(t, e) - i; + }, + }, + { + key: "determineDaysOfYear", + value: function (t) { + var e = 365; + return this.isLeapYear(t) && (e = 366), e; + }, + }, + { + key: "determineRemainingDaysOfYear", + value: function (t, e, i) { + var a = this.daysCntOfYear[e] + i; + return e > 1 && this.isLeapYear() && a++, a; + }, + }, + { + key: "determineDaysOfMonths", + value: function (t, e) { + var i = 30; + switch (((t = p.monthMod(t)), !0)) { + case this.months30.indexOf(t) > -1: + 2 === t && (i = this.isLeapYear(e) ? 29 : 28); + break; + case this.months31.indexOf(t) > -1: + default: + i = 31; + } + return i; + }, + }, + ]), + t + ); + })(), + S = (function () { + function t(e) { + n(this, t), (this.opts = e); + } + return ( + o( + t, + [ + { + key: "line", + value: function () { + return { + chart: { animations: { easing: "swing" } }, + dataLabels: { enabled: !1 }, + stroke: { width: 5, curve: "straight" }, + markers: { size: 0, hover: { sizeOffset: 6 } }, + xaxis: { crosshairs: { width: 1 } }, + }; + }, + }, + { + key: "sparkline", + value: function (t) { + (this.opts.yaxis[0].labels.show = !1), (this.opts.yaxis[0].floating = !0); + return p.extend(t, { + grid: { show: !1, padding: { left: 0, right: 0, top: 0, bottom: 0 } }, + legend: { show: !1 }, + xaxis: { labels: { show: !1 }, tooltip: { enabled: !1 }, axisBorder: { show: !1 } }, + chart: { toolbar: { show: !1 }, zoom: { enabled: !1 } }, + dataLabels: { enabled: !1 }, + }); + }, + }, + { + key: "bar", + value: function () { + return { + chart: { stacked: !1, animations: { easing: "swing" } }, + plotOptions: { bar: { dataLabels: { position: "center" } } }, + dataLabels: { style: { colors: ["#fff"] } }, + stroke: { width: 0 }, + fill: { opacity: 0.85 }, + legend: { markers: { shape: "square", radius: 2, size: 8 } }, + tooltip: { shared: !1 }, + xaxis: { tooltip: { enabled: !1 }, crosshairs: { width: "barWidth", position: "back", fill: { type: "gradient" }, dropShadow: { enabled: !1 }, stroke: { width: 0 } } }, + }; + }, + }, + { + key: "candlestick", + value: function () { + return { + stroke: { width: 1, colors: ["#333"] }, + dataLabels: { enabled: !1 }, + tooltip: { + shared: !0, + custom: function (t) { + var e = t.seriesIndex, + i = t.dataPointIndex, + a = t.w; + return ( + '<div class="apexcharts-tooltip-candlestick"><div>Open: <span class="value">' + + a.globals.seriesCandleO[e][i] + + '</span></div><div>High: <span class="value">' + + a.globals.seriesCandleH[e][i] + + '</span></div><div>Low: <span class="value">' + + a.globals.seriesCandleL[e][i] + + '</span></div><div>Close: <span class="value">' + + a.globals.seriesCandleC[e][i] + + "</span></div></div>" + ); + }, + }, + states: { active: { filter: { type: "none" } } }, + xaxis: { crosshairs: { width: 1 } }, + }; + }, + }, + { + key: "rangeBar", + value: function () { + return { + stroke: { width: 0 }, + plotOptions: { bar: { dataLabels: { position: "center" } } }, + dataLabels: { + enabled: !1, + formatter: function (t, e) { + e.ctx; + var i = e.seriesIndex, + a = e.dataPointIndex, + s = e.w, + n = s.globals.seriesRangeStart[i][a]; + return s.globals.seriesRangeEnd[i][a] - n; + }, + style: { colors: ["#fff"] }, + }, + tooltip: { + shared: !1, + followCursor: !0, + custom: function (t) { + var e = t.ctx, + i = t.seriesIndex, + a = t.dataPointIndex, + s = t.w, + n = s.globals.seriesRangeStart[i][a], + r = s.globals.seriesRangeEnd[i][a], + o = "", + l = "", + h = s.globals.colors[i]; + if (void 0 === s.config.tooltip.x.formatter) + if ("datetime" === s.config.xaxis.type) { + var c = new k(e); + (o = c.formatDate(new Date(n), s.config.tooltip.x.format, !0, !0)), (l = c.formatDate(new Date(r), s.config.tooltip.x.format, !0, !0)); + } else (o = n), (l = r); + else (o = s.config.tooltip.x.formatter(n)), (l = s.config.tooltip.x.formatter(r)); + var d = s.globals.labels[a]; + return ( + '<div class="apexcharts-tooltip-rangebar"><div> <span class="series-name" style="color: ' + + h + + '">' + + (s.config.series[i].name ? s.config.series[i].name : "") + + '</span></div><div> <span class="category">' + + d + + ': </span> <span class="value start-value">' + + o + + '</span> <span class="separator">-</span> <span class="value end-value">' + + l + + "</span></div></div>" + ); + }, + }, + xaxis: { tooltip: { enabled: !1 }, crosshairs: { stroke: { width: 0 } } }, + }; + }, + }, + { + key: "area", + value: function () { + return { + stroke: { width: 4 }, + fill: { type: "gradient", gradient: { inverseColors: !1, shade: "light", type: "vertical", opacityFrom: 0.65, opacityTo: 0.5, stops: [0, 100, 100] } }, + markers: { size: 0, hover: { sizeOffset: 6 } }, + tooltip: { followCursor: !1 }, + }; + }, + }, + { + key: "brush", + value: function (t) { + return p.extend(t, { + chart: { toolbar: { autoSelected: "selection", show: !1 }, zoom: { enabled: !1 } }, + dataLabels: { enabled: !1 }, + stroke: { width: 1 }, + tooltip: { enabled: !1 }, + xaxis: { tooltip: { enabled: !1 } }, + }); + }, + }, + { + key: "stacked100", + value: function () { + var t = this; + (this.opts.dataLabels = this.opts.dataLabels || {}), (this.opts.dataLabels.formatter = this.opts.dataLabels.formatter || void 0); + var e = this.opts.dataLabels.formatter; + this.opts.yaxis.forEach(function (e, i) { + (t.opts.yaxis[i].min = 0), (t.opts.yaxis[i].max = 100); + }), + "bar" === this.opts.chart.type && + (this.opts.dataLabels.formatter = + e || + function (t) { + return "number" == typeof t && t ? t.toFixed(0) + "%" : t; + }); + }, + }, + { + key: "bubble", + value: function () { + return { + dataLabels: { style: { colors: ["#fff"] } }, + tooltip: { shared: !1, intersect: !0 }, + xaxis: { crosshairs: { width: 0 } }, + fill: { type: "solid", gradient: { shade: "light", inverse: !0, shadeIntensity: 0.55, opacityFrom: 0.4, opacityTo: 0.8 } }, + }; + }, + }, + { + key: "scatter", + value: function () { + return { dataLabels: { enabled: !1 }, tooltip: { shared: !1, intersect: !0 }, markers: { size: 6, strokeWidth: 2, hover: { sizeOffset: 2 } } }; + }, + }, + { + key: "heatmap", + value: function () { + return { + chart: { stacked: !1, zoom: { enabled: !1 } }, + fill: { opacity: 1 }, + dataLabels: { style: { colors: ["#fff"] } }, + stroke: { colors: ["#fff"] }, + tooltip: { followCursor: !0, marker: { show: !1 }, x: { show: !1 } }, + legend: { position: "top", markers: { shape: "square", size: 10, offsetY: 2 } }, + grid: { padding: { right: 20 } }, + }; + }, + }, + { + key: "pie", + value: function () { + return { + chart: { toolbar: { show: !1 } }, + plotOptions: { pie: { donut: { labels: { show: !1 } } } }, + dataLabels: { + formatter: function (t) { + return t.toFixed(1) + "%"; + }, + style: { colors: ["#fff"] }, + dropShadow: { enabled: !0 }, + }, + stroke: { colors: ["#fff"] }, + fill: { opacity: 1, gradient: { shade: "dark", shadeIntensity: 0.35, inverseColors: !1, stops: [0, 100, 100] } }, + padding: { right: 0, left: 0 }, + tooltip: { theme: "dark", fillSeriesColor: !0 }, + legend: { position: "right" }, + }; + }, + }, + { + key: "donut", + value: function () { + return { + chart: { toolbar: { show: !1 } }, + dataLabels: { + formatter: function (t) { + return t.toFixed(1) + "%"; + }, + style: { colors: ["#fff"] }, + dropShadow: { enabled: !0 }, + }, + stroke: { colors: ["#fff"] }, + fill: { opacity: 1, gradient: { shade: "dark", shadeIntensity: 0.4, inverseColors: !1, type: "vertical", opacityFrom: 1, opacityTo: 1, stops: [70, 98, 100] } }, + padding: { right: 0, left: 0 }, + tooltip: { theme: "dark", fillSeriesColor: !0 }, + legend: { position: "right" }, + }; + }, + }, + { + key: "radar", + value: function () { + return ( + (this.opts.yaxis[0].labels.style.fontSize = "13px"), + (this.opts.yaxis[0].labels.offsetY = 6), + { + dataLabels: { enabled: !0, style: { colors: ["#a8a8a8"], fontSize: "11px" } }, + stroke: { width: 2 }, + markers: { size: 3, strokeWidth: 1, strokeOpacity: 1 }, + fill: { opacity: 0.2 }, + tooltip: { shared: !1, intersect: !0, followCursor: !0 }, + grid: { show: !1 }, + xaxis: { tooltip: { enabled: !1 }, crosshairs: { show: !1 } }, + } + ); + }, + }, + { + key: "radialBar", + value: function () { + return { + chart: { animations: { dynamicAnimation: { enabled: !0, speed: 800 } }, toolbar: { show: !1 } }, + fill: { gradient: { shade: "dark", shadeIntensity: 0.4, inverseColors: !1, type: "diagonal2", opacityFrom: 1, opacityTo: 1, stops: [70, 98, 100] } }, + padding: { right: 0, left: 0 }, + legend: { show: !1, position: "right" }, + tooltip: { enabled: !1, fillSeriesColor: !0 }, + }; + }, + }, + ], + [ + { + key: "convertCatToNumeric", + value: function (t) { + (t.xaxis.type = "numeric"), + (t.xaxis.convertedCatToNumeric = !0), + (t.xaxis.labels = t.xaxis.labels || {}), + (t.xaxis.labels.formatter = + t.xaxis.labels.formatter || + function (t) { + return t; + }), + (t.chart = t.chart || {}), + (t.chart.zoom = t.chart.zoom || (window.Apex.chart && window.Apex.chart.zoom) || {}); + var e = t.xaxis.labels.formatter, + i = t.xaxis.categories && t.xaxis.categories.length ? t.xaxis.categories : t.labels; + return ( + i && + i.length && + (t.xaxis.labels.formatter = function (t) { + return e(i[t - 1]); + }), + (t.xaxis.categories = []), + (t.labels = []), + (t.chart.zoom.enabled = t.chart.zoom.enabled || !1), + t + ); + }, + }, + ] + ), + t + ); + })(), + A = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o( + t, + [ + { + key: "getStackedSeriesTotals", + value: function () { + for (var t = this.w, e = [], i = 0; i < t.globals.series[t.globals.maxValsInArrayIndex].length; i++) { + for (var a = 0, s = 0; s < t.globals.series.length; s++) a += t.globals.series[s][i]; + e.push(a); + } + return (t.globals.stackedSeriesTotals = e), e; + }, + }, + { + key: "getSeriesTotalByIndex", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null; + return null === t + ? this.w.config.series.reduce(function (t, e) { + return t + e; + }, 0) + : this.w.globals.series[t].reduce(function (t, e) { + return t + e; + }, 0); + }, + }, + { + key: "isSeriesNull", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null; + return ( + 0 === + (null === t + ? this.w.config.series.filter(function (t) { + return null !== t; + }) + : this.w.globals.series[t].filter(function (t) { + return null !== t; + }) + ).length + ); + }, + }, + { + key: "seriesHaveSameValues", + value: function (t) { + return this.w.globals.series[t].every(function (t, e, i) { + return t === i[0]; + }); + }, + }, + { + key: "getLargestSeries", + value: function () { + var t = this.w; + t.globals.maxValsInArrayIndex = t.globals.series + .map(function (t) { + return t.length; + }) + .indexOf( + Math.max.apply( + Math, + t.globals.series.map(function (t) { + return t.length; + }) + ) + ); + }, + }, + { + key: "getLargestMarkerSize", + value: function () { + var t = this.w, + e = 0; + return ( + t.globals.markers.size.forEach(function (t) { + e = Math.max(e, t); + }), + (t.globals.markers.largestSize = e), + e + ); + }, + }, + { + key: "getSeriesTotals", + value: function () { + var t = this.w; + t.globals.seriesTotals = t.globals.series.map(function (t, e) { + var i = 0; + if (Array.isArray(t)) for (var a = 0; a < t.length; a++) i += t[a]; + else i += t; + return i; + }); + }, + }, + { + key: "getSeriesTotalsXRange", + value: function (t, e) { + var i = this.w; + return i.globals.series.map(function (a, s) { + for (var n = 0, r = 0; r < a.length; r++) i.globals.seriesX[s][r] > t && i.globals.seriesX[s][r] < e && (n += a[r]); + return n; + }); + }, + }, + { + key: "getPercentSeries", + value: function () { + var t = this.w; + t.globals.seriesPercent = t.globals.series.map(function (e, i) { + var a = []; + if (Array.isArray(e)) + for (var s = 0; s < e.length; s++) { + var n = t.globals.stackedSeriesTotals[s], + r = (100 * e[s]) / n; + a.push(r); + } + else { + var o = + (100 * e) / + t.globals.seriesTotals.reduce(function (t, e) { + return t + e; + }, 0); + a.push(o); + } + return a; + }); + }, + }, + { + key: "getCalculatedRatios", + value: function () { + var t, + e, + i, + a, + s, + n = this.w.globals, + r = [], + o = [], + l = 0.1, + h = 0; + if (((n.yRange = []), n.isMultipleYAxis)) for (var c = 0; c < n.minYArr.length; c++) n.yRange.push(Math.abs(n.minYArr[c] - n.maxYArr[c])), o.push(0); + else n.yRange.push(Math.abs(n.minY - n.maxY)); + (n.xRange = Math.abs(n.maxX - n.minX)), (n.zRange = Math.abs(n.maxZ - n.minZ)); + for (var d = 0; d < n.yRange.length; d++) r.push(n.yRange[d] / n.gridHeight); + if ( + ((e = n.xRange / n.gridWidth), + (i = Math.abs(n.initialmaxX - n.initialminX) / n.gridWidth), + (t = n.yRange / n.gridWidth), + (a = n.xRange / n.gridHeight), + (s = (n.zRange / n.gridHeight) * 16), + n.minY !== Number.MIN_VALUE && 0 !== Math.abs(n.minY) && (n.hasNegs = !0), + n.isMultipleYAxis) + ) { + o = []; + for (var u = 0; u < r.length; u++) o.push(-n.minYArr[u] / r[u]); + } else o.push(-n.minY / r[0]), n.minY !== Number.MIN_VALUE && 0 !== Math.abs(n.minY) && ((l = -n.minY / t), (h = n.minX / e)); + return { yRatio: r, invertedYRatio: t, zRatio: s, xRatio: e, initialXRatio: i, invertedXRatio: a, baseLineInvertedY: l, baseLineY: o, baseLineX: h }; + }, + }, + { + key: "getLogSeries", + value: function (t) { + var e = this.w; + return ( + (e.globals.seriesLog = t.map(function (t, i) { + return e.config.yaxis[i] && e.config.yaxis[i].logarithmic + ? t.map(function (t) { + return null === t ? null : (Math.log(t) - Math.log(e.globals.minYArr[i])) / (Math.log(e.globals.maxYArr[i]) - Math.log(e.globals.minYArr[i])); + }) + : t; + })), + e.globals.seriesLog + ); + }, + }, + { + key: "getLogYRatios", + value: function (t) { + var e = this, + i = this.w, + a = this.w.globals; + return ( + (a.yLogRatio = t.slice()), + (a.logYRange = a.yRange.map(function (t, s) { + if (i.config.yaxis[s] && e.w.config.yaxis[s].logarithmic) { + var n, + r = -Number.MAX_VALUE, + o = Number.MIN_VALUE; + return ( + a.seriesLog.forEach(function (t, e) { + t.forEach(function (t) { + i.config.yaxis[e] && i.config.yaxis[e].logarithmic && ((r = Math.max(t, r)), (o = Math.min(t, o))); + }); + }), + (n = Math.pow(a.yRange[s], Math.abs(o - r) / a.yRange[s])), + (a.yLogRatio[s] = n / a.gridHeight), + n + ); + } + })), + a.yLogRatio + ); + }, + }, + ], + [ + { + key: "checkComboSeries", + value: function (t) { + var e = !1, + i = !1; + return ( + t.length && + void 0 !== t[0].type && + ((e = !0), + t.forEach(function (t) { + ("bar" !== t.type && "column" !== t.type) || (i = !0); + })), + { comboCharts: e, comboChartsHasBars: i } + ); + }, + }, + { + key: "extendArrayProps", + value: function (t, e) { + return ( + e.yaxis && (e = t.extendYAxis(e)), + e.annotations && (e.annotations.yaxis && (e = t.extendYAxisAnnotations(e)), e.annotations.xaxis && (e = t.extendXAxisAnnotations(e)), e.annotations.points && (e = t.extendPointAnnotations(e))), + e + ); + }, + }, + ] + ), + t + ); + })(), + C = (function () { + function t(e) { + n(this, t), (this.opts = e); + } + return ( + o(t, [ + { + key: "init", + value: function () { + var t = this.opts, + e = new y(), + i = new S(t); + (this.chartType = t.chart.type), + "histogram" === this.chartType && ((t.chart.type = "bar"), (t = p.extend({ plotOptions: { bar: { columnWidth: "99.99%" } } }, t))), + (t.series = this.checkEmptySeries(t.series)), + (t = this.extendYAxis(t)), + (t = this.extendAnnotations(t)); + var a = e.init(), + n = {}; + if (t && "object" === s(t)) { + var r = {}; + switch (this.chartType) { + case "line": + r = i.line(); + break; + case "area": + r = i.area(); + break; + case "bar": + r = i.bar(); + break; + case "candlestick": + r = i.candlestick(); + break; + case "rangeBar": + r = i.rangeBar(); + break; + case "histogram": + r = i.bar(); + break; + case "bubble": + r = i.bubble(); + break; + case "scatter": + r = i.scatter(); + break; + case "heatmap": + r = i.heatmap(); + break; + case "pie": + r = i.pie(); + break; + case "donut": + r = i.donut(); + break; + case "radar": + r = i.radar(); + break; + case "radialBar": + r = i.radialBar(); + break; + default: + r = i.line(); + } + t.chart.brush && t.chart.brush.enabled && (r = i.brush(r)), + t.chart.stacked && "100%" === t.chart.stackType && i.stacked100(), + this.checkForDarkTheme(window.Apex), + this.checkForDarkTheme(t), + (t.xaxis = t.xaxis || window.Apex.xaxis || {}); + var o = A.checkComboSeries(t.series); + ("line" !== t.chart.type && "area" !== t.chart.type && "scatter" !== t.chart.type) || + o.comboChartsHasBars || + "datetime" === t.xaxis.type || + "numeric" === t.xaxis.type || + "between" === t.xaxis.tickPlacement || + (t = S.convertCatToNumeric(t)), + ((t.chart.sparkline && t.chart.sparkline.enabled) || (window.Apex.chart && window.Apex.chart.sparkline && window.Apex.chart.sparkline.enabled)) && (r = i.sparkline(r)), + (n = p.extend(a, r)); + } + var l = p.extend(n, window.Apex); + return (a = p.extend(l, t)), (a = this.handleUserInputErrors(a)); + }, + }, + { + key: "extendYAxis", + value: function (t) { + var e = new y(); + return ( + void 0 === t.yaxis && (t.yaxis = {}), + t.yaxis.constructor !== Array && window.Apex.yaxis && window.Apex.yaxis.constructor !== Array && (t.yaxis = p.extend(t.yaxis, window.Apex.yaxis)), + t.yaxis.constructor !== Array ? (t.yaxis = [p.extend(e.yAxis, t.yaxis)]) : (t.yaxis = p.extendArray(t.yaxis, e.yAxis)), + t + ); + }, + }, + { + key: "extendAnnotations", + value: function (t) { + return ( + void 0 === t.annotations && ((t.annotations = {}), (t.annotations.yaxis = []), (t.annotations.xaxis = []), (t.annotations.points = [])), + (t = this.extendYAxisAnnotations(t)), + (t = this.extendXAxisAnnotations(t)), + (t = this.extendPointAnnotations(t)) + ); + }, + }, + { + key: "extendYAxisAnnotations", + value: function (t) { + var e = new y(); + return (t.annotations.yaxis = p.extendArray(void 0 !== t.annotations.yaxis ? t.annotations.yaxis : [], e.yAxisAnnotation)), t; + }, + }, + { + key: "extendXAxisAnnotations", + value: function (t) { + var e = new y(); + return (t.annotations.xaxis = p.extendArray(void 0 !== t.annotations.xaxis ? t.annotations.xaxis : [], e.xAxisAnnotation)), t; + }, + }, + { + key: "extendPointAnnotations", + value: function (t) { + var e = new y(); + return (t.annotations.points = p.extendArray(void 0 !== t.annotations.points ? t.annotations.points : [], e.pointAnnotation)), t; + }, + }, + { + key: "checkForDarkTheme", + value: function (t) { + t.theme && + "dark" === t.theme.mode && + (t.tooltip || (t.tooltip = {}), "light" !== t.tooltip.theme && (t.tooltip.theme = "dark"), t.chart.foreColor || (t.chart.foreColor = "#f6f7f8"), t.theme.palette || (t.theme.palette = "palette4")); + }, + }, + { + key: "checkEmptySeries", + value: function (t) { + return 0 === t.length ? [{ data: [] }] : t; + }, + }, + { + key: "handleUserInputErrors", + value: function (t) { + var e = t; + if (e.tooltip.shared && e.tooltip.intersect) throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false."); + if ( + (e.chart.scroller && console.warn("Scroller has been deprecated since v2.0.0. Please remove the configuration for chart.scroller"), + ("bar" === e.chart.type || "rangeBar" === e.chart.type) && e.plotOptions.bar.horizontal) + ) { + if (e.yaxis.length > 1) throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false"); + e.yaxis[0].reversed && (e.yaxis[0].opposite = !0), (e.xaxis.tooltip.enabled = !1), (e.yaxis[0].tooltip.enabled = !1), (e.chart.zoom.enabled = !1); + } + return ( + ("bar" !== e.chart.type && "rangeBar" !== e.chart.type) || + (e.tooltip.shared && + ("barWidth" === e.xaxis.crosshairs.width && + e.series.length > 1 && + (console.warn('crosshairs.width = "barWidth" is only supported in single series, not in a multi-series barChart.'), (e.xaxis.crosshairs.width = "tickWidth")), + e.plotOptions.bar.horizontal && ((e.states.hover.type = "none"), (e.tooltip.shared = !1)), + e.tooltip.followCursor || + (console.warn("followCursor option in shared columns cannot be turned off. Please set %ctooltip.followCursor: true", "color: blue;"), (e.tooltip.followCursor = !0)))), + "candlestick" === e.chart.type && e.yaxis[0].reversed && (console.warn("Reversed y-axis in candlestick chart is not supported."), (e.yaxis[0].reversed = !1)), + e.chart.group && + 0 === e.yaxis[0].labels.minWidth && + console.warn("It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour."), + Array.isArray(e.stroke.width) && + "line" !== e.chart.type && + "area" !== e.chart.type && + (console.warn("stroke.width option accepts array only for line and area charts. Reverted back to Number"), (e.stroke.width = e.stroke.width[0])), + e + ); + }, + }, + ]), + t + ); + })(), + L = (function () { + function t() { + n(this, t); + } + return ( + o(t, [ + { + key: "globalVars", + value: function (t) { + return { + chartID: null, + cuid: null, + events: { beforeMount: [], mounted: [], updated: [], clicked: [], selection: [], dataPointSelection: [], zoomed: [], scrolled: [] }, + colors: [], + clientX: null, + clientY: null, + fill: { colors: [] }, + stroke: { colors: [] }, + dataLabels: { style: { colors: [] } }, + radarPolygons: { fill: { colors: [] } }, + markers: { colors: [], size: t.markers.size, largestSize: 0 }, + animationEnded: !1, + isTouchDevice: "ontouchstart" in window || navigator.msMaxTouchPoints, + isDirty: !1, + isExecCalled: !1, + initialConfig: null, + lastXAxis: [], + lastYAxis: [], + series: [], + seriesRangeStart: [], + seriesRangeEnd: [], + seriesPercent: [], + seriesTotals: [], + stackedSeriesTotals: [], + seriesX: [], + seriesZ: [], + labels: [], + timelineLabels: [], + invertedTimelineLabels: [], + seriesNames: [], + noLabelsProvided: !1, + allSeriesCollapsed: !1, + collapsedSeries: [], + collapsedSeriesIndices: [], + ancillaryCollapsedSeries: [], + ancillaryCollapsedSeriesIndices: [], + risingSeries: [], + dataFormatXNumeric: !1, + selectedDataPoints: [], + ignoreYAxisIndexes: [], + padHorizontal: 0, + maxValsInArrayIndex: 0, + radialSize: 0, + zoomEnabled: "zoom" === t.chart.toolbar.autoSelected && t.chart.toolbar.tools.zoom && t.chart.zoom.enabled, + panEnabled: "pan" === t.chart.toolbar.autoSelected && t.chart.toolbar.tools.pan, + selectionEnabled: "selection" === t.chart.toolbar.autoSelected && t.chart.toolbar.tools.selection, + yaxis: null, + minY: Number.MIN_VALUE, + maxY: -Number.MAX_VALUE, + minYArr: [], + maxYArr: [], + maxX: -Number.MAX_VALUE, + initialmaxX: -Number.MAX_VALUE, + minX: Number.MIN_VALUE, + initialminX: Number.MIN_VALUE, + minZ: Number.MIN_VALUE, + maxZ: -Number.MAX_VALUE, + minXDiff: Number.MAX_VALUE, + mousedown: !1, + lastClientPosition: {}, + visibleXRange: void 0, + yRange: [], + zRange: 0, + xRange: 0, + yValueDecimal: 0, + total: 0, + SVGNS: "http://www.w3.org/2000/svg", + svgWidth: 0, + svgHeight: 0, + noData: !1, + locale: {}, + dom: {}, + memory: { methodsToExec: [] }, + shouldAnimate: !0, + skipLastTimelinelabel: !1, + delayedElements: [], + axisCharts: !0, + isXNumeric: !1, + isDataXYZ: !1, + resized: !1, + resizeTimer: null, + comboCharts: !1, + comboChartsHasBars: !1, + dataChanged: !1, + previousPaths: [], + seriesXvalues: [], + seriesYvalues: [], + seriesCandleO: [], + seriesCandleH: [], + seriesCandleL: [], + seriesCandleC: [], + allSeriesHasEqualX: !0, + dataPoints: 0, + pointsArray: [], + dataLabelsRects: [], + lastDrawnDataLabelsIndexes: [], + hasNullValues: !1, + easing: null, + zoomed: !1, + gridWidth: 0, + gridHeight: 0, + yAxisScale: [], + xAxisScale: null, + xAxisTicksPositions: [], + timescaleTicks: [], + rotateXLabels: !1, + defaultLabels: !1, + xLabelFormatter: void 0, + yLabelFormatters: [], + xaxisTooltipFormatter: void 0, + ttKeyFormatter: void 0, + ttVal: void 0, + ttZFormatter: void 0, + LINE_HEIGHT_RATIO: 1.618, + xAxisLabelsHeight: 0, + yAxisLabelsWidth: 0, + scaleX: 1, + scaleY: 1, + translateX: 0, + translateY: 0, + translateYAxisX: [], + yLabelsCoords: [], + yTitleCoords: [], + yAxisWidths: [], + translateXAxisY: 0, + translateXAxisX: 0, + tooltip: null, + tooltipOpts: null, + }; + }, + }, + { + key: "init", + value: function (t) { + var e = this.globalVars(t); + return ( + (e.initialConfig = p.extend({}, t)), + (e.initialSeries = JSON.parse(JSON.stringify(e.initialConfig.series))), + (e.lastXAxis = JSON.parse(JSON.stringify(e.initialConfig.xaxis))), + (e.lastYAxis = JSON.parse(JSON.stringify(e.initialConfig.yaxis))), + e + ); + }, + }, + ]), + t + ); + })(), + E = (function () { + function t(e) { + n(this, t), (this.opts = e); + } + return ( + o(t, [ + { + key: "init", + value: function () { + var t = new C(this.opts).init(); + return { config: t, globals: new L().init(t) }; + }, + }, + ]), + t + ); + })(), + P = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.opts = null), (this.seriesIndex = 0); + } + return ( + o(t, [ + { + key: "clippedImgArea", + value: function (t) { + var e = this.w, + i = e.config, + a = parseInt(e.globals.gridWidth), + s = parseInt(e.globals.gridHeight), + n = a > s ? a : s, + r = t.image, + o = 0, + l = 0; + void 0 === t.width && void 0 === t.height + ? void 0 !== i.fill.image.width && void 0 !== i.fill.image.height + ? ((o = i.fill.image.width + 1), (l = i.fill.image.height)) + : ((o = n + 1), (l = n)) + : ((o = t.width), (l = t.height)); + var h = document.createElementNS(e.globals.SVGNS, "pattern"); + m.setAttrs(h, { id: t.patternID, patternUnits: t.patternUnits ? t.patternUnits : "userSpaceOnUse", width: o + "px", height: l + "px" }); + var c = document.createElementNS(e.globals.SVGNS, "image"); + h.appendChild(c), + c.setAttributeNS("http://www.w3.org/1999/xlink", "href", r), + m.setAttrs(c, { x: 0, y: 0, preserveAspectRatio: "none", width: o + "px", height: l + "px" }), + (c.style.opacity = t.opacity), + e.globals.dom.elDefs.node.appendChild(h); + }, + }, + { + key: "getSeriesIndex", + value: function (t) { + var e = this.w; + return ( + ("bar" === e.config.chart.type && e.config.plotOptions.bar.distributed) || "heatmap" === e.config.chart.type + ? (this.seriesIndex = t.seriesNumber) + : (this.seriesIndex = t.seriesNumber % e.globals.series.length), + this.seriesIndex + ); + }, + }, + { + key: "fillPath", + value: function (t) { + var e = this.w; + this.opts = t; + var i, + a, + s, + n = this.w.config; + this.seriesIndex = this.getSeriesIndex(t); + var r = this.getFillColors(), + o = r[this.seriesIndex]; + "function" == typeof o && (o = o({ seriesIndex: this.seriesIndex, value: t.value, w: e })); + var l = this.getFillType(this.seriesIndex), + h = Array.isArray(n.fill.opacity) ? n.fill.opacity[this.seriesIndex] : n.fill.opacity, + c = o; + return ( + t.color && (o = t.color), + -1 === o.indexOf("rgb") ? (c = p.hexToRgba(o, h)) : o.indexOf("rgba") > -1 && (h = "0." + p.getOpacityFromRGBA(r[this.seriesIndex])), + "pattern" === l && (a = this.handlePatternFill(a, o, h, c)), + "gradient" === l && (s = this.handleGradientFill(s, o, h, this.seriesIndex)), + n.fill.image.src.length > 0 && "image" === l + ? t.seriesNumber < n.fill.image.src.length + ? (this.clippedImgArea({ opacity: h, image: n.fill.image.src[t.seriesNumber], patternUnits: t.patternUnits, patternID: "pattern".concat(e.globals.cuid).concat(t.seriesNumber + 1) }), + (i = "url(#pattern".concat(e.globals.cuid).concat(t.seriesNumber + 1, ")"))) + : (i = c) + : (i = "gradient" === l ? s : "pattern" === l ? a : c), + t.solid && (i = c), + i + ); + }, + }, + { + key: "getFillType", + value: function (t) { + var e = this.w; + return Array.isArray(e.config.fill.type) ? e.config.fill.type[t] : e.config.fill.type; + }, + }, + { + key: "getFillColors", + value: function () { + var t = this.w, + e = t.config, + i = this.opts, + a = []; + return ( + t.globals.comboCharts + ? "line" === t.config.series[this.seriesIndex].type + ? t.globals.stroke.colors instanceof Array + ? (a = t.globals.stroke.colors) + : a.push(t.globals.stroke.colors) + : t.globals.fill.colors instanceof Array + ? (a = t.globals.fill.colors) + : a.push(t.globals.fill.colors) + : "line" === e.chart.type + ? t.globals.stroke.colors instanceof Array + ? (a = t.globals.stroke.colors) + : a.push(t.globals.stroke.colors) + : t.globals.fill.colors instanceof Array + ? (a = t.globals.fill.colors) + : a.push(t.globals.fill.colors), + void 0 !== i.fillColors && ((a = []), i.fillColors instanceof Array ? (a = i.fillColors.slice()) : a.push(i.fillColors)), + a + ); + }, + }, + { + key: "handlePatternFill", + value: function (t, e, i, a) { + var s = this.w.config, + n = this.opts, + r = new m(this.ctx), + o = + void 0 === s.fill.pattern.strokeWidth + ? Array.isArray(s.stroke.width) + ? s.stroke.width[this.seriesIndex] + : s.stroke.width + : Array.isArray(s.fill.pattern.strokeWidth) + ? s.fill.pattern.strokeWidth[this.seriesIndex] + : s.fill.pattern.strokeWidth, + l = e; + s.fill.pattern.style instanceof Array + ? (t = void 0 !== s.fill.pattern.style[n.seriesNumber] ? r.drawPattern(s.fill.pattern.style[n.seriesNumber], s.fill.pattern.width, s.fill.pattern.height, l, o, i) : a) + : (t = r.drawPattern(s.fill.pattern.style, s.fill.pattern.width, s.fill.pattern.height, l, o, i)); + return t; + }, + }, + { + key: "handleGradientFill", + value: function (t, e, i, a) { + var s, + n, + r = this.w.config, + o = this.opts, + l = new m(this.ctx), + h = new p(), + c = r.fill.gradient.type, + d = void 0 === r.fill.gradient.opacityFrom ? i : Array.isArray(r.fill.gradient.opacityFrom) ? r.fill.gradient.opacityFrom[a] : r.fill.gradient.opacityFrom, + u = void 0 === r.fill.gradient.opacityTo ? i : Array.isArray(r.fill.gradient.opacityTo) ? r.fill.gradient.opacityTo[a] : r.fill.gradient.opacityTo; + if ( + ((s = e), + (n = + void 0 === r.fill.gradient.gradientToColors || 0 === r.fill.gradient.gradientToColors.length + ? "dark" === r.fill.gradient.shade + ? h.shadeColor(-1 * parseFloat(r.fill.gradient.shadeIntensity), e) + : h.shadeColor(parseFloat(r.fill.gradient.shadeIntensity), e) + : r.fill.gradient.gradientToColors[o.seriesNumber]), + r.fill.gradient.inverseColors) + ) { + var f = s; + (s = n), (n = f); + } + return l.drawGradient(c, s, n, d, u, o.size, r.fill.gradient.stops, r.fill.gradient.colorStops, a); + }, + }, + ]), + t + ); + })(), + T = (function () { + function t(e, i) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "setGlobalMarkerSize", + value: function () { + var t = this.w; + if (((t.globals.markers.size = Array.isArray(t.config.markers.size) ? t.config.markers.size : [t.config.markers.size]), t.globals.markers.size.length > 0)) { + if (t.globals.markers.size.length < t.globals.series.length + 1) + for (var e = 0; e <= t.globals.series.length; e++) void 0 === t.globals.markers.size[e] && t.globals.markers.size.push(t.globals.markers.size[0]); + } else + t.globals.markers.size = t.config.series.map(function (e) { + return t.config.markers.size; + }); + }, + }, + { + key: "plotChartMarkers", + value: function (t, e, i) { + var a, + s = this, + n = this.w, + r = e, + o = t, + l = null, + h = new m(this.ctx); + if ((n.globals.markers.size[e] > 0 && (l = h.group({ class: "apexcharts-series-markers" })).attr("clip-path", "url(#gridRectMarkerMask".concat(n.globals.cuid, ")")), o.x instanceof Array)) + for ( + var c = function (t) { + var c = i; + 1 === i && 0 === t && (c = 0), 1 === i && 1 === t && (c = 1); + var d = "apexcharts-marker"; + if ( + (("line" !== n.config.chart.type && "area" !== n.config.chart.type) || n.globals.comboCharts || n.config.tooltip.intersect || (d += " no-pointer-events"), + Array.isArray(n.config.markers.size) ? n.globals.markers.size[e] > 0 : n.config.markers.size > 0) + ) { + p.isNumber(o.y[t]) ? (d += " w".concat((Math.random() + 1).toString(36).substring(4))) : (d = "apexcharts-nullpoint"); + var u = s.getMarkerConfig(d, e); + n.config.markers.discrete.map(function (t) { + t.seriesIndex === e && t.dataPointIndex === c && ((u.pointStrokeColor = t.strokeColor), (u.pointFillColor = t.fillColor), (u.pSize = t.size)); + }), + n.config.series[r].data[i] && + (n.config.series[r].data[i].fillColor && (u.pointFillColor = n.config.series[r].data[i].fillColor), + n.config.series[r].data[i].strokeColor && (u.pointStrokeColor = n.config.series[r].data[i].strokeColor)), + (a = h.drawMarker(o.x[t], o.y[t], u)).attr("rel", c), + a.attr("j", c), + a.attr("index", e), + a.node.setAttribute("default-marker-size", u.pSize), + new x(s.ctx).setSelectionFilter(a, e, c), + s.addEvents(a), + l && l.add(a); + } else void 0 === n.globals.pointsArray[e] && (n.globals.pointsArray[e] = []), n.globals.pointsArray[e].push([o.x[t], o.y[t]]); + }, + d = 0; + d < o.x.length; + d++ + ) + c(d); + return l; + }, + }, + { + key: "getMarkerConfig", + value: function (t, e) { + var i = this.w, + a = this.getMarkerStyle(e); + return { + pSize: i.globals.markers.size[e], + pRadius: i.config.markers.radius, + pWidth: i.config.markers.strokeWidth, + pointStrokeColor: a.pointStrokeColor, + pointFillColor: a.pointFillColor, + shape: i.config.markers.shape instanceof Array ? i.config.markers.shape[e] : i.config.markers.shape, + class: t, + pointStrokeOpacity: i.config.markers.strokeOpacity, + pointFillOpacity: i.config.markers.fillOpacity, + seriesIndex: e, + }; + }, + }, + { + key: "addEvents", + value: function (t) { + var e = new m(this.ctx); + t.node.addEventListener("mouseenter", e.pathMouseEnter.bind(this.ctx, t)), + t.node.addEventListener("mouseleave", e.pathMouseLeave.bind(this.ctx, t)), + t.node.addEventListener("mousedown", e.pathMouseDown.bind(this.ctx, t)), + t.node.addEventListener("touchstart", e.pathMouseDown.bind(this.ctx, t), { passive: !0 }); + }, + }, + { + key: "getMarkerStyle", + value: function (t) { + var e = this.w, + i = e.globals.markers.colors, + a = e.config.markers.strokeColor || e.config.markers.strokeColors; + return { pointStrokeColor: a instanceof Array ? a[t] : a, pointFillColor: i instanceof Array ? i[t] : i }; + }, + }, + ]), + t + ); + })(), + M = (function () { + function t(e) { + n(this, t), + (this.ctx = e), + (this.w = e.w), + (this.initialAnim = this.w.config.chart.animations.enabled), + (this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled), + (this.radiusSizes = []); + } + return ( + o(t, [ + { + key: "draw", + value: function (t, e, i) { + var a = this.w, + s = new m(this.ctx), + n = i.realIndex, + r = i.pointsPos, + o = i.zRatio, + l = i.elParent, + h = s.group({ class: "apexcharts-series-markers apexcharts-series-".concat(a.config.chart.type) }); + if ((h.attr("clip-path", "url(#gridRectMarkerMask".concat(a.globals.cuid, ")")), r.x instanceof Array)) + for (var c = 0; c < r.x.length; c++) { + var d = e + 1, + u = !0; + 0 === e && 0 === c && (d = 0), 0 === e && 1 === c && (d = 1); + var f = 0, + g = a.globals.markers.size[n]; + o !== 1 / 0 && ((g = a.globals.seriesZ[n][d] / o), void 0 === this.radiusSizes[n] && this.radiusSizes.push([]), this.radiusSizes[n].push(g)), a.config.chart.animations.enabled || (f = g); + var p = r.x[c], + x = r.y[c]; + if (((f = f || 0), ((0 === p && 0 === x) || null === x || void 0 === a.globals.series[n][d]) && (u = !1), u)) { + var v = this.drawPoint(p, x, f, g, n, d, e); + h.add(v); + } + l.add(h); + } + }, + }, + { + key: "drawPoint", + value: function (t, e, i, a, s, n, r) { + var o = this.w, + l = s, + h = new v(this.ctx), + c = new x(this.ctx), + d = new P(this.ctx), + u = new T(this.ctx), + f = new m(this.ctx), + g = u.getMarkerConfig("apexcharts-marker", l), + p = d.fillPath({ seriesNumber: s, patternUnits: "objectBoundingBox", value: o.globals.series[s][r] }), + b = f.drawCircle(i); + if ( + (o.config.series[l].data[n] && o.config.series[l].data[n].fillColor && (p = o.config.series[l].data[n].fillColor), + b.attr({ cx: t, cy: e, fill: p, stroke: g.pointStrokeColor, strokeWidth: g.pWidth }), + o.config.chart.dropShadow.enabled) + ) { + var y = o.config.chart.dropShadow; + c.dropShadow(b, y, s); + } + if (this.initialAnim && !o.globals.dataChanged) { + var w = 1; + o.globals.resized || (w = o.config.chart.animations.speed), h.animateCircleRadius(b, 0, a, w, o.globals.easing); + } + if (o.globals.dataChanged) + if (this.dynamicAnim) { + var k, + S, + A, + C, + L = o.config.chart.animations.dynamicAnimation.speed; + null != (C = o.globals.previousPaths[s] && o.globals.previousPaths[s][r]) && ((k = C.x), (S = C.y), (A = void 0 !== C.r ? C.r : a)); + for (var E = 0; E < o.globals.collapsedSeries.length; E++) o.globals.collapsedSeries[E].index === s && ((L = 1), (a = 0)); + 0 === t && 0 === e && (a = 0), h.animateCircle(b, { cx: k, cy: S, r: A }, { cx: t, cy: e, r: a }, L, o.globals.easing); + } else b.attr({ r: a }); + return b.attr({ rel: n, j: n, index: s, "default-marker-size": a }), c.setSelectionFilter(b, s, n), u.addEvents(b), b.node.classList.add("apexcharts-marker"), b; + }, + }, + { + key: "centerTextInBubble", + value: function (t) { + var e = this.w; + return { y: (t += parseInt(e.config.dataLabels.style.fontSize) / 4) }; + }, + }, + ]), + t + ); + })(), + z = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "dataLabelsCorrection", + value: function (t, e, i, a, s, n, r) { + var o = this.w, + l = !1, + h = new m(this.ctx).getTextRects(i, r), + c = h.width, + d = h.height; + void 0 === o.globals.dataLabelsRects[a] && (o.globals.dataLabelsRects[a] = []), o.globals.dataLabelsRects[a].push({ x: t, y: e, width: c, height: d }); + var u = o.globals.dataLabelsRects[a].length - 2, + f = void 0 !== o.globals.lastDrawnDataLabelsIndexes[a] ? o.globals.lastDrawnDataLabelsIndexes[a][o.globals.lastDrawnDataLabelsIndexes[a].length - 1] : 0; + if (void 0 !== o.globals.dataLabelsRects[a][u]) { + var g = o.globals.dataLabelsRects[a][f]; + (t > g.x + g.width + 2 || e > g.y + g.height + 2 || t + c < g.x) && (l = !0); + } + return (0 === s || n) && (l = !0), { x: t, y: e, drawnextLabel: l }; + }, + }, + { + key: "drawDataLabel", + value: function (t, e, i) { + var a = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : "top", + s = this.w, + n = new m(this.ctx), + r = s.config.dataLabels, + o = 0, + l = 0, + h = i, + c = null; + if (!r.enabled || t.x instanceof Array != !0) return c; + (c = n.group({ class: "apexcharts-data-labels" })).attr("clip-path", "url(#gridRectMarkerMask".concat(s.globals.cuid, ")")); + for (var d = 0; d < t.x.length; d++) + if (((o = t.x[d] + r.offsetX), (l = t.y[d] + r.offsetY - s.globals.markers.size[e] - 5), "bottom" === a && (l = l + 2 * s.globals.markers.size[e] + 1.4 * parseInt(r.style.fontSize)), !isNaN(o))) { + 1 === i && 0 === d && (h = 0), 1 === i && 1 === d && (h = 1); + var u = s.globals.series[e][h], + f = ""; + if ("bubble" === s.config.chart.type) (f = s.globals.seriesZ[e][h]), (l = t.y[d] + s.config.dataLabels.offsetY), (l = new M(this.ctx).centerTextInBubble(l, e, h).y); + else void 0 !== u && (f = s.config.dataLabels.formatter(u, { ctx: this.ctx, seriesIndex: e, dataPointIndex: h, w: s })); + this.plotDataLabelsText({ x: o, y: l, text: f, i: e, j: h, parent: c, offsetCorrection: !0, dataLabelsConfig: s.config.dataLabels }); + } + return c; + }, + }, + { + key: "plotDataLabelsText", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = t.x, + s = t.y, + n = t.i, + r = t.j, + o = t.text, + l = t.textAnchor, + h = t.parent, + c = t.dataLabelsConfig, + d = t.alwaysDrawDataLabel, + u = t.offsetCorrection; + if (!(Array.isArray(e.config.dataLabels.enabledOnSeries) && e.config.dataLabels.enabledOnSeries.indexOf(n) > -1)) { + var f = { x: a, y: s, drawnextLabel: !0 }; + if ((u && (f = this.dataLabelsCorrection(a, s, o, n, r, d, parseInt(c.style.fontSize))), e.globals.zoomed || ((a = f.x), (s = f.y)), f.drawnextLabel)) { + var g = i.drawText({ + width: 100, + height: parseInt(c.style.fontSize), + x: a, + y: s, + foreColor: e.globals.dataLabels.style.colors[n], + textAnchor: l || c.textAnchor, + text: o, + fontSize: c.style.fontSize, + fontFamily: c.style.fontFamily, + }); + if ((g.attr({ class: "apexcharts-datalabel", cx: a, cy: s }), c.dropShadow.enabled)) { + var p = c.dropShadow; + new x(this.ctx).dropShadow(g, p); + } + h.add(g), void 0 === e.globals.lastDrawnDataLabelsIndexes[n] && (e.globals.lastDrawnDataLabelsIndexes[n] = []), e.globals.lastDrawnDataLabelsIndexes[n].push(r); + } + } + }, + }, + ]), + t + ); + })(), + I = (function () { + function t(e, i) { + n(this, t), (this.ctx = e), (this.w = e.w); + var a = this.w; + (this.barOptions = a.config.plotOptions.bar), + (this.isHorizontal = this.barOptions.horizontal), + (this.strokeWidth = a.config.stroke.width), + (this.isNullValue = !1), + (this.xyRatios = i), + null !== this.xyRatios && + ((this.xRatio = i.xRatio), + (this.yRatio = i.yRatio), + (this.invertedXRatio = i.invertedXRatio), + (this.invertedYRatio = i.invertedYRatio), + (this.baseLineY = i.baseLineY), + (this.baseLineInvertedY = i.baseLineInvertedY)), + (this.yaxisIndex = 0), + (this.seriesLen = 0); + } + return ( + o(t, [ + { + key: "draw", + value: function (t, e) { + var i = this.w, + a = new m(this.ctx), + s = new A(this.ctx, i); + (t = s.getLogSeries(t)), (this.series = t), (this.yRatio = s.getLogYRatios(this.yRatio)), this.initVariables(t); + var n = a.group({ class: "apexcharts-bar-series apexcharts-plot-series" }); + i.config.dataLabels.enabled && + this.totalItems > i.config.plotOptions.bar.dataLabels.maxItems && + console.warn("WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering."); + for (var r = 0, o = 0; r < t.length; r++, o++) { + var l, + h, + c, + d, + u = void 0, + f = void 0, + g = void 0, + x = void 0, + v = [], + b = [], + y = i.globals.comboCharts ? e[r] : r, + w = a.group({ class: "apexcharts-series", rel: r + 1, seriesName: p.escapeString(i.globals.seriesNames[y]), "data:realIndex": y }); + this.ctx.series.addCollapsedClassToSeries(w, y), t[r].length > 0 && (this.visibleI = this.visibleI + 1); + var k = 0, + S = 0, + C = 0; + this.yRatio.length > 1 && (this.yaxisIndex = y), (this.isReversed = i.config.yaxis[this.yaxisIndex] && i.config.yaxis[this.yaxisIndex].reversed); + var L = this.initialPositions(); + (x = L.y), (S = L.barHeight), (h = L.yDivision), (d = L.zeroW), (g = L.x), (C = L.barWidth), (l = L.xDivision), (c = L.zeroH), this.horizontal || b.push(g + C / 2); + for (var E = a.group({ class: "apexcharts-datalabels" }), P = 0, T = i.globals.dataPoints; P < i.globals.dataPoints; P++, T--) { + void 0 === this.series[r][P] || null === t[r][P] ? (this.isNullValue = !0) : (this.isNullValue = !1), + i.config.stroke.show && (k = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[y] : this.strokeWidth); + var M = null; + this.isHorizontal + ? ((M = this.drawBarPaths({ indexes: { i: r, j: P, realIndex: y, bc: o }, barHeight: S, strokeWidth: k, pathTo: u, pathFrom: f, zeroW: d, x: g, y: x, yDivision: h, elSeries: w })), + (C = this.series[r][P] / this.invertedYRatio)) + : ((M = this.drawColumnPaths({ indexes: { i: r, j: P, realIndex: y, bc: o }, x: g, y: x, xDivision: l, pathTo: u, pathFrom: f, barWidth: C, zeroH: c, strokeWidth: k, elSeries: w })), + (S = this.series[r][P] / this.yRatio[this.yaxisIndex])), + (u = M.pathTo), + (f = M.pathFrom), + (x = M.y), + (g = M.x), + P > 0 && b.push(g + C / 2), + v.push(x); + var z = this.getPathFillColor(t, r, P, y); + w = this.renderSeries({ + realIndex: y, + pathFill: z, + j: P, + i: r, + pathFrom: f, + pathTo: u, + strokeWidth: k, + elSeries: w, + x: g, + y: x, + series: t, + barHeight: S, + barWidth: C, + elDataLabelsWrap: E, + visibleSeries: this.visibleI, + type: "bar", + }); + } + (i.globals.seriesXvalues[y] = b), (i.globals.seriesYvalues[y] = v), n.add(w); + } + return n; + }, + }, + { + key: "getPathFillColor", + value: function (t, e, i, a) { + var s = this.w, + n = new P(this.ctx), + r = null, + o = this.barOptions.distributed ? i : e; + this.barOptions.colors.ranges.length > 0 && + this.barOptions.colors.ranges.map(function (a) { + t[e][i] >= a.from && t[e][i] <= a.to && (r = a.color); + }); + return ( + s.config.series[e].data[i] && s.config.series[e].data[i].fillColor && (r = s.config.series[e].data[i].fillColor), + n.fillPath({ seriesNumber: this.barOptions.distributed ? o : a, color: r, value: t[e][i] }) + ); + }, + }, + { + key: "renderSeries", + value: function (t) { + var e = t.realIndex, + i = t.pathFill, + a = t.lineFill, + s = t.j, + n = t.i, + r = t.pathFrom, + o = t.pathTo, + l = t.strokeWidth, + h = t.elSeries, + c = t.x, + d = t.y, + u = t.series, + f = t.barHeight, + g = t.barWidth, + p = t.elDataLabelsWrap, + v = t.visibleSeries, + b = t.type, + y = this.w, + w = new m(this.ctx); + a || (a = this.barOptions.distributed ? y.globals.stroke.colors[s] : y.globals.stroke.colors[e]), + y.config.series[n].data[s] && y.config.series[n].data[s].strokeColor && (a = y.config.series[n].data[s].strokeColor), + this.isNullValue && (i = "none"); + var k = ((s / y.config.chart.animations.animateGradually.delay) * (y.config.chart.animations.speed / y.globals.dataPoints)) / 2.4, + S = w.renderPaths({ + i: n, + j: s, + realIndex: e, + pathFrom: r, + pathTo: o, + stroke: a, + strokeWidth: l, + strokeLineCap: y.config.stroke.lineCap, + fill: i, + animationDelay: k, + initialSpeed: y.config.chart.animations.speed, + dataChangeSpeed: y.config.chart.animations.dynamicAnimation.speed, + className: "apexcharts-".concat(b, "-area"), + id: "apexcharts-".concat(b, "-area"), + }); + S.attr("clip-path", "url(#gridRectMask".concat(y.globals.cuid, ")")), new x(this.ctx).setSelectionFilter(S, e, s), h.add(S); + var A = this.calculateDataLabelsPos({ x: c, y: d, i: n, j: s, series: u, realIndex: e, barHeight: f, barWidth: g, renderedPath: S, visibleSeries: v }); + return null !== A && p.add(A), h.add(p), h; + }, + }, + { + key: "initVariables", + value: function (t) { + var e = this.w; + (this.series = t), (this.totalItems = 0), (this.seriesLen = 0), (this.visibleI = -1), (this.visibleItems = 1); + for (var i = 0; i < t.length; i++) + if ((t[i].length > 0 && ((this.seriesLen = this.seriesLen + 1), (this.totalItems += t[i].length)), e.globals.isXNumeric)) + for (var a = 0; a < t[i].length; a++) e.globals.seriesX[i][a] > e.globals.minX && e.globals.seriesX[i][a] < e.globals.maxX && this.visibleItems++; + else this.visibleItems = e.globals.dataPoints; + 0 === this.seriesLen && (this.seriesLen = 1); + }, + }, + { + key: "initialPositions", + value: function () { + var t, + e, + i, + a, + s, + n, + r, + o, + l = this.w; + return ( + this.isHorizontal + ? ((s = (i = l.globals.gridHeight / l.globals.dataPoints) / this.seriesLen), + l.globals.isXNumeric && (s = (i = l.globals.gridHeight / this.totalItems) / this.seriesLen), + (s = (s * parseInt(this.barOptions.barHeight)) / 100), + (o = this.baseLineInvertedY + l.globals.padHorizontal + (this.isReversed ? l.globals.gridWidth : 0) - (this.isReversed ? 2 * this.baseLineInvertedY : 0)), + (e = (i - s * this.seriesLen) / 2)) + : ((n = (((a = l.globals.gridWidth / this.visibleItems) / this.seriesLen) * parseInt(this.barOptions.columnWidth)) / 100), + l.globals.isXNumeric && (n = (((a = l.globals.minXDiff / this.xRatio) / this.seriesLen) * parseInt(this.barOptions.columnWidth)) / 100), + (r = l.globals.gridHeight - this.baseLineY[this.yaxisIndex] - (this.isReversed ? l.globals.gridHeight : 0) + (this.isReversed ? 2 * this.baseLineY[this.yaxisIndex] : 0)), + (t = l.globals.padHorizontal + (a - n * this.seriesLen) / 2)), + { x: t, y: e, yDivision: i, xDivision: a, barHeight: s, barWidth: n, zeroH: r, zeroW: o } + ); + }, + }, + { + key: "drawBarPaths", + value: function (t) { + var e = t.indexes, + i = t.barHeight, + a = t.strokeWidth, + s = t.pathTo, + n = t.pathFrom, + r = t.zeroW, + o = t.x, + l = t.y, + h = t.yDivision, + c = t.elSeries, + d = this.w, + u = new m(this.ctx), + f = e.i, + g = e.j, + p = e.realIndex, + x = e.bc; + d.globals.isXNumeric && (l = (d.globals.seriesX[f][g] - d.globals.minX) / this.invertedXRatio - i); + var v = l + i * this.visibleI; + (s = u.move(r, v)), (n = u.move(r, v)), d.globals.previousPaths.length > 0 && (n = this.getPathFrom(p, g)); + var b = { + barHeight: i, + strokeWidth: a, + barYPosition: v, + x: (o = void 0 === this.series[f][g] || null === this.series[f][g] ? r : r + this.series[f][g] / this.invertedYRatio - 2 * (this.isReversed ? this.series[f][g] / this.invertedYRatio : 0)), + zeroW: r, + }, + y = this.barEndingShape(d, b, this.series, f, g); + if ( + ((s = s + u.line(y.newX, v) + y.path + u.line(r, v + i - a) + u.line(r, v)), + (n = n + u.line(r, v) + y.ending_p_from + u.line(r, v + i - a) + u.line(r, v + i - a) + u.line(r, v)), + d.globals.isXNumeric || (l += h), + this.barOptions.colors.backgroundBarColors.length > 0 && 0 === f) + ) { + x >= this.barOptions.colors.backgroundBarColors.length && (x = 0); + var w = this.barOptions.colors.backgroundBarColors[x], + k = u.drawRect(0, v - i * this.visibleI, d.globals.gridWidth, i * this.seriesLen, 0, w, this.barOptions.colors.backgroundBarOpacity); + c.add(k), k.node.classList.add("apexcharts-backgroundBar"); + } + return { pathTo: s, pathFrom: n, x: o, y: l, barYPosition: v }; + }, + }, + { + key: "drawColumnPaths", + value: function (t) { + var e = t.indexes, + i = t.x, + a = t.y, + s = t.xDivision, + n = t.pathTo, + r = t.pathFrom, + o = t.barWidth, + l = t.zeroH, + h = t.strokeWidth, + c = t.elSeries, + d = this.w, + u = new m(this.ctx), + f = e.i, + g = e.j, + p = e.realIndex, + x = e.bc; + d.globals.isXNumeric && (i = (d.globals.seriesX[f][g] - d.globals.minX) / this.xRatio - o / 2); + var v = i + o * this.visibleI; + (n = u.move(v, l)), (r = u.move(v, l)), d.globals.previousPaths.length > 0 && (r = this.getPathFrom(p, g)); + var b = { + barWidth: o, + strokeWidth: h, + barXPosition: v, + y: (a = + void 0 === this.series[f][g] || null === this.series[f][g] + ? l + : l - this.series[f][g] / this.yRatio[this.yaxisIndex] + 2 * (this.isReversed ? this.series[f][g] / this.yRatio[this.yaxisIndex] : 0)), + zeroH: l, + }, + y = this.barEndingShape(d, b, this.series, f, g); + if ( + ((n = n + u.line(v, y.newY) + y.path + u.line(v + o - h, l) + u.line(v - h / 2, l)), + (r = r + u.line(v, l) + y.ending_p_from + u.line(v + o - h, l) + u.line(v + o - h, l) + u.line(v - h / 2, l)), + d.globals.isXNumeric || (i += s), + this.barOptions.colors.backgroundBarColors.length > 0 && 0 === f) + ) { + x >= this.barOptions.colors.backgroundBarColors.length && (x = 0); + var w = this.barOptions.colors.backgroundBarColors[x], + k = u.drawRect(v - o * this.visibleI, 0, o * this.seriesLen, d.globals.gridHeight, 0, w, this.barOptions.colors.backgroundBarOpacity); + c.add(k), k.node.classList.add("apexcharts-backgroundBar"); + } + return { pathTo: n, pathFrom: r, x: i, y: a, barXPosition: v }; + }, + }, + { + key: "getPathFrom", + value: function (t, e) { + for (var i, a = this.w, s = 0; s < a.globals.previousPaths.length; s++) { + var n = a.globals.previousPaths[s]; + n.paths.length > 0 && parseInt(n.realIndex) === parseInt(t) && void 0 !== a.globals.previousPaths[s].paths[e] && (i = a.globals.previousPaths[s].paths[e].d); + } + return i; + }, + }, + { + key: "calculateDataLabelsPos", + value: function (t) { + var e = t.x, + i = t.y, + a = t.i, + s = t.j, + n = t.realIndex, + r = t.series, + o = t.barHeight, + l = t.barWidth, + h = t.visibleSeries, + c = t.renderedPath, + d = this.w, + u = new m(this.ctx), + f = Array.isArray(this.strokeWidth) ? this.strokeWidth[n] : this.strokeWidth, + g = e + parseFloat(l * h), + p = i + parseFloat(o * h); + d.globals.isXNumeric && !d.globals.isBarHorizontal && ((g = e + parseFloat(l * (h + 1)) - f), (p = i + parseFloat(o * (h + 1)) - f)); + var x = e, + v = i, + b = {}, + y = d.config.dataLabels, + w = this.barOptions.dataLabels, + k = y.offsetX, + S = y.offsetY, + A = { width: 0, height: 0 }; + return ( + d.config.dataLabels.enabled && (A = u.getTextRects(d.globals.yLabelFormatters[0](d.globals.maxY), parseInt(y.style.fontSize))), + (b = this.isHorizontal + ? this.calculateBarsDataLabelsPosition({ + x: e, + y: i, + i: a, + j: s, + renderedPath: c, + bcy: p, + barHeight: o, + barWidth: l, + textRects: A, + strokeWidth: f, + dataLabelsX: x, + dataLabelsY: v, + barDataLabelsConfig: w, + offX: k, + offY: S, + }) + : this.calculateColumnsDataLabelsPosition({ + x: e, + y: i, + i: a, + j: s, + renderedPath: c, + realIndex: n, + bcx: g, + bcy: p, + barHeight: o, + barWidth: l, + textRects: A, + strokeWidth: f, + dataLabelsY: v, + barDataLabelsConfig: w, + offX: k, + offY: S, + })), + c.attr({ cy: b.bcy, cx: b.bcx, j: s, val: r[a][s], barHeight: o, barWidth: l }), + this.drawCalculatedDataLabels({ x: b.dataLabelsX, y: b.dataLabelsY, val: r[a][s], i: n, j: s, barWidth: l, barHeight: o, textRects: A, dataLabelsConfig: y }) + ); + }, + }, + { + key: "calculateColumnsDataLabelsPosition", + value: function (t) { + var e, + i = this.w, + a = t.i, + s = t.j, + n = t.y, + r = t.bcx, + o = t.barWidth, + l = t.barHeight, + h = t.textRects, + c = t.dataLabelsY, + d = t.barDataLabelsConfig, + u = t.strokeWidth, + f = t.offX, + g = t.offY, + p = i.globals.gridWidth / i.globals.dataPoints; + (r -= u / 2), (e = i.globals.isXNumeric ? r - o / 2 + f : r - p + o / 2 + f); + var x = this.series[a][s] <= 0; + switch ((this.isReversed && (n -= l), d.position)) { + case "center": + c = x ? n + l / 2 + h.height / 2 + g : n + l / 2 + h.height / 2 - g; + break; + case "bottom": + c = x ? n + l + h.height + u + g : n + l - h.height / 2 + u - g; + break; + case "top": + c = x ? n - h.height / 2 - g : n + h.height + g; + } + return i.config.chart.stacked || (c < 0 ? (c = 0 + u) : c + h.height / 3 > i.globals.gridHeight && (c = i.globals.gridHeight - u)), { bcx: r, bcy: n, dataLabelsX: e, dataLabelsY: c }; + }, + }, + { + key: "calculateBarsDataLabelsPosition", + value: function (t) { + var e = this.w, + i = t.x, + a = t.i, + s = t.j, + n = t.bcy, + r = t.barHeight, + o = t.barWidth, + l = t.textRects, + h = t.dataLabelsX, + c = t.strokeWidth, + d = t.barDataLabelsConfig, + u = t.offX, + f = t.offY, + g = n - e.globals.gridHeight / e.globals.dataPoints + r / 2 + l.height / 2 + f - 3, + p = this.series[a][s] <= 0; + switch ((this.isReversed && (i += o), d.position)) { + case "center": + h = p ? i - o / 2 - u : i - o / 2 + u; + break; + case "bottom": + h = p ? i - o - c - Math.round(l.width / 2) - u : i - o + c + Math.round(l.width / 2) + u; + break; + case "top": + h = p ? i - c + Math.round(l.width / 2) - u : i - c - Math.round(l.width / 2) + u; + } + return e.config.chart.stacked || (h < 0 ? (h = h + l.width + c) : h + l.width / 2 > e.globals.gridWidth && (h = e.globals.gridWidth - l.width - c)), { bcx: i, bcy: n, dataLabelsX: h, dataLabelsY: g }; + }, + }, + { + key: "drawCalculatedDataLabels", + value: function (t) { + var e = t.x, + i = t.y, + a = t.val, + s = t.i, + n = t.j, + r = t.textRects, + o = t.barHeight, + l = t.barWidth, + h = t.dataLabelsConfig, + c = this.w, + d = new z(this.ctx), + u = new m(this.ctx), + f = h.formatter, + g = null, + p = c.globals.collapsedSeriesIndices.indexOf(s) > -1; + if (h.enabled && !p) { + g = u.group({ class: "apexcharts-data-labels" }); + var x = ""; + void 0 !== a && (x = f(a, { seriesIndex: s, dataPointIndex: n, w: c })), + 0 === a && c.config.chart.stacked && (x = ""), + c.config.chart.stacked && + this.barOptions.dataLabels.hideOverflowingLabels && + (this.isHorizontal + ? ((l = this.series[s][n] / this.yRatio[this.yaxisIndex]), r.width / 1.6 > l && (x = "")) + : ((o = this.series[s][n] / this.yRatio[this.yaxisIndex]), r.height / 1.6 > o && (x = ""))), + d.plotDataLabelsText({ x: e, y: i, text: x, i: s, j: n, parent: g, dataLabelsConfig: h, alwaysDrawDataLabel: !0, offsetCorrection: !0 }); + } + return g; + }, + }, + { + key: "barEndingShape", + value: function (t, e, i, a, s) { + var n = new m(this.ctx); + if (this.isHorizontal) { + var r = null, + o = e.x; + if (void 0 !== i[a][s] || null !== i[a][s]) { + var l = i[a][s] < 0, + h = e.barHeight / 2 - e.strokeWidth; + switch ((l && (h = -e.barHeight / 2 - e.strokeWidth), t.config.chart.stacked || ("rounded" === this.barOptions.endingShape && (o = e.x - h / 2)), this.barOptions.endingShape)) { + case "flat": + r = n.line(o, e.barYPosition + e.barHeight - e.strokeWidth); + break; + case "rounded": + r = n.quadraticCurve(o + h, e.barYPosition + (e.barHeight - e.strokeWidth) / 2, o, e.barYPosition + e.barHeight - e.strokeWidth); + } + } + return { path: r, ending_p_from: "", newX: o }; + } + var c = null, + d = e.y; + if (void 0 !== i[a][s] || null !== i[a][s]) { + var u = i[a][s] < 0, + f = e.barWidth / 2 - e.strokeWidth; + switch ((u && (f = -e.barWidth / 2 - e.strokeWidth), t.config.chart.stacked || ("rounded" === this.barOptions.endingShape && (d += f / 2)), this.barOptions.endingShape)) { + case "flat": + c = n.line(e.barXPosition + e.barWidth - e.strokeWidth, d); + break; + case "rounded": + c = n.quadraticCurve(e.barXPosition + (e.barWidth - e.strokeWidth) / 2, d - f, e.barXPosition + e.barWidth - e.strokeWidth, d); + } + } + return { path: c, ending_p_from: "", newY: d }; + }, + }, + ]), + t + ); + })(), + X = (function (t) { + function e() { + return n(this, e), f(this, d(e).apply(this, arguments)); + } + return ( + c(e, I), + o(e, [ + { + key: "draw", + value: function (t, e) { + var i = this.w; + (this.graphics = new m(this.ctx)), (this.fill = new P(this.ctx)), (this.bar = new I(this.ctx, this.xyRatios)); + var a = new A(this.ctx, i); + (t = a.getLogSeries(t)), + (this.yRatio = a.getLogYRatios(this.yRatio)), + this.initVariables(t), + "100%" === i.config.chart.stackType && (t = i.globals.seriesPercent.slice()), + (this.series = t), + (this.totalItems = 0), + (this.prevY = []), + (this.prevX = []), + (this.prevYF = []), + (this.prevXF = []), + (this.prevYVal = []), + (this.prevXVal = []), + (this.xArrj = []), + (this.xArrjF = []), + (this.xArrjVal = []), + (this.yArrj = []), + (this.yArrjF = []), + (this.yArrjVal = []); + for (var s = 0; s < t.length; s++) t[s].length > 0 && (this.totalItems += t[s].length); + for (var n = this.graphics.group({ class: "apexcharts-bar-series apexcharts-plot-series" }), r = 0, o = 0, l = 0, h = 0; l < t.length; l++, h++) { + var c = void 0, + d = void 0, + u = void 0, + f = void 0, + g = void 0, + x = void 0, + v = [], + b = [], + y = i.globals.comboCharts ? e[l] : l; + this.yRatio.length > 1 && (this.yaxisIndex = y), (this.isReversed = i.config.yaxis[this.yaxisIndex] && i.config.yaxis[this.yaxisIndex].reversed); + var w = this.graphics.group({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[y]), rel: l + 1, "data:realIndex": y }), + k = this.graphics.group({ class: "apexcharts-datalabels" }), + S = 0, + C = 0, + L = 0, + E = this.initialPositions(r, o, u, f, g, x); + (o = E.y), + (C = E.barHeight), + (f = E.yDivision), + (x = E.zeroW), + (r = E.x), + (L = E.barWidth), + (u = E.xDivision), + (g = E.zeroH), + (this.yArrj = []), + (this.yArrjF = []), + (this.yArrjVal = []), + (this.xArrj = []), + (this.xArrjF = []), + (this.xArrjVal = []); + for (var T = 0; T < i.globals.dataPoints; T++) { + i.config.stroke.show && (S = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[y] : this.strokeWidth); + var M = null; + this.isHorizontal + ? ((M = this.drawBarPaths({ indexes: { i: l, j: T, realIndex: y, bc: h }, barHeight: C, strokeWidth: S, pathTo: c, pathFrom: d, zeroW: x, x: r, y: o, yDivision: f, elSeries: w })), + (L = this.series[l][T] / this.invertedYRatio)) + : ((M = this.drawColumnPaths({ indexes: { i: l, j: T, realIndex: y, bc: h }, x: r, y: o, xDivision: u, pathTo: c, pathFrom: d, barWidth: L, zeroH: g, strokeWidth: S, elSeries: w })), + (C = this.series[l][T] / this.yRatio[this.yaxisIndex])), + (c = M.pathTo), + (d = M.pathFrom), + (o = M.y), + (r = M.x), + v.push(r), + b.push(o); + var z = this.bar.getPathFillColor(t, l, T, y); + w = this.renderSeries({ + realIndex: y, + pathFill: z, + j: T, + i: l, + pathFrom: d, + pathTo: c, + strokeWidth: S, + elSeries: w, + x: r, + y: o, + series: t, + barHeight: C, + barWidth: L, + elDataLabelsWrap: k, + type: "bar", + visibleSeries: 0, + }); + } + (i.globals.seriesXvalues[y] = v), + (i.globals.seriesYvalues[y] = b), + this.prevY.push(this.yArrj), + this.prevYF.push(this.yArrjF), + this.prevYVal.push(this.yArrjVal), + this.prevX.push(this.xArrj), + this.prevXF.push(this.xArrjF), + this.prevXVal.push(this.xArrjVal), + n.add(w); + } + return n; + }, + }, + { + key: "initialPositions", + value: function (t, e, i, a, s, n) { + var r, + o, + l = this.w; + return ( + this.isHorizontal + ? ((r = ((r = a = l.globals.gridHeight / l.globals.dataPoints) * parseInt(l.config.plotOptions.bar.barHeight)) / 100), + (n = this.baseLineInvertedY + l.globals.padHorizontal + (this.isReversed ? l.globals.gridWidth : 0) - (this.isReversed ? 2 * this.baseLineInvertedY : 0)), + (e = (a - r) / 2)) + : ((o = i = l.globals.gridWidth / l.globals.dataPoints), + (o = l.globals.isXNumeric ? ((i = l.globals.minXDiff / this.xRatio) * parseInt(this.barOptions.columnWidth)) / 100 : (o * parseInt(l.config.plotOptions.bar.columnWidth)) / 100), + (s = this.baseLineY[this.yaxisIndex] + (this.isReversed ? l.globals.gridHeight : 0) - (this.isReversed ? 2 * this.baseLineY[this.yaxisIndex] : 0)), + (t = l.globals.padHorizontal + (i - o) / 2)), + { x: t, y: e, yDivision: a, xDivision: i, barHeight: r, barWidth: o, zeroH: s, zeroW: n } + ); + }, + }, + { + key: "drawBarPaths", + value: function (t) { + for ( + var e, + i = t.indexes, + a = t.barHeight, + s = t.strokeWidth, + n = t.pathTo, + r = t.pathFrom, + o = t.zeroW, + l = t.x, + h = t.y, + c = t.yDivision, + d = t.elSeries, + u = this.w, + f = h, + g = i.i, + p = i.j, + x = i.realIndex, + v = i.bc, + m = 0, + b = 0; + b < this.prevXF.length; + b++ + ) + m += this.prevXF[b][p]; + if (g > 0) { + var y = o; + this.prevXVal[g - 1][p] < 0 + ? (y = this.series[g][p] >= 0 ? this.prevX[g - 1][p] + m - 2 * (this.isReversed ? m : 0) : this.prevX[g - 1][p]) + : this.prevXVal[g - 1][p] >= 0 && (y = this.series[g][p] >= 0 ? this.prevX[g - 1][p] : this.prevX[g - 1][p] - m + 2 * (this.isReversed ? m : 0)), + (e = y); + } else e = o; + l = null === this.series[g][p] ? e : e + this.series[g][p] / this.invertedYRatio - 2 * (this.isReversed ? this.series[g][p] / this.invertedYRatio : 0); + var w = { barHeight: a, strokeWidth: s, invertedYRatio: this.invertedYRatio, barYPosition: f, x: l }, + k = this.bar.barEndingShape(u, w, this.series, g, p); + if ( + (this.series.length > 1 && g !== this.endingShapeOnSeriesNumber && (k.path = this.graphics.line(k.newX, f + a - s)), + this.xArrj.push(k.newX), + this.xArrjF.push(Math.abs(e - k.newX)), + this.xArrjVal.push(this.series[g][p]), + (n = this.graphics.move(e, f)), + (r = this.graphics.move(e, f)), + u.globals.previousPaths.length > 0 && (r = this.bar.getPathFrom(x, p, !1)), + (n = n + this.graphics.line(k.newX, f) + k.path + this.graphics.line(e, f + a - s) + this.graphics.line(e, f)), + (r = r + this.graphics.line(e, f) + this.graphics.line(e, f + a - s) + this.graphics.line(e, f + a - s) + this.graphics.line(e, f + a - s) + this.graphics.line(e, f)), + u.config.plotOptions.bar.colors.backgroundBarColors.length > 0 && 0 === g) + ) { + v >= u.config.plotOptions.bar.colors.backgroundBarColors.length && (v = 0); + var S = u.config.plotOptions.bar.colors.backgroundBarColors[v], + A = this.graphics.drawRect(0, f, u.globals.gridWidth, a, 0, S, u.config.plotOptions.bar.colors.backgroundBarOpacity); + d.add(A), A.node.classList.add("apexcharts-backgroundBar"); + } + return { pathTo: n, pathFrom: r, x: l, y: (h += c) }; + }, + }, + { + key: "drawColumnPaths", + value: function (t) { + var e = t.indexes, + i = t.x, + a = t.y, + s = t.xDivision, + n = t.pathTo, + r = t.pathFrom, + o = t.barWidth, + l = t.zeroH, + h = t.strokeWidth, + c = t.elSeries, + d = this.w, + u = e.i, + f = e.j, + g = e.realIndex, + p = e.bc; + if (d.globals.isXNumeric) { + var x = d.globals.seriesX[u][f]; + x || (x = 0), (i = (x - d.globals.minX) / this.xRatio - o / 2); + } + for (var v, m = i, b = 0, y = 0; y < this.prevYF.length; y++) b += this.prevYF[y][f]; + if ((u > 0 && !d.globals.isXNumeric) || (u > 0 && d.globals.isXNumeric && d.globals.seriesX[u - 1][f] === d.globals.seriesX[u][f])) { + var w = this.prevY[u - 1][f]; + v = this.prevYVal[u - 1][f] < 0 ? (this.series[u][f] >= 0 ? w - b + 2 * (this.isReversed ? b : 0) : w) : this.series[u][f] >= 0 ? w : w + b - 2 * (this.isReversed ? b : 0); + } else v = d.globals.gridHeight - l; + a = v - this.series[u][f] / this.yRatio[this.yaxisIndex] + 2 * (this.isReversed ? this.series[u][f] / this.yRatio[this.yaxisIndex] : 0); + var k = { barWidth: o, strokeWidth: h, yRatio: this.yRatio[this.yaxisIndex], barXPosition: m, y: a }, + S = this.bar.barEndingShape(d, k, this.series, u, f); + if ( + (this.yArrj.push(S.newY), + this.yArrjF.push(Math.abs(v - S.newY)), + this.yArrjVal.push(this.series[u][f]), + (n = this.graphics.move(m, v)), + (r = this.graphics.move(m, v)), + d.globals.previousPaths.length > 0 && (r = this.bar.getPathFrom(g, f, !1)), + (n = n + this.graphics.line(m, S.newY) + S.path + this.graphics.line(m + o - h, v) + this.graphics.line(m - h / 2, v)), + (r = r + this.graphics.line(m, v) + this.graphics.line(m + o - h, v) + this.graphics.line(m + o - h, v) + this.graphics.line(m + o - h, v) + this.graphics.line(m - h / 2, v)), + d.config.plotOptions.bar.colors.backgroundBarColors.length > 0 && 0 === u) + ) { + p >= d.config.plotOptions.bar.colors.backgroundBarColors.length && (p = 0); + var A = d.config.plotOptions.bar.colors.backgroundBarColors[p], + C = this.graphics.drawRect(m, 0, o, d.globals.gridHeight, 0, A, d.config.plotOptions.bar.colors.backgroundBarOpacity); + c.add(C), C.node.classList.add("apexcharts-backgroundBar"); + } + return (i += s), { pathTo: n, pathFrom: r, x: d.globals.isXNumeric ? i - s : i, y: a }; + }, + }, + { + key: "checkZeroSeries", + value: function (t) { + for (var e = t.series, i = this.w, a = 0; a < e.length; a++) { + for (var s = 0, n = 0; n < e[i.globals.maxValsInArrayIndex].length; n++) s += e[a][n]; + 0 === s && this.zeroSerieses.push(a); + } + for (var r = e.length - 1; r >= 0; r--) this.zeroSerieses.indexOf(r) > -1 && r === this.endingShapeOnSeriesNumber && (this.endingShapeOnSeriesNumber -= 1); + }, + }, + ]), + e + ); + })(), + F = (function (t) { + function e() { + return n(this, e), f(this, d(e).apply(this, arguments)); + } + return ( + c(e, I), + o(e, [ + { + key: "draw", + value: function (t, e) { + var i = this.w, + a = new m(this.ctx), + s = new P(this.ctx); + this.candlestickOptions = this.w.config.plotOptions.candlestick; + var n = new A(this.ctx, i); + (t = n.getLogSeries(t)), (this.series = t), (this.yRatio = n.getLogYRatios(this.yRatio)), this.initVariables(t); + for (var r = a.group({ class: "apexcharts-candlestick-series apexcharts-plot-series" }), o = 0, l = 0; o < t.length; o++, l++) { + var h, + c, + d = void 0, + u = void 0, + f = void 0, + g = void 0, + x = [], + v = [], + b = i.globals.comboCharts ? e[o] : o, + y = a.group({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[b]), rel: o + 1, "data:realIndex": b }); + t[o].length > 0 && (this.visibleI = this.visibleI + 1); + var w, + k, + S = 0; + this.yRatio.length > 1 && (this.yaxisIndex = b); + var C = this.initialPositions(); + (g = C.y), (w = C.barHeight), (f = C.x), (k = C.barWidth), (h = C.xDivision), (c = C.zeroH), v.push(f + k / 2); + for (var L = a.group({ class: "apexcharts-datalabels" }), E = 0, T = i.globals.dataPoints; E < i.globals.dataPoints; E++, T--) { + void 0 === this.series[o][E] || null === t[o][E] ? (this.isNullValue = !0) : (this.isNullValue = !1), + i.config.stroke.show && (S = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[b] : this.strokeWidth); + var M, + z = this.drawCandleStickPaths({ indexes: { i: o, j: E, realIndex: b, bc: l }, x: f, y: g, xDivision: h, pathTo: d, pathFrom: u, barWidth: k, zeroH: c, strokeWidth: S, elSeries: y }); + (d = z.pathTo), (u = z.pathFrom), (g = z.y), (f = z.x), (M = z.color), E > 0 && v.push(f + k / 2), x.push(g); + var I = s.fillPath({ seriesNumber: b, color: M, value: t[o][E] }), + X = this.candlestickOptions.wick.useFillColor ? M : void 0; + y = this.renderSeries({ + realIndex: b, + pathFill: I, + lineFill: X, + j: E, + i: o, + pathFrom: u, + pathTo: d, + strokeWidth: S, + elSeries: y, + x: f, + y: g, + series: t, + barHeight: w, + barWidth: k, + elDataLabelsWrap: L, + visibleSeries: this.visibleI, + type: "candlestick", + }); + } + (i.globals.seriesXvalues[b] = v), (i.globals.seriesYvalues[b] = x), r.add(y); + } + return r; + }, + }, + { + key: "drawCandleStickPaths", + value: function (t) { + var e = t.indexes, + i = t.x, + a = (t.y, t.xDivision), + s = t.pathTo, + n = t.pathFrom, + r = t.barWidth, + o = t.zeroH, + l = t.strokeWidth, + h = this.w, + c = new m(this.ctx), + d = e.i, + u = e.j, + f = !0, + g = h.config.plotOptions.candlestick.colors.upward, + p = h.config.plotOptions.candlestick.colors.downward, + x = this.yRatio[this.yaxisIndex], + v = e.realIndex, + b = this.getOHLCValue(v, u), + y = o, + w = o; + b.o > b.c && (f = !1); + var k = Math.min(b.o, b.c), + S = Math.max(b.o, b.c); + h.globals.isXNumeric && (i = (h.globals.seriesX[d][u] - h.globals.minX) / this.xRatio - r / 2); + var A = i + r * this.visibleI; + return ( + void 0 === this.series[d][u] || null === this.series[d][u] ? (k = o) : ((k = o - k / x), (S = o - S / x), (y = o - b.h / x), (w = o - b.l / x)), + c.move(A, o), + (n = c.move(A, k)), + h.globals.previousPaths.length > 0 && (n = this.getPathFrom(v, u, !0)), + (s = + c.move(A, S) + + c.line(A + r / 2, S) + + c.line(A + r / 2, y) + + c.line(A + r / 2, S) + + c.line(A + r, S) + + c.line(A + r, k) + + c.line(A + r / 2, k) + + c.line(A + r / 2, w) + + c.line(A + r / 2, k) + + c.line(A, k) + + c.line(A, S - l / 2)), + (n += c.move(A, k)), + h.globals.isXNumeric || (i += a), + { pathTo: s, pathFrom: n, x: i, y: S, barXPosition: A, color: f ? g : p } + ); + }, + }, + { + key: "getOHLCValue", + value: function (t, e) { + var i = this.w; + return { o: i.globals.seriesCandleO[t][e], h: i.globals.seriesCandleH[t][e], l: i.globals.seriesCandleL[t][e], c: i.globals.seriesCandleC[t][e] }; + }, + }, + ]), + e + ); + })(), + Y = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "drawXCrosshairs", + value: function () { + var t = this.w, + e = new m(this.ctx), + i = new x(this.ctx), + a = t.config.xaxis.crosshairs.fill.gradient, + s = t.config.xaxis.crosshairs.dropShadow, + n = t.config.xaxis.crosshairs.fill.type, + r = a.colorFrom, + o = a.colorTo, + l = a.opacityFrom, + h = a.opacityTo, + c = a.stops, + d = s.enabled, + u = s.left, + f = s.top, + g = s.blur, + v = s.color, + b = s.opacity, + y = t.config.xaxis.crosshairs.fill.color; + if (t.config.xaxis.crosshairs.show) { + "gradient" === n && (y = e.drawGradient("vertical", r, o, l, h, null, c, null)); + var w = e.drawRect(); + 1 === t.config.xaxis.crosshairs.width && (w = e.drawLine()), + w.attr({ + class: "apexcharts-xcrosshairs", + x: 0, + y: 0, + y2: t.globals.gridHeight, + width: p.isNumber(t.config.xaxis.crosshairs.width) ? t.config.xaxis.crosshairs.width : 0, + height: t.globals.gridHeight, + fill: y, + filter: "none", + "fill-opacity": t.config.xaxis.crosshairs.opacity, + stroke: t.config.xaxis.crosshairs.stroke.color, + "stroke-width": t.config.xaxis.crosshairs.stroke.width, + "stroke-dasharray": t.config.xaxis.crosshairs.stroke.dashArray, + }), + d && (w = i.dropShadow(w, { left: u, top: f, blur: g, color: v, opacity: b })), + t.globals.dom.elGraphical.add(w); + } + }, + }, + { + key: "drawYCrosshairs", + value: function () { + var t = this.w, + e = new m(this.ctx), + i = t.config.yaxis[0].crosshairs; + if (t.config.yaxis[0].crosshairs.show) { + var a = e.drawLine(0, 0, t.globals.gridWidth, 0, i.stroke.color, i.stroke.dashArray, i.stroke.width); + a.attr({ class: "apexcharts-ycrosshairs" }), t.globals.dom.elGraphical.add(a); + } + var s = e.drawLine(0, 0, t.globals.gridWidth, 0, i.stroke.color, 0, 0); + s.attr({ class: "apexcharts-ycrosshairs-hidden" }), t.globals.dom.elGraphical.add(s); + }, + }, + ]), + t + ); + })(), + O = (function () { + function t(e, i) { + n(this, t), + (this.ctx = e), + (this.w = e.w), + (this.xRatio = i.xRatio), + (this.yRatio = i.yRatio), + (this.negRange = !1), + (this.dynamicAnim = this.w.config.chart.animations.dynamicAnimation), + (this.rectRadius = this.w.config.plotOptions.heatmap.radius), + (this.strokeWidth = this.w.config.stroke.width); + } + return ( + o(t, [ + { + key: "draw", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = i.group({ class: "apexcharts-heatmap" }); + a.attr("clip-path", "url(#gridRectMask".concat(e.globals.cuid, ")")); + var s = e.globals.gridWidth / e.globals.dataPoints, + n = e.globals.gridHeight / e.globals.series.length, + r = 0, + o = !1; + this.checkColorRange(); + var l = t.slice(); + e.config.yaxis[0].reversed && ((o = !0), l.reverse()); + for (var h = o ? 0 : l.length - 1; o ? h < l.length : h >= 0; o ? h++ : h--) { + var c = i.group({ class: "apexcharts-series apexcharts-heatmap-series", seriesName: p.escapeString(e.globals.seriesNames[h]), rel: h + 1, "data:realIndex": h }); + if (e.config.chart.dropShadow.enabled) { + var d = e.config.chart.dropShadow; + new x(this.ctx).dropShadow(c, d, h); + } + for (var u = 0, f = 0; f < l[h].length; f++) { + var g = 1, + v = this.determineHeatColor(h, f); + if (e.globals.hasNegs || this.negRange) { + var b = e.config.plotOptions.heatmap.shadeIntensity; + g = e.config.plotOptions.heatmap.reverseNegativeShade + ? v.percent < 0 + ? (v.percent / 100) * (1.25 * b) + : (1 - v.percent / 100) * (1.25 * b) + : v.percent < 0 + ? 1 - (1 + v.percent / 100) * b + : (1 - v.percent / 100) * b; + } else g = 1 - v.percent / 100; + var y = v.color; + if (e.config.plotOptions.heatmap.enableShades) { + var w = new p(); + y = p.hexToRgba(w.shadeColor(g, v.color), e.config.fill.opacity); + } + var k = this.rectRadius, + S = i.drawRect(u, r, s, n, k); + if ( + (S.attr({ cx: u, cy: r }), + S.node.classList.add("apexcharts-heatmap-rect"), + c.add(S), + S.attr({ fill: y, i: h, index: h, j: f, val: l[h][f], "stroke-width": this.strokeWidth, stroke: e.globals.stroke.colors[0], color: y }), + S.node.addEventListener("mouseenter", i.pathMouseEnter.bind(this, S)), + S.node.addEventListener("mouseleave", i.pathMouseLeave.bind(this, S)), + S.node.addEventListener("mousedown", i.pathMouseDown.bind(this, S)), + e.config.chart.animations.enabled && !e.globals.dataChanged) + ) { + var A = 1; + e.globals.resized || (A = e.config.chart.animations.speed), this.animateHeatMap(S, u, r, s, n, A); + } + if (e.globals.dataChanged) { + var C = 1; + if (this.dynamicAnim.enabled && e.globals.shouldAnimate) { + C = this.dynamicAnim.speed; + var L = e.globals.previousPaths[h] && e.globals.previousPaths[h][f] && e.globals.previousPaths[h][f].color; + L || (L = "rgba(255, 255, 255, 0)"), this.animateHeatColor(S, p.isColorHex(L) ? L : p.rgb2hex(L), p.isColorHex(y) ? y : p.rgb2hex(y), C); + } + } + var E = this.calculateHeatmapDataLabels({ x: u, y: r, i: h, j: f, series: l, rectHeight: n, rectWidth: s }); + null !== E && c.add(E), (u += s); + } + (r += n), a.add(c); + } + var P = e.globals.yAxisScale[0].result.slice(); + e.config.yaxis[0].reversed ? P.unshift("") : P.push(""), (e.globals.yAxisScale[0].result = P); + var T = e.globals.gridHeight / e.globals.series.length; + return (e.config.yaxis[0].labels.offsetY = -T / 2), a; + }, + }, + { + key: "checkColorRange", + value: function () { + var t = this, + e = this.w.config.plotOptions.heatmap; + e.colorScale.ranges.length > 0 && + e.colorScale.ranges.map(function (e, i) { + e.from < 0 && (t.negRange = !0); + }); + }, + }, + { + key: "determineHeatColor", + value: function (t, e) { + var i = this.w, + a = i.globals.series[t][e], + s = i.config.plotOptions.heatmap, + n = s.colorScale.inverse ? e : t, + r = i.globals.colors[n], + o = Math.min.apply(Math, g(i.globals.series[t])), + l = Math.max.apply(Math, g(i.globals.series[t])); + s.distributed || ((o = i.globals.minY), (l = i.globals.maxY)), + void 0 !== s.colorScale.min && ((o = s.colorScale.min < i.globals.minY ? s.colorScale.min : i.globals.minY), (l = s.colorScale.max > i.globals.maxY ? s.colorScale.max : i.globals.maxY)); + var h = Math.abs(l) + Math.abs(o), + c = (100 * a) / (0 === h ? h - 1e-6 : h); + s.colorScale.ranges.length > 0 && + s.colorScale.ranges.map(function (t, e) { + if (a >= t.from && a <= t.to) { + (r = t.color), (o = t.from), (l = t.to); + var i = Math.abs(l) + Math.abs(o); + c = (100 * a) / (0 === i ? i - 1e-6 : i); + } + }); + return { color: r, percent: c }; + }, + }, + { + key: "calculateHeatmapDataLabels", + value: function (t) { + var e = t.x, + i = t.y, + a = t.i, + s = t.j, + n = (t.series, t.rectHeight), + r = t.rectWidth, + o = this.w, + l = o.config.dataLabels, + h = new m(this.ctx), + c = new z(this.ctx), + d = l.formatter, + u = null; + if (l.enabled) { + u = h.group({ class: "apexcharts-data-labels" }); + var f = l.offsetX, + g = l.offsetY, + p = e + r / 2 + f, + x = i + n / 2 + parseInt(l.style.fontSize) / 3 + g, + v = d(o.globals.series[a][s], { seriesIndex: a, dataPointIndex: s, w: o }); + c.plotDataLabelsText({ x: p, y: x, text: v, i: a, j: s, parent: u, dataLabelsConfig: l }); + } + return u; + }, + }, + { + key: "animateHeatMap", + value: function (t, e, i, a, s, n) { + var r = this; + new v(this.ctx).animateRect(t, { x: e + a / 2, y: i + s / 2, width: 0, height: 0 }, { x: e, y: i, width: a, height: s }, n, function () { + r.w.globals.animationEnded = !0; + }); + }, + }, + { + key: "animateHeatColor", + value: function (t, e, i, a) { + t.attr({ fill: e }).animate(a).attr({ fill: i }); + }, + }, + ]), + t + ); + })(), + R = (function () { + function t(e) { + n(this, t), + (this.ctx = e), + (this.w = e.w), + (this.chartType = this.w.config.chart.type), + (this.initialAnim = this.w.config.chart.animations.enabled), + (this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled), + (this.animBeginArr = [0]), + (this.animDur = 0), + (this.donutDataLabels = this.w.config.plotOptions.pie.donut.labels); + var i = this.w; + (this.lineColorArr = void 0 !== i.globals.stroke.colors ? i.globals.stroke.colors : i.globals.colors), + (this.defaultSize = i.globals.svgHeight < i.globals.svgWidth ? i.globals.svgHeight - 35 : i.globals.gridWidth), + (this.centerY = this.defaultSize / 2), + (this.centerX = i.globals.gridWidth / 2), + (this.fullAngle = 360), + (this.donutSize = 0), + (this.sliceLabels = []), + (this.prevSectorAngleArr = []); + } + return ( + o(t, [ + { + key: "draw", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = i.group({ class: "apexcharts-pie" }); + if (e.globals.noData) return a; + for (var s = 0, n = 0; n < t.length; n++) s += p.negToZero(t[n]); + var r = [], + o = i.group(); + 0 === s && (s = 1e-5); + for (var l = 0; l < t.length; l++) { + var h = (this.fullAngle * p.negToZero(t[l])) / s; + r.push(h); + } + if (e.globals.dataChanged) { + for (var c, d = 0, u = 0; u < e.globals.previousPaths.length; u++) d += p.negToZero(e.globals.previousPaths[u]); + for (var f = 0; f < e.globals.previousPaths.length; f++) (c = (this.fullAngle * p.negToZero(e.globals.previousPaths[f])) / d), this.prevSectorAngleArr.push(c); + } + (e.globals.radialSize = this.defaultSize / 2.05 - e.config.stroke.width - e.config.chart.dropShadow.blur), + void 0 !== e.config.plotOptions.pie.size && (e.globals.radialSize = e.config.plotOptions.pie.size), + (this.donutSize = (e.globals.radialSize * parseInt(e.config.plotOptions.pie.donut.size)) / 100), + this.donutSize < 0 && (this.donutSize = 0); + var g = e.config.plotOptions.pie.customScale, + x = e.globals.gridWidth / 2, + v = e.globals.gridHeight / 2, + b = x - (e.globals.gridWidth / 2) * g, + y = v - (e.globals.gridHeight / 2) * g; + if (this.donutDataLabels.show) { + var w = this.renderInnerDataLabels(this.donutDataLabels, { + hollowSize: this.donutSize, + centerX: this.centerX, + centerY: this.centerY, + opacity: this.donutDataLabels.show, + translateX: b, + translateY: y, + }); + a.add(w); + } + if ("donut" === e.config.chart.type) { + var k = i.drawCircle(this.donutSize); + k.attr({ cx: this.centerX, cy: this.centerY, fill: e.config.plotOptions.pie.donut.background }), o.add(k); + } + var S = this.drawArcs(r, t); + return ( + this.sliceLabels.forEach(function (t) { + S.add(t); + }), + o.attr({ + transform: "translate(" + .concat(b, ", ") + .concat(y - 5, ") scale(") + .concat(g, ")"), + }), + a.attr({ "data:innerTranslateX": b, "data:innerTranslateY": y - 25 }), + o.add(S), + a.add(o), + a + ); + }, + }, + { + key: "drawArcs", + value: function (t, e) { + var i = this.w, + a = new x(this.ctx), + s = new m(this.ctx), + n = new P(this.ctx), + r = s.group({ class: "apexcharts-slices" }), + o = 0, + l = 0, + h = 0, + c = 0; + this.strokeWidth = i.config.stroke.show ? i.config.stroke.width : 0; + for (var d = 0; d < t.length; d++) { + var u = s.group({ class: "apexcharts-series apexcharts-pie-series", seriesName: p.escapeString(i.globals.seriesNames[d]), id: "apexcharts-series-" + d, rel: d + 1, "data:realIndex": d }); + r.add(u), (l = c), (h = (o = h) + t[d]), (c = l + this.prevSectorAngleArr[d]); + var f = h - o, + g = n.fillPath({ seriesNumber: d, size: i.globals.radialSize, value: e[d] }), + v = this.getChangedPath(l, c), + b = s.drawPath({ + d: v, + stroke: this.lineColorArr instanceof Array ? this.lineColorArr[d] : this.lineColorArr, + strokeWidth: this.strokeWidth, + fill: g, + fillOpacity: i.config.fill.opacity, + classes: "apexcharts-pie-area", + }); + if ((b.attr({ id: "apexcharts-".concat(i.config.chart.type, "-slice-").concat(d), index: 0, j: d }), i.config.chart.dropShadow.enabled)) { + var y = i.config.chart.dropShadow; + a.dropShadow(b, y, d); + } + this.addListeners(b, this.donutDataLabels), m.setAttrs(b.node, { "data:angle": f, "data:startAngle": o, "data:strokeWidth": this.strokeWidth, "data:value": e[d] }); + var w = { x: 0, y: 0 }; + "pie" === i.config.chart.type + ? (w = p.polarToCartesian(this.centerX, this.centerY, i.globals.radialSize / 1.25 + i.config.plotOptions.pie.dataLabels.offset, o + (h - o) / 2)) + : "donut" === i.config.chart.type && + (w = p.polarToCartesian(this.centerX, this.centerY, (i.globals.radialSize + this.donutSize) / 2 + i.config.plotOptions.pie.dataLabels.offset, o + (h - o) / 2)), + u.add(b); + var k = 0; + if ( + (!this.initialAnim || i.globals.resized || i.globals.dataChanged + ? this.animBeginArr.push(0) + : ((k = ((h - o) / this.fullAngle) * i.config.chart.animations.speed), (this.animDur = k + this.animDur), this.animBeginArr.push(this.animDur)), + this.dynamicAnim && i.globals.dataChanged + ? this.animatePaths(b, { + size: i.globals.radialSize, + endAngle: h, + startAngle: o, + prevStartAngle: l, + prevEndAngle: c, + animateStartingPos: !0, + i: d, + animBeginArr: this.animBeginArr, + dur: i.config.chart.animations.dynamicAnimation.speed, + }) + : this.animatePaths(b, { size: i.globals.radialSize, endAngle: h, startAngle: o, i: d, totalItems: t.length - 1, animBeginArr: this.animBeginArr, dur: k }), + i.config.plotOptions.pie.expandOnClick && b.click(this.pieClicked.bind(this, d)), + i.config.dataLabels.enabled) + ) { + var S = w.x, + A = w.y, + C = (100 * (h - o)) / 360 + "%"; + if (0 !== f && i.config.plotOptions.pie.dataLabels.minAngleToShowLabel < t[d]) { + var L = i.config.dataLabels.formatter; + void 0 !== L && (C = L(i.globals.seriesPercent[d][0], { seriesIndex: d, w: i })); + var E = i.globals.dataLabels.style.colors[d], + T = s.drawText({ x: S, y: A, text: C, textAnchor: "middle", fontSize: i.config.dataLabels.style.fontSize, fontFamily: i.config.dataLabels.style.fontFamily, foreColor: E }); + if (i.config.dataLabels.dropShadow.enabled) { + var M = i.config.dataLabels.dropShadow; + new x(this.ctx).dropShadow(T, M); + } + T.node.classList.add("apexcharts-pie-label"), + i.config.chart.animations.animate && + !1 === i.globals.resized && + (T.node.classList.add("apexcharts-pie-label-delay"), (T.node.style.animationDelay = i.config.chart.animations.speed / 940 + "s")), + this.sliceLabels.push(T); + } + } + } + return r; + }, + }, + { + key: "addListeners", + value: function (t, e) { + var i = new m(this.ctx); + t.node.addEventListener("mouseenter", i.pathMouseEnter.bind(this, t)), + t.node.addEventListener("mouseenter", this.printDataLabelsInner.bind(this, t.node, e)), + t.node.addEventListener("mouseleave", i.pathMouseLeave.bind(this, t)), + t.node.addEventListener("mouseleave", this.revertDataLabelsInner.bind(this, t.node, e)), + t.node.addEventListener("mousedown", i.pathMouseDown.bind(this, t)), + t.node.addEventListener("mousedown", this.printDataLabelsInner.bind(this, t.node, e)); + }, + }, + { + key: "animatePaths", + value: function (t, e) { + var i = this.w, + a = e.endAngle - e.startAngle, + s = a, + n = e.startAngle, + r = e.startAngle; + void 0 !== e.prevStartAngle && void 0 !== e.prevEndAngle && ((n = e.prevEndAngle), (s = e.prevEndAngle - e.prevStartAngle)), + e.i === i.config.series.length - 1 && (a + r > this.fullAngle ? (e.endAngle = e.endAngle - (a + r)) : a + r < this.fullAngle && (e.endAngle = e.endAngle + (this.fullAngle - (a + r)))), + a === this.fullAngle && (a = this.fullAngle - 0.01), + this.animateArc(t, n, r, a, s, e); + }, + }, + { + key: "animateArc", + value: function (t, e, i, a, s, n) { + var r, + o = this, + l = this.w, + h = n.size; + (isNaN(e) || isNaN(s)) && ((e = i), (s = a), (n.dur = 0)); + var c = a, + d = i, + u = e - i; + l.globals.dataChanged && n.shouldSetPrevPaths && ((r = o.getPiePath({ me: o, startAngle: d, angle: s, size: h })), t.attr({ d: r })), + 0 !== n.dur + ? t + .animate(n.dur, l.globals.easing, n.animBeginArr[n.i]) + .afterAll(function () { + ("pie" !== l.config.chart.type && "donut" !== l.config.chart.type) || this.animate(300).attr({ "stroke-width": l.config.stroke.width }), (l.globals.animationEnded = !0); + }) + .during(function (l) { + (c = u + (a - u) * l), + n.animateStartingPos && ((c = s + (a - s) * l), (d = e - s + (i - (e - s)) * l)), + (r = o.getPiePath({ me: o, startAngle: d, angle: c, size: h })), + t.node.setAttribute("data:pathOrig", r), + t.attr({ d: r }); + }) + : ((r = o.getPiePath({ me: o, startAngle: d, angle: a, size: h })), n.isTrack || (l.globals.animationEnded = !0), t.node.setAttribute("data:pathOrig", r), t.attr({ d: r })); + }, + }, + { + key: "pieClicked", + value: function (t) { + var e, + i = this.w, + a = this.w.globals.radialSize + 4, + s = i.globals.dom.Paper.select("#apexcharts-".concat(i.config.chart.type.toLowerCase(), "-slice-").concat(t)).members[0], + n = s.attr("d"); + if ("true" !== s.attr("data:pieClicked")) { + var r = i.globals.dom.baseEl.querySelectorAll(".apexcharts-pie-area"); + Array.prototype.forEach.call(r, function (t) { + t.setAttribute("data:pieClicked", "false"); + var e = t.getAttribute("data:pathOrig"); + t.setAttribute("d", e); + }), + s.attr("data:pieClicked", "true"); + var o = parseInt(s.attr("data:startAngle")), + l = parseInt(s.attr("data:angle")); + (e = this.getPiePath({ me: this, startAngle: o, angle: l, size: a })), 360 !== l && s.plot(e).animate(1).plot(n).animate(100).plot(e); + } else { + s.attr({ "data:pieClicked": "false" }), this.revertDataLabelsInner(s.node, this.donutDataLabels); + var h = s.attr("data:pathOrig"); + s.attr({ d: h }); + } + }, + }, + { + key: "getChangedPath", + value: function (t, e) { + var i = ""; + return this.dynamicAnim && this.w.globals.dataChanged && (i = this.getPiePath({ me: this, startAngle: t, angle: e - t, size: this.size })), i; + }, + }, + { + key: "getPiePath", + value: function (t) { + var e = t.me, + i = t.startAngle, + a = t.angle, + s = t.size, + n = this.w, + r = i, + o = (Math.PI * (r - 90)) / 180, + l = a + i; + Math.ceil(l) >= 360 && (l = 359.99); + var h = (Math.PI * (l - 90)) / 180, + c = e.centerX + s * Math.cos(o), + d = e.centerY + s * Math.sin(o), + u = e.centerX + s * Math.cos(h), + f = e.centerY + s * Math.sin(h), + g = p.polarToCartesian(e.centerX, e.centerY, e.donutSize, l), + x = p.polarToCartesian(e.centerX, e.centerY, e.donutSize, r), + v = a > 180 ? 1 : 0; + return "donut" === n.config.chart.type + ? ["M", c, d, "A", s, s, 0, v, 1, u, f, "L", g.x, g.y, "A", e.donutSize, e.donutSize, 0, v, 0, x.x, x.y, "L", c, d, "z"].join(" ") + : "pie" === n.config.chart.type + ? ["M", c, d, "A", s, s, 0, v, 1, u, f, "L", e.centerX, e.centerY, "L", c, d].join(" ") + : ["M", c, d, "A", s, s, 0, v, 1, u, f].join(" "); + }, + }, + { + key: "renderInnerDataLabels", + value: function (t, e) { + var i = this.w, + a = new m(this.ctx), + s = a.group({ class: "apexcharts-datalabels-group", transform: "translate(".concat(e.translateX ? e.translateX : 0, ", ").concat(e.translateY ? e.translateY : 0, ")") }), + n = t.total.show; + s.node.style.opacity = e.opacity; + var r, + o, + l = e.centerX, + h = e.centerY; + (r = void 0 === t.name.color ? i.globals.colors[0] : t.name.color), (o = void 0 === t.value.color ? i.config.chart.foreColor : t.value.color); + var c = t.value.formatter, + d = "", + u = ""; + if ((n ? ((r = t.total.color), (u = t.total.label), (d = t.total.formatter(i))) : 1 === i.globals.series.length && ((d = c(i.globals.series[0], i)), (u = i.globals.seriesNames[0])), t.name.show)) { + var f = a.drawText({ x: l, y: h + parseInt(t.name.offsetY), text: u, textAnchor: "middle", foreColor: r, fontSize: t.name.fontSize, fontFamily: t.name.fontFamily }); + f.node.classList.add("apexcharts-datalabel-label"), s.add(f); + } + if (t.value.show) { + var g = t.name.show ? parseInt(t.value.offsetY) + 16 : t.value.offsetY, + p = a.drawText({ x: l, y: h + g, text: d, textAnchor: "middle", foreColor: o, fontSize: t.value.fontSize, fontFamily: t.value.fontFamily }); + p.node.classList.add("apexcharts-datalabel-value"), s.add(p); + } + return s; + }, + }, + { + key: "printInnerLabels", + value: function (t, e, i, a) { + var s, + n = this.w; + a ? (s = void 0 === t.name.color ? n.globals.colors[parseInt(a.parentNode.getAttribute("rel")) - 1] : t.name.color) : n.globals.series.length > 1 && t.total.show && (s = t.total.color); + var r = n.globals.dom.baseEl.querySelector(".apexcharts-datalabel-label"), + o = n.globals.dom.baseEl.querySelector(".apexcharts-datalabel-value"); + (i = (0, t.value.formatter)(i, n)), + a || "function" != typeof t.total.formatter || (i = t.total.formatter(n)), + null !== r && (r.textContent = e), + null !== o && (o.textContent = i), + null !== r && (r.style.fill = s); + }, + }, + { + key: "printDataLabelsInner", + value: function (t, e) { + var i = this.w, + a = t.getAttribute("data:value"), + s = i.globals.seriesNames[parseInt(t.parentNode.getAttribute("rel")) - 1]; + i.globals.series.length > 1 && this.printInnerLabels(e, s, a, t); + var n = i.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group"); + null !== n && (n.style.opacity = 1); + }, + }, + { + key: "revertDataLabelsInner", + value: function (e, i, a) { + var s = this.w, + n = s.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group"); + if (i.total.show && s.globals.series.length > 1) { + new t(this.ctx).printInnerLabels(i, i.total.label, i.total.formatter(s)); + } else { + var r = document.querySelectorAll(".apexcharts-pie-area"), + o = !1; + if ( + (Array.prototype.forEach.call(r, function (t) { + "true" === t.getAttribute("data:pieClicked") && ((o = !0), this.printDataLabelsInner(t, i)); + }), + !o) + ) + if (s.globals.selectedDataPoints.length && s.globals.series.length > 1) + if (s.globals.selectedDataPoints[0].length > 0) { + var l = s.globals.selectedDataPoints[0], + h = s.globals.dom.baseEl.querySelector("#apexcharts-".concat(s.config.chart.type.toLowerCase(), "-slice-").concat(l)); + this.printDataLabelsInner(h, i); + } else n && s.globals.selectedDataPoints.length && 0 === s.globals.selectedDataPoints[0].length && (n.style.opacity = 0); + else n && s.globals.series.length > 1 && (n.style.opacity = 0); + } + }, + }, + ]), + t + ); + })(), + D = (function () { + function t(e) { + n(this, t), + (this.ctx = e), + (this.w = e.w), + (this.chartType = this.w.config.chart.type), + (this.initialAnim = this.w.config.chart.animations.enabled), + (this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled), + (this.animDur = 0); + var i = this.w; + (this.graphics = new m(this.ctx)), + (this.lineColorArr = void 0 !== i.globals.stroke.colors ? i.globals.stroke.colors : i.globals.colors), + (this.defaultSize = i.globals.svgHeight < i.globals.svgWidth ? i.globals.svgHeight - 35 : i.globals.gridWidth), + (this.maxValue = this.w.globals.maxY), + (this.polygons = i.config.plotOptions.radar.polygons), + (this.maxLabelWidth = 20); + var a = i.globals.labels.slice().sort(function (t, e) { + return e.length - t.length; + })[0], + s = this.graphics.getTextRects(a, i.config.dataLabels.style.fontSize); + (this.size = this.defaultSize / 2.1 - i.config.stroke.width - i.config.chart.dropShadow.blur - s.width / 1.75), + void 0 !== i.config.plotOptions.radar.size && (this.size = i.config.plotOptions.radar.size), + (this.dataRadiusOfPercent = []), + (this.dataRadius = []), + (this.angleArr = []), + (this.yaxisLabelsTextsPos = []); + } + return ( + o(t, [ + { + key: "draw", + value: function (t) { + var e = this, + i = this.w, + a = new P(this.ctx), + s = []; + (this.dataPointsLen = t[i.globals.maxValsInArrayIndex].length), (this.disAngle = (2 * Math.PI) / this.dataPointsLen); + var n = i.globals.gridWidth / 2, + r = i.globals.gridHeight / 2, + o = this.graphics.group({ class: "apexcharts-radar-series", "data:innerTranslateX": n, "data:innerTranslateY": r - 25, transform: "translate(".concat(n || 0, ", ").concat(r || 0, ")") }), + l = [], + c = null; + if ( + ((this.yaxisLabels = this.graphics.group({ class: "apexcharts-yaxis" })), + t.forEach(function (t, n) { + var r = e.graphics.group().attr({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[n]), rel: n + 1, "data:realIndex": n }); + (e.dataRadiusOfPercent[n] = []), + (e.dataRadius[n] = []), + (e.angleArr[n] = []), + t.forEach(function (t, i) { + (e.dataRadiusOfPercent[n][i] = t / e.maxValue), (e.dataRadius[n][i] = e.dataRadiusOfPercent[n][i] * e.size), (e.angleArr[n][i] = i * e.disAngle); + }), + (l = e.getDataPointsPos(e.dataRadius[n], e.angleArr[n])); + var o = e.createPaths(l, { x: 0, y: 0 }); + (c = e.graphics.group({ class: "apexcharts-series-markers-wrap hidden" })), i.globals.delayedElements.push({ el: c.node, index: n }); + var d = { + i: n, + realIndex: n, + animationDelay: n, + initialSpeed: i.config.chart.animations.speed, + dataChangeSpeed: i.config.chart.animations.dynamicAnimation.speed, + className: "apexcharts-radar", + id: "apexcharts-radar", + shouldClipToGrid: !1, + bindEventsOnPaths: !1, + stroke: i.globals.stroke.colors[n], + strokeLineCap: i.config.stroke.lineCap, + }, + u = null; + i.globals.previousPaths.length > 0 && (u = e.getPathFrom(n)); + for (var f = 0; f < o.linePathsTo.length; f++) { + var g = e.graphics.renderPaths( + h({}, d, { + pathFrom: null === u ? o.linePathsFrom[f] : u, + pathTo: o.linePathsTo[f], + strokeWidth: Array.isArray(i.config.stroke.width) ? i.config.stroke.width[n] : i.config.stroke.width, + fill: "none", + drawShadow: !1, + }) + ); + r.add(g); + var v = a.fillPath({ seriesNumber: n }), + m = e.graphics.renderPaths(h({}, d, { pathFrom: null === u ? o.areaPathsFrom[f] : u, pathTo: o.areaPathsTo[f], strokeWidth: 0, fill: v, drawShadow: !1 })); + if (i.config.chart.dropShadow.enabled) { + var b = new x(e.ctx), + y = i.config.chart.dropShadow; + b.dropShadow(m, Object.assign({}, y, { noUserSpaceOnUse: !0 }), n); + } + r.add(m); + } + t.forEach(function (t, i) { + var a = new T(e.ctx).getMarkerConfig("apexcharts-marker", n), + s = e.graphics.drawMarker(l[i].x, l[i].y, a); + s.attr("rel", i), s.attr("j", i), s.attr("index", n), s.node.setAttribute("default-marker-size", a.pSize); + var o = e.graphics.group({ class: "apexcharts-series-markers" }); + o && o.add(s), c.add(o), r.add(c); + }), + s.push(r); + }), + this.drawPolygons({ parent: o }), + i.config.dataLabels.enabled) + ) { + var d = this.drawLabels(); + o.add(d); + } + return ( + o.add(this.yaxisLabels), + s.forEach(function (t) { + o.add(t); + }), + o + ); + }, + }, + { + key: "drawPolygons", + value: function (t) { + for (var e = this, i = this.w, a = t.parent, s = i.globals.yAxisScale[0].result.reverse(), n = s.length, r = [], o = this.size / (n - 1), l = 0; l < n; l++) r[l] = o * l; + r.reverse(); + var h = [], + c = []; + r.forEach(function (t, i) { + var a = e.getPolygonPos(t), + s = ""; + a.forEach(function (t, a) { + if (0 === i) { + var n = e.graphics.drawLine(t.x, t.y, 0, 0, Array.isArray(e.polygons.connectorColors) ? e.polygons.connectorColors[a] : e.polygons.connectorColors); + c.push(n); + } + 0 === a && e.yaxisLabelsTextsPos.push({ x: t.x, y: t.y }), (s += t.x + "," + t.y + " "); + }), + h.push(s); + }), + h.forEach(function (t, s) { + var n = e.polygons.strokeColors, + r = e.graphics.drawPolygon(t, Array.isArray(n) ? n[s] : n, i.globals.radarPolygons.fill.colors[s]); + a.add(r); + }), + c.forEach(function (t) { + a.add(t); + }), + i.config.yaxis[0].show && + this.yaxisLabelsTextsPos.forEach(function (t, i) { + var a = e.drawYAxisText(t.x, t.y, i, s[i]); + e.yaxisLabels.add(a); + }); + }, + }, + { + key: "drawYAxisText", + value: function (t, e, i, a) { + var s = this.w, + n = s.config.yaxis[0], + r = s.globals.yLabelFormatters[0]; + return this.graphics.drawText({ + x: t + n.labels.offsetX, + y: e + n.labels.offsetY, + text: r(a, i), + textAnchor: "middle", + fontSize: n.labels.style.fontSize, + fontFamily: n.labels.style.fontFamily, + foreColor: n.labels.style.color, + }); + }, + }, + { + key: "drawLabels", + value: function () { + var t = this, + e = this.w, + i = "middle", + a = e.config.dataLabels, + s = this.graphics.group({ class: "apexcharts-datalabels" }), + n = this.getPolygonPos(this.size), + r = 0, + o = 0; + return ( + e.globals.labels.forEach(function (l, h) { + var c = a.formatter, + d = new z(t.ctx); + if (n[h]) { + (r = n[h].x), + (o = n[h].y), + Math.abs(n[h].x) >= 10 ? (n[h].x > 0 ? ((i = "start"), (r += 10)) : n[h].x < 0 && ((i = "end"), (r -= 10))) : (i = "middle"), + Math.abs(n[h].y) >= t.size - 10 && (n[h].y < 0 ? (o -= 10) : n[h].y > 0 && (o += 10)); + var u = c(l, { seriesIndex: -1, dataPointIndex: h, w: e }); + d.plotDataLabelsText({ x: r, y: o, text: u, textAnchor: i, i: h, j: h, parent: s, dataLabelsConfig: a, offsetCorrection: !1 }); + } + }), + s + ); + }, + }, + { + key: "createPaths", + value: function (t, e) { + var i = this, + a = [], + s = [], + n = [], + r = []; + if (t.length) { + (s = [this.graphics.move(e.x, e.y)]), (r = [this.graphics.move(e.x, e.y)]); + var o = this.graphics.move(t[0].x, t[0].y), + l = this.graphics.move(t[0].x, t[0].y); + t.forEach(function (e, a) { + (o += i.graphics.line(e.x, e.y)), (l += i.graphics.line(e.x, e.y)), a === t.length - 1 && ((o += "Z"), (l += "Z")); + }), + a.push(o), + n.push(l); + } + return { linePathsFrom: s, linePathsTo: a, areaPathsFrom: r, areaPathsTo: n }; + }, + }, + { + key: "getPathFrom", + value: function (t) { + for (var e = this.w, i = null, a = 0; a < e.globals.previousPaths.length; a++) { + var s = e.globals.previousPaths[a]; + s.paths.length > 0 && parseInt(s.realIndex) === parseInt(t) && void 0 !== e.globals.previousPaths[a].paths[0] && (i = e.globals.previousPaths[a].paths[0].d); + } + return i; + }, + }, + { + key: "getDataPointsPos", + value: function (t, e) { + var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : this.dataPointsLen; + (t = t || []), (e = e || []); + for (var a = [], s = 0; s < i; s++) { + var n = {}; + (n.x = t[s] * Math.sin(e[s])), (n.y = -t[s] * Math.cos(e[s])), a.push(n); + } + return a; + }, + }, + { + key: "getPolygonPos", + value: function (t) { + for (var e = [], i = (2 * Math.PI) / this.dataPointsLen, a = 0; a < this.dataPointsLen; a++) { + var s = {}; + (s.x = t * Math.sin(a * i)), (s.y = -t * Math.cos(a * i)), e.push(s); + } + return e; + }, + }, + ]), + t + ); + })(), + N = (function (t) { + function e(t) { + var i; + n(this, e), ((i = f(this, d(e).call(this, t))).ctx = t), (i.w = t.w), (i.animBeginArr = [0]), (i.animDur = 0); + var a = i.w; + return ( + (i.startAngle = a.config.plotOptions.radialBar.startAngle), + (i.endAngle = a.config.plotOptions.radialBar.endAngle), + (i.trackStartAngle = a.config.plotOptions.radialBar.track.startAngle), + (i.trackEndAngle = a.config.plotOptions.radialBar.track.endAngle), + (i.radialDataLabels = a.config.plotOptions.radialBar.dataLabels), + i.trackStartAngle || (i.trackStartAngle = i.startAngle), + i.trackEndAngle || (i.trackEndAngle = i.endAngle), + 360 === i.endAngle && (i.endAngle = 359.99), + (i.fullAngle = 360 - a.config.plotOptions.radialBar.endAngle - a.config.plotOptions.radialBar.startAngle), + (i.margin = parseInt(a.config.plotOptions.radialBar.track.margin)), + i + ); + } + return ( + c(e, R), + o(e, [ + { + key: "draw", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = i.group({ class: "apexcharts-radialbar" }); + if (e.globals.noData) return a; + var s = i.group(), + n = this.defaultSize / 2, + r = e.globals.gridWidth / 2, + o = this.defaultSize / 2.05 - e.config.stroke.width - e.config.chart.dropShadow.blur; + void 0 !== e.config.plotOptions.radialBar.size && (o = e.config.plotOptions.radialBar.size); + var l = e.globals.fill.colors; + if (e.config.plotOptions.radialBar.track.show) { + var h = this.drawTracks({ size: o, centerX: r, centerY: n, colorArr: l, series: t }); + s.add(h); + } + var c = this.drawArcs({ size: o, centerX: r, centerY: n, colorArr: l, series: t }), + d = 360; + return ( + e.config.plotOptions.radialBar.startAngle < 0 && (d = Math.abs(e.config.plotOptions.radialBar.endAngle - e.config.plotOptions.radialBar.startAngle)), + (e.globals.radialSize = o - o / (360 / (360 - d)) + 10), + s.add(c.g), + "front" === e.config.plotOptions.radialBar.hollow.position && (c.g.add(c.elHollow), c.dataLabels && c.g.add(c.dataLabels)), + a.add(s), + a + ); + }, + }, + { + key: "drawTracks", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = i.group({ class: "apexcharts-tracks" }), + s = new x(this.ctx), + n = new P(this.ctx), + r = this.getStrokeWidth(t); + t.size = t.size - r / 2; + for (var o = 0; o < t.series.length; o++) { + var l = i.group({ class: "apexcharts-radialbar-track apexcharts-track" }); + a.add(l), l.attr({ id: "apexcharts-track-" + o, rel: o + 1 }), (t.size = t.size - r - this.margin); + var h = e.config.plotOptions.radialBar.track, + c = n.fillPath({ seriesNumber: 0, size: t.size, fillColors: Array.isArray(h.background) ? h.background[o] : h.background, solid: !0 }), + d = this.trackStartAngle, + u = this.trackEndAngle; + Math.abs(u) + Math.abs(d) >= 360 && (u = 360 - Math.abs(this.startAngle) - 0.1); + var f = i.drawPath({ d: "", stroke: c, strokeWidth: (r * parseInt(h.strokeWidth)) / 100, fill: "none", strokeOpacity: h.opacity, classes: "apexcharts-radialbar-area" }); + if (h.dropShadow.enabled) { + var g = h.dropShadow; + s.dropShadow(f, g); + } + l.add(f), + f.attr("id", "apexcharts-radialbarTrack-" + o), + this.animatePaths(f, { centerX: t.centerX, centerY: t.centerY, endAngle: u, startAngle: d, size: t.size, i: o, totalItems: 2, animBeginArr: 0, dur: 0, isTrack: !0, easing: e.globals.easing }); + } + return a; + }, + }, + { + key: "drawArcs", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = new P(this.ctx), + s = new x(this.ctx), + n = i.group(), + r = this.getStrokeWidth(t); + t.size = t.size - r / 2; + var o = e.config.plotOptions.radialBar.hollow.background, + l = t.size - r * t.series.length - this.margin * t.series.length - (r * parseInt(e.config.plotOptions.radialBar.track.strokeWidth)) / 100 / 2, + h = l - e.config.plotOptions.radialBar.hollow.margin; + void 0 !== e.config.plotOptions.radialBar.hollow.image && (o = this.drawHollowImage(t, n, l, o)); + var c = this.drawHollow({ size: h, centerX: t.centerX, centerY: t.centerY, fill: o }); + if (e.config.plotOptions.radialBar.hollow.dropShadow.enabled) { + var d = e.config.plotOptions.radialBar.hollow.dropShadow; + s.dropShadow(c, d); + } + var u = 1; + !this.radialDataLabels.total.show && e.globals.series.length > 1 && (u = 0); + var f = null; + this.radialDataLabels.show && (f = this.renderInnerDataLabels(this.radialDataLabels, { hollowSize: l, centerX: t.centerX, centerY: t.centerY, opacity: u })), + "back" === e.config.plotOptions.radialBar.hollow.position && (n.add(c), f && n.add(f)); + var g = !1; + e.config.plotOptions.radialBar.inverseOrder && (g = !0); + for (var v = g ? t.series.length - 1 : 0; g ? v >= 0 : v < t.series.length; g ? v-- : v++) { + var b = i.group({ class: "apexcharts-series apexcharts-radial-series", seriesName: p.escapeString(e.globals.seriesNames[v]) }); + n.add(b), b.attr({ id: "apexcharts-series-" + v, rel: v + 1, "data:realIndex": v }), this.ctx.series.addCollapsedClassToSeries(b, v), (t.size = t.size - r - this.margin); + var y = a.fillPath({ seriesNumber: v, size: t.size, value: t.series[v] }), + w = this.startAngle, + k = void 0, + S = Math.abs(e.config.plotOptions.radialBar.endAngle - e.config.plotOptions.radialBar.startAngle), + A = p.negToZero(t.series[v] > 100 ? 100 : t.series[v]) / 100, + C = Math.round(S * A) + this.startAngle, + L = void 0; + e.globals.dataChanged && ((k = this.startAngle), (L = Math.round((S * p.negToZero(e.globals.previousPaths[v])) / 100) + k)), + Math.abs(C) + Math.abs(w) >= 360 && (C -= 0.01), + Math.abs(L) + Math.abs(k) >= 360 && (L -= 0.01); + var E = C - w, + T = Array.isArray(e.config.stroke.dashArray) ? e.config.stroke.dashArray[v] : e.config.stroke.dashArray, + M = i.drawPath({ d: "", stroke: y, strokeWidth: r, fill: "none", fillOpacity: e.config.fill.opacity, classes: "apexcharts-radialbar-area", strokeDashArray: T }); + if ((m.setAttrs(M.node, { "data:angle": E, "data:value": t.series[v] }), e.config.chart.dropShadow.enabled)) { + var z = e.config.chart.dropShadow; + s.dropShadow(M, z, v); + } + this.addListeners(M, this.radialDataLabels), b.add(M), M.attr({ id: "apexcharts-radialbar-slice-" + v, index: 0, j: v }); + var I = 0; + !this.initialAnim || + e.globals.resized || + e.globals.dataChanged || + ((I = ((C - w) / 360) * e.config.chart.animations.speed), (this.animDur = I / (1.2 * t.series.length) + this.animDur), this.animBeginArr.push(this.animDur)), + e.globals.dataChanged && + ((I = ((C - w) / 360) * e.config.chart.animations.dynamicAnimation.speed), (this.animDur = I / (1.2 * t.series.length) + this.animDur), this.animBeginArr.push(this.animDur)), + this.animatePaths(M, { + centerX: t.centerX, + centerY: t.centerY, + endAngle: C, + startAngle: w, + prevEndAngle: L, + prevStartAngle: k, + size: t.size, + i: v, + totalItems: 2, + animBeginArr: this.animBeginArr, + dur: I, + shouldSetPrevPaths: !0, + easing: e.globals.easing, + }); + } + return { g: n, elHollow: c, dataLabels: f }; + }, + }, + { + key: "drawHollow", + value: function (t) { + var e = new m(this.ctx).drawCircle(2 * t.size); + return e.attr({ class: "apexcharts-radialbar-hollow", cx: t.centerX, cy: t.centerY, r: t.size, fill: t.fill }), e; + }, + }, + { + key: "drawHollowImage", + value: function (t, e, i, a) { + var s = this.w, + n = new P(this.ctx), + r = (Math.random() + 1).toString(36).substring(4), + o = s.config.plotOptions.radialBar.hollow.image; + if (s.config.plotOptions.radialBar.hollow.imageClipped) + n.clippedImgArea({ width: i, height: i, image: o, patternID: "pattern".concat(s.globals.cuid).concat(r) }), (a = "url(#pattern".concat(s.globals.cuid).concat(r, ")")); + else { + var l = s.config.plotOptions.radialBar.hollow.imageWidth, + h = s.config.plotOptions.radialBar.hollow.imageHeight; + if (void 0 === l && void 0 === h) { + var c = s.globals.dom.Paper.image(o).loaded(function (e) { + this.move(t.centerX - e.width / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetX, t.centerY - e.height / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetY); + }); + e.add(c); + } else { + var d = s.globals.dom.Paper.image(o).loaded(function (e) { + this.move(t.centerX - l / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetX, t.centerY - h / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetY), this.size(l, h); + }); + e.add(d); + } + } + return a; + }, + }, + { + key: "getStrokeWidth", + value: function (t) { + var e = this.w; + return (t.size * (100 - parseInt(e.config.plotOptions.radialBar.hollow.size))) / 100 / (t.series.length + 1) - this.margin; + }, + }, + ]), + e + ); + })(), + H = (function (t) { + function e() { + return n(this, e), f(this, d(e).apply(this, arguments)); + } + return ( + c(e, I), + o(e, [ + { + key: "draw", + value: function (t, e) { + var i = this.w, + a = new m(this.ctx), + s = new P(this.ctx); + (this.rangeBarOptions = this.w.config.plotOptions.rangeBar), + (this.series = t), + (this.seriesRangeStart = i.globals.seriesRangeStart), + (this.seriesRangeEnd = i.globals.seriesRangeEnd), + this.initVariables(t); + for (var n = a.group({ class: "apexcharts-rangebar-series apexcharts-plot-series" }), r = 0, o = 0; r < t.length; r++, o++) { + var l, + h, + c, + d, + u = void 0, + f = void 0, + g = void 0, + x = void 0, + v = [], + b = [], + y = i.globals.comboCharts ? e[r] : r, + w = a.group({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[y]), rel: r + 1, "data:realIndex": y }); + t[r].length > 0 && (this.visibleI = this.visibleI + 1); + var k = 0, + S = 0, + A = 0; + this.yRatio.length > 1 && (this.yaxisIndex = y); + var C = this.initialPositions(); + (x = C.y), (h = C.yDivision), (S = C.barHeight), (d = C.zeroW), (g = C.x), (A = C.barWidth), (l = C.xDivision), (c = C.zeroH), b.push(g + A / 2); + for (var L = a.group({ class: "apexcharts-datalabels" }), E = 0, T = i.globals.dataPoints; E < i.globals.dataPoints; E++, T--) { + void 0 === this.series[r][E] || null === t[r][E] ? (this.isNullValue = !0) : (this.isNullValue = !1), + i.config.stroke.show && (k = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[y] : this.strokeWidth); + var M = null; + this.isHorizontal + ? (A = (M = this.drawRangeBarPaths({ indexes: { i: r, j: E, realIndex: y, bc: o }, barHeight: S, strokeWidth: k, pathTo: u, pathFrom: f, zeroW: d, x: g, y: x, yDivision: h, elSeries: w })) + .barWidth) + : (S = (M = this.drawRangeColumnPaths({ indexes: { i: r, j: E, realIndex: y, bc: o }, x: g, y: x, xDivision: l, pathTo: u, pathFrom: f, barWidth: A, zeroH: c, strokeWidth: k, elSeries: w })) + .barHeight), + (u = M.pathTo), + (f = M.pathFrom), + (x = M.y), + (g = M.x), + E > 0 && b.push(g + A / 2), + v.push(x); + var z = s.fillPath({ seriesNumber: y }), + I = i.globals.stroke.colors[y]; + w = this.renderSeries({ + realIndex: y, + pathFill: z, + lineFill: I, + j: E, + i: r, + pathFrom: f, + pathTo: u, + strokeWidth: k, + elSeries: w, + x: g, + y: x, + series: t, + barHeight: S, + barWidth: A, + elDataLabelsWrap: L, + visibleSeries: this.visibleI, + type: "rangebar", + }); + } + (i.globals.seriesXvalues[y] = b), (i.globals.seriesYvalues[y] = v), n.add(w); + } + return n; + }, + }, + { + key: "drawRangeColumnPaths", + value: function (t) { + var e = t.indexes, + i = t.x, + a = (t.y, t.strokeWidth), + s = t.xDivision, + n = t.pathTo, + r = t.pathFrom, + o = t.barWidth, + l = t.zeroH, + h = this.w, + c = new m(this.ctx), + d = e.i, + u = e.j, + f = this.yRatio[this.yaxisIndex], + g = e.realIndex, + p = this.getRangeValue(g, u), + x = Math.min(p.start, p.end), + v = Math.max(p.start, p.end); + h.globals.isXNumeric && (i = (h.globals.seriesX[d][u] - h.globals.minX) / this.xRatio - o / 2); + var b = i + o * this.visibleI; + void 0 === this.series[d][u] || null === this.series[d][u] ? (x = l) : ((x = l - x / f), (v = l - v / f)); + var y = Math.abs(v - x); + return ( + c.move(b, l), + (r = c.move(b, x)), + h.globals.previousPaths.length > 0 && (r = this.getPathFrom(g, u, !0)), + (n = c.move(b, v) + c.line(b + o, v) + c.line(b + o, x) + c.line(b, x) + c.line(b, v - a / 2)), + (r = r + c.move(b, x) + c.line(b + o, x) + c.line(b + o, x) + c.line(b, x)), + h.globals.isXNumeric || (i += s), + { pathTo: n, pathFrom: r, barHeight: y, x: i, y: v, barXPosition: b } + ); + }, + }, + { + key: "drawRangeBarPaths", + value: function (t) { + var e = t.indexes, + i = (t.x, t.y), + a = t.yDivision, + s = t.pathTo, + n = t.pathFrom, + r = t.barHeight, + o = t.zeroW, + l = this.w, + h = new m(this.ctx), + c = e.i, + d = e.j, + u = e.realIndex, + f = o, + g = o; + l.globals.isXNumeric && (i = (l.globals.seriesX[c][d] - l.globals.minX) / this.invertedXRatio - r); + var p = i + r * this.visibleI; + void 0 !== this.series[c][d] && null !== this.series[c][d] && ((f = o + this.seriesRangeStart[c][d] / this.invertedYRatio), (g = o + this.seriesRangeEnd[c][d] / this.invertedYRatio)), + h.move(o, p), + (n = h.move(o, p)), + l.globals.previousPaths.length > 0 && (n = this.getPathFrom(u, d)); + var x = Math.abs(g - f); + return ( + (s = h.move(f, p) + h.line(g, p) + h.line(g, p + r) + h.line(f, p + r) + h.line(f, p)), + (n = n + h.line(f, p) + h.line(f, p + r) + h.line(f, p + r) + h.line(f, p)), + l.globals.isXNumeric || (i += a), + { pathTo: s, pathFrom: n, barWidth: x, x: g, y: i, barYPosition: p } + ); + }, + }, + { + key: "getRangeValue", + value: function (t, e) { + var i = this.w; + return { start: i.globals.seriesRangeStart[t][e], end: i.globals.seriesRangeEnd[t][e] }; + }, + }, + ]), + e + ); + })(), + _ = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.tooltipKeyFormat = "dd MMM"); + } + return ( + o(t, [ + { + key: "xLabelFormat", + value: function (t, e) { + var i = this.w; + if ("datetime" === i.config.xaxis.type && void 0 === i.config.tooltip.x.formatter) return new k(this.ctx).formatDate(new Date(e), i.config.tooltip.x.format, !0, !0); + return t(e); + }, + }, + { + key: "setLabelFormatters", + value: function () { + var t = this.w; + return ( + (t.globals.xLabelFormatter = function (t) { + return t; + }), + (t.globals.xaxisTooltipFormatter = function (t) { + return t; + }), + (t.globals.ttKeyFormatter = function (t) { + return t; + }), + (t.globals.ttZFormatter = function (t) { + return t; + }), + (t.globals.legendFormatter = function (t) { + return t; + }), + "function" == typeof t.config.tooltip.x.formatter && (t.globals.ttKeyFormatter = t.config.tooltip.x.formatter), + "function" == typeof t.config.xaxis.tooltip.formatter && (t.globals.xaxisTooltipFormatter = t.config.xaxis.tooltip.formatter), + Array.isArray(t.config.tooltip.y) ? (t.globals.ttVal = t.config.tooltip.y) : void 0 !== t.config.tooltip.y.formatter && (t.globals.ttVal = t.config.tooltip.y), + void 0 !== t.config.tooltip.z.formatter && (t.globals.ttZFormatter = t.config.tooltip.z.formatter), + void 0 !== t.config.legend.formatter && (t.globals.legendFormatter = t.config.legend.formatter), + void 0 !== t.config.xaxis.labels.formatter + ? (t.globals.xLabelFormatter = t.config.xaxis.labels.formatter) + : (t.globals.xLabelFormatter = function (e) { + return p.isNumber(e) ? ("numeric" === t.config.xaxis.type && t.globals.dataPoints < 50 ? e.toFixed(1) : e.toFixed(0)) : e; + }), + t.config.yaxis.forEach(function (e, i) { + void 0 !== e.labels.formatter + ? (t.globals.yLabelFormatters[i] = e.labels.formatter) + : (t.globals.yLabelFormatters[i] = function (a) { + return p.isNumber(a) + ? 0 !== t.globals.yValueDecimal + ? a.toFixed(void 0 !== e.decimalsInFloat ? e.decimalsInFloat : t.globals.yValueDecimal) + : t.globals.maxYArr[i] - t.globals.minYArr[i] < 5 + ? a.toFixed(1) + : a.toFixed(0) + : a; + }); + }), + t.globals + ); + }, + }, + { + key: "heatmapLabelFormatters", + value: function () { + var t = this.w; + if ("heatmap" === t.config.chart.type) { + t.globals.yAxisScale[0].result = t.globals.seriesNames.slice(); + var e = t.globals.seriesNames.reduce(function (t, e) { + return t.length > e.length ? t : e; + }, 0); + (t.globals.yAxisScale[0].niceMax = e), (t.globals.yAxisScale[0].niceMin = e); + } + }, + }, + ]), + t + ); + })(), + W = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "getLabel", + value: function (t, e, i, a) { + var s, + n = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : [], + r = this.w, + o = void 0 === t[a] ? "" : t[a], + l = r.globals.xLabelFormatter, + h = r.config.xaxis.labels.formatter; + return ( + (s = new _(this.ctx).xLabelFormat(l, o)), + void 0 !== h && (s = h(o, t[a], a)), + e.length > 0 ? ((i = e[a].position), (s = e[a].value)) : "datetime" === r.config.xaxis.type && void 0 === h && (s = ""), + void 0 === s && (s = ""), + (0 === (s = s.toString()).indexOf("NaN") || 0 === s.toLowerCase().indexOf("invalid") || s.toLowerCase().indexOf("infinity") >= 0 || (n.indexOf(s) >= 0 && !r.config.xaxis.labels.showDuplicates)) && + (s = ""), + { x: i, text: s } + ); + }, + }, + { + key: "drawYAxisTicks", + value: function (t, e, i, a, s, n, r) { + var o = this.w, + l = new m(this.ctx), + h = o.globals.translateY; + if (a.show) { + !0 === o.config.yaxis[s].opposite && (t += a.width); + for (var c = e; c >= 0; c--) { + var d = h + e / 10 + o.config.yaxis[s].labels.offsetY - 1; + o.globals.isBarHorizontal && (d = n * c); + var u = l.drawLine(t + i.offsetX - a.width + a.offsetX, d + a.offsetY, t + i.offsetX + a.offsetX, d + a.offsetY, i.color); + r.add(u), (h += n); + } + } + }, + }, + ]), + t + ); + })(), + B = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + var i = this.w; + (this.xaxisFontSize = i.config.xaxis.labels.style.fontSize), + (this.axisFontFamily = i.config.xaxis.labels.style.fontFamily), + (this.xaxisForeColors = i.config.xaxis.labels.style.colors), + (this.xAxisoffX = 0), + "bottom" === i.config.xaxis.position && (this.xAxisoffX = i.globals.gridHeight), + (this.drawnLabels = []), + (this.axesUtils = new W(e)); + } + return ( + o(t, [ + { + key: "drawYaxis", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = e.config.yaxis[t].labels.style.fontSize, + s = e.config.yaxis[t].labels.style.fontFamily, + n = i.group({ class: "apexcharts-yaxis", rel: t, transform: "translate(" + e.globals.translateYAxisX[t] + ", 0)" }); + if (!e.config.yaxis[t].show) return n; + var r = i.group({ class: "apexcharts-yaxis-texts-g" }); + n.add(r); + var o = e.globals.yAxisScale[t].result.length - 1, + l = e.globals.gridHeight / o + 0.1, + h = e.globals.translateY, + c = e.globals.yLabelFormatters[t], + d = e.globals.yAxisScale[t].result.slice(); + if ((e.config.yaxis[t] && e.config.yaxis[t].reversed && d.reverse(), e.config.yaxis[t].labels.show)) + for (var u = o; u >= 0; u--) { + var f = d[u]; + f = c(f, u); + var g = e.config.yaxis[t].labels.padding; + e.config.yaxis[t].opposite && 0 !== e.config.yaxis.length && (g *= -1); + var p = i.drawText({ + x: g, + y: h + o / 10 + e.config.yaxis[t].labels.offsetY + 1, + text: f, + textAnchor: e.config.yaxis[t].opposite ? "start" : "end", + fontSize: a, + fontFamily: s, + foreColor: e.config.yaxis[t].labels.style.color, + cssClass: "apexcharts-yaxis-label " + e.config.yaxis[t].labels.style.cssClass, + }); + r.add(p); + var x = i.rotateAroundCenter(p.node); + 0 !== e.config.yaxis[t].labels.rotate && p.node.setAttribute("transform", "rotate(".concat(e.config.yaxis[t].labels.rotate, " ").concat(x.x, " ").concat(x.y, ")")), (h += l); + } + if (void 0 !== e.config.yaxis[t].title.text) { + var v = i.group({ class: "apexcharts-yaxis-title" }), + b = 0; + e.config.yaxis[t].opposite && (b = e.globals.translateYAxisX[t]); + var y = i.drawText({ + x: b, + y: e.globals.gridHeight / 2 + e.globals.translateY, + text: e.config.yaxis[t].title.text, + textAnchor: "end", + foreColor: e.config.yaxis[t].title.style.color, + fontSize: e.config.yaxis[t].title.style.fontSize, + fontFamily: e.config.yaxis[t].title.style.fontFamily, + cssClass: "apexcharts-yaxis-title-text " + e.config.yaxis[t].title.style.cssClass, + }); + v.add(y), n.add(v); + } + var w = e.config.yaxis[t].axisBorder; + if (w.show) { + var k = 31 + w.offsetX; + e.config.yaxis[t].opposite && (k = -31 - w.offsetX); + var S = i.drawLine(k, e.globals.translateY + w.offsetY - 2, k, e.globals.gridHeight + e.globals.translateY + w.offsetY + 2, w.color); + n.add(S), this.axesUtils.drawYAxisTicks(k, o, w, e.config.yaxis[t].axisTicks, t, l, n); + } + return n; + }, + }, + { + key: "drawYaxisInversed", + value: function (t) { + var e = this.w, + i = new m(this.ctx), + a = i.group({ class: "apexcharts-xaxis apexcharts-yaxis-inversed" }), + s = i.group({ class: "apexcharts-xaxis-texts-g", transform: "translate(".concat(e.globals.translateXAxisX, ", ").concat(e.globals.translateXAxisY, ")") }); + a.add(s); + var n = e.globals.yAxisScale[t].result.length - 1, + r = e.globals.gridWidth / n + 0.1, + o = r + e.config.xaxis.labels.offsetX, + l = e.globals.xLabelFormatter, + h = e.globals.yAxisScale[t].result.slice(), + c = e.globals.invertedTimelineLabels; + c.length > 0 && ((this.xaxisLabels = c.slice()), (n = (h = c.slice()).length)), e.config.yaxis[t] && e.config.yaxis[t].reversed && h.reverse(); + var d = c.length; + if (e.config.xaxis.labels.show) + for (var u = d ? 0 : n; d ? u < d - 1 : u >= 0; d ? u++ : u--) { + var f = h[u]; + f = l(f, u); + var g = e.globals.gridWidth + e.globals.padHorizontal - (o - r + e.config.xaxis.labels.offsetX); + if (c.length) { + var p = this.axesUtils.getLabel(h, c, g, u, this.drawnLabels); + (g = p.x), (f = p.text), this.drawnLabels.push(p.text); + } + var x = i.drawText({ + x: g, + y: this.xAxisoffX + e.config.xaxis.labels.offsetY + 30, + text: "", + textAnchor: "middle", + foreColor: Array.isArray(this.xaxisForeColors) ? this.xaxisForeColors[t] : this.xaxisForeColors, + fontSize: this.xaxisFontSize, + fontFamily: this.xaxisFontFamily, + cssClass: "apexcharts-xaxis-label " + e.config.xaxis.labels.style.cssClass, + }); + s.add(x), x.tspan(f); + var v = document.createElementNS(e.globals.SVGNS, "title"); + (v.textContent = f), x.node.appendChild(v), (o += r); + } + if (void 0 !== e.config.xaxis.title.text) { + var b = i.group({ class: "apexcharts-xaxis-title apexcharts-yaxis-title-inversed" }), + y = i.drawText({ + x: e.globals.gridWidth / 2, + y: this.xAxisoffX + parseInt(this.xaxisFontSize) + parseInt(e.config.xaxis.title.style.fontSize) + 20, + text: e.config.xaxis.title.text, + textAnchor: "middle", + fontSize: e.config.xaxis.title.style.fontSize, + fontFamily: e.config.xaxis.title.style.fontFamily, + cssClass: "apexcharts-xaxis-title-text " + e.config.xaxis.title.style.cssClass, + }); + b.add(y), a.add(b); + } + var w = e.config.yaxis[t].axisBorder; + if (w.show) { + var k = i.drawLine(e.globals.padHorizontal + w.offsetX, 1 + w.offsetY, e.globals.padHorizontal + w.offsetX, e.globals.gridHeight + w.offsetY, w.color); + a.add(k); + } + return a; + }, + }, + { + key: "yAxisTitleRotate", + value: function (t, e) { + var i = this.w, + a = new m(this.ctx), + s = { width: 0, height: 0 }, + n = { width: 0, height: 0 }, + r = i.globals.dom.baseEl.querySelector(" .apexcharts-yaxis[rel='".concat(t, "'] .apexcharts-yaxis-texts-g")); + null !== r && (s = r.getBoundingClientRect()); + var o = i.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(t, "'] .apexcharts-yaxis-title text")); + if ((null !== o && (n = o.getBoundingClientRect()), null !== o)) { + var l = this.xPaddingForYAxisTitle(t, s, n, e); + o.setAttribute("x", l.xPos - (e ? 10 : 0)); + } + if (null !== o) { + var h = a.rotateAroundCenter(o); + e + ? o.setAttribute("transform", "rotate(".concat(i.config.yaxis[t].title.rotate, " ").concat(h.x, " ").concat(h.y, ")")) + : o.setAttribute("transform", "rotate(-".concat(i.config.yaxis[t].title.rotate, " ").concat(h.x, " ").concat(h.y, ")")); + } + }, + }, + { + key: "xPaddingForYAxisTitle", + value: function (t, e, i, a) { + var s = this.w, + n = 0, + r = 0, + o = 10; + return void 0 === s.config.yaxis[t].title.text || t < 0 + ? { xPos: r, padd: 0 } + : (a + ? ((r = e.width + s.config.yaxis[t].title.offsetX + i.width / 2 + o / 2), 0 === (n += 1) && (r -= o / 2)) + : ((r = -1 * e.width + s.config.yaxis[t].title.offsetX + o / 2 + i.width / 2), s.globals.isBarHorizontal && ((o = 25), (r = -1 * e.width - s.config.yaxis[t].title.offsetX - o))), + { xPos: r, padd: o }); + }, + }, + { + key: "setYAxisXPosition", + value: function (t, e) { + var i = this.w, + a = 0, + s = 0, + n = 21, + r = 1; + i.config.yaxis.length > 1 && (this.multipleYs = !0), + i.config.yaxis.map(function (o, l) { + var h = i.globals.ignoreYAxisIndexes.indexOf(l) > -1 || !o.show || o.floating || 0 === t[l].width, + c = t[l].width + e[l].width; + o.opposite + ? i.globals.isBarHorizontal + ? ((s = i.globals.gridWidth + i.globals.translateX - 1), (i.globals.translateYAxisX[l] = s - o.labels.offsetX)) + : ((s = i.globals.gridWidth + i.globals.translateX + r), h || (r = r + c + 20), (i.globals.translateYAxisX[l] = s - o.labels.offsetX + 20)) + : ((a = i.globals.translateX - n), h || (n = n + c + 20), (i.globals.translateYAxisX[l] = a + o.labels.offsetX)); + }); + }, + }, + { + key: "setYAxisTextAlignments", + value: function () { + var t = this.w, + e = t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis"); + (e = p.listToArray(e)).forEach(function (e, i) { + var a = t.config.yaxis[i]; + if (void 0 !== a.labels.align) { + var s = t.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(i, "'] .apexcharts-yaxis-texts-g")), + n = t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis[rel='".concat(i, "'] .apexcharts-yaxis-label")); + n = p.listToArray(n); + var r = s.getBoundingClientRect(); + "left" === a.labels.align + ? (n.forEach(function (t, e) { + t.setAttribute("text-anchor", "start"); + }), + a.opposite || s.setAttribute("transform", "translate(-".concat(r.width, ", 0)"))) + : "center" === a.labels.align + ? (n.forEach(function (t, e) { + t.setAttribute("text-anchor", "middle"); + }), + s.setAttribute("transform", "translate(".concat((r.width / 2) * (a.opposite ? 1 : -1), ", 0)"))) + : "right" === a.labels.align && + (n.forEach(function (t, e) { + t.setAttribute("text-anchor", "end"); + }), + a.opposite && s.setAttribute("transform", "translate(".concat(r.width, ", 0)"))); + } + }); + }, + }, + ]), + t + ); + })(), + V = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.lgRect = {}), (this.yAxisWidth = 0), (this.xAxisHeight = 0), (this.isSparkline = this.w.config.chart.sparkline.enabled), (this.xPadRight = 0), (this.xPadLeft = 0); + } + return ( + o(t, [ + { + key: "plotCoords", + value: function () { + var t = this.w, + e = t.globals, + i = this.getLegendsRect(); + e.axisCharts ? this.setGridCoordsForAxisCharts(i) : this.setGridCoordsForNonAxisCharts(i), + this.titleSubtitleOffset(), + (e.gridHeight = e.gridHeight - t.config.grid.padding.top - t.config.grid.padding.bottom), + (e.gridWidth = e.gridWidth - t.config.grid.padding.left - t.config.grid.padding.right - this.xPadRight - this.xPadLeft), + (e.translateX = e.translateX + t.config.grid.padding.left + this.xPadLeft), + (e.translateY = e.translateY + t.config.grid.padding.top); + }, + }, + { + key: "conditionalChecksForAxisCoords", + value: function (t, e) { + var i = this.w; + (this.xAxisHeight = (t.height + e.height) * i.globals.LINE_HEIGHT_RATIO + 15), + (this.xAxisWidth = t.width), + this.xAxisHeight - e.height > i.config.xaxis.labels.maxHeight && (this.xAxisHeight = i.config.xaxis.labels.maxHeight), + i.config.xaxis.labels.minHeight && this.xAxisHeight < i.config.xaxis.labels.minHeight && (this.xAxisHeight = i.config.xaxis.labels.minHeight), + i.config.xaxis.floating && (this.xAxisHeight = 0), + i.globals.isBarHorizontal ? (this.yAxisWidth = i.globals.yLabelsCoords[0].width + i.globals.yTitleCoords[0].width + 15) : (this.yAxisWidth = this.getTotalYAxisWidth()); + var a = 0, + s = 0; + i.config.yaxis.forEach(function (t) { + (a += t.labels.minWidth), (s += t.labels.maxWidth); + }), + this.yAxisWidth < a && (this.yAxisWidth = a), + this.yAxisWidth > s && (this.yAxisWidth = s); + }, + }, + { + key: "setGridCoordsForAxisCharts", + value: function (t) { + var e = this.w, + i = e.globals, + a = this.getyAxisLabelsCoords(), + s = this.getxAxisLabelsCoords(), + n = this.getyAxisTitleCoords(), + r = this.getxAxisTitleCoords(); + (e.globals.yLabelsCoords = []), + (e.globals.yTitleCoords = []), + e.config.yaxis.map(function (t, i) { + e.globals.yLabelsCoords.push({ width: a[i].width, index: i }), e.globals.yTitleCoords.push({ width: n[i].width, index: i }); + }), + this.conditionalChecksForAxisCoords(s, r), + (i.translateXAxisY = e.globals.rotateXLabels ? this.xAxisHeight / 8 : -4), + (i.translateXAxisX = e.globals.rotateXLabels && e.globals.isXNumeric && e.config.xaxis.labels.rotate <= -45 ? -this.xAxisWidth / 4 : 0), + e.globals.isBarHorizontal && ((i.rotateXLabels = !1), (i.translateXAxisY = (parseInt(e.config.xaxis.labels.style.fontSize) / 1.5) * -1)), + (i.translateXAxisY = i.translateXAxisY + e.config.xaxis.labels.offsetY), + (i.translateXAxisX = i.translateXAxisX + e.config.xaxis.labels.offsetX); + var o = this.yAxisWidth, + l = this.xAxisHeight; + (i.xAxisLabelsHeight = this.xAxisHeight), (i.xAxisHeight = this.xAxisHeight); + var h = 10; + switch ( + ((e.config.grid.show && "radar" !== e.config.chart.type) || ((o = 0), (l = 35)), + this.isSparkline && ((t = { height: 0, width: 0 }), (l = 0), (o = 0), (h = 0)), + this.additionalPaddingXLabels(s), + e.config.legend.position) + ) { + case "bottom": + (i.translateY = h), (i.translateX = o), (i.gridHeight = i.svgHeight - t.height - l - (this.isSparkline ? 0 : e.globals.rotateXLabels ? 10 : 15)), (i.gridWidth = i.svgWidth - o); + break; + case "top": + (i.translateY = t.height + h), (i.translateX = o), (i.gridHeight = i.svgHeight - t.height - l - (this.isSparkline ? 0 : e.globals.rotateXLabels ? 10 : 15)), (i.gridWidth = i.svgWidth - o); + break; + case "left": + (i.translateY = h), (i.translateX = t.width + o), (i.gridHeight = i.svgHeight - l - 12), (i.gridWidth = i.svgWidth - t.width - o); + break; + case "right": + (i.translateY = h), (i.translateX = o), (i.gridHeight = i.svgHeight - l - 12), (i.gridWidth = i.svgWidth - t.width - o - 5); + break; + default: + throw new Error("Legend position not supported"); + } + this.setGridXPosForDualYAxis(n, a), new B(this.ctx).setYAxisXPosition(a, n); + }, + }, + { + key: "setGridCoordsForNonAxisCharts", + value: function (t) { + var e = this.w, + i = e.globals, + a = 0; + e.config.legend.show && !e.config.legend.floating && (a = 20); + var s = 10, + n = 0; + if ( + ("pie" === e.config.chart.type || "donut" === e.config.chart.type + ? ((s += e.config.plotOptions.pie.offsetY), (n += e.config.plotOptions.pie.offsetX)) + : "radialBar" === e.config.chart.type && ((s += e.config.plotOptions.radialBar.offsetY), (n += e.config.plotOptions.radialBar.offsetX)), + !e.config.legend.show) + ) + return (i.gridHeight = i.svgHeight - 35), (i.gridWidth = i.gridHeight), (i.translateY = s - 10), void (i.translateX = n + (i.svgWidth - i.gridWidth) / 2); + switch (e.config.legend.position) { + case "bottom": + (i.gridHeight = i.svgHeight - t.height - 35), (i.gridWidth = i.gridHeight), (i.translateY = s - 20), (i.translateX = n + (i.svgWidth - i.gridWidth) / 2); + break; + case "top": + (i.gridHeight = i.svgHeight - t.height - 35), (i.gridWidth = i.gridHeight), (i.translateY = t.height + s + 10), (i.translateX = n + (i.svgWidth - i.gridWidth) / 2); + break; + case "left": + (i.gridWidth = i.svgWidth - t.width - a), (i.gridHeight = i.gridWidth), (i.translateY = s), (i.translateX = n + t.width + a); + break; + case "right": + (i.gridWidth = i.svgWidth - t.width - a - 5), (i.gridHeight = i.gridWidth), (i.translateY = s), (i.translateX = n + 10); + break; + default: + throw new Error("Legend position not supported"); + } + }, + }, + { + key: "setGridXPosForDualYAxis", + value: function (t, e) { + var i = this.w; + i.config.yaxis.map(function (a, s) { + -1 === i.globals.ignoreYAxisIndexes.indexOf(s) && + !i.config.yaxis[s].floating && + i.config.yaxis[s].show && + a.opposite && + (i.globals.translateX = i.globals.translateX - (e[s].width + t[s].width) - parseInt(i.config.yaxis[s].labels.style.fontSize) / 1.2 - 12); + }); + }, + }, + { + key: "additionalPaddingXLabels", + value: function (t) { + var e = this, + i = this.w; + if (("category" === i.config.xaxis.type && i.globals.isBarHorizontal) || "numeric" === i.config.xaxis.type || "datetime" === i.config.xaxis.type) { + var a = i.globals.isXNumeric; + i.config.yaxis.forEach(function (s, n) { + var r; + (!s.show || s.floating || -1 !== i.globals.collapsedSeriesIndices.indexOf(n) || a || (s.opposite && i.globals.isBarHorizontal)) && + (((a && i.globals.isMultipleYAxis && -1 !== i.globals.collapsedSeriesIndices.indexOf(n)) || (i.globals.isBarHorizontal && s.opposite)) && + ((r = t), i.config.grid.padding.left < r.width && (e.xPadLeft = r.width / 2 + 1)), + ((!i.globals.isBarHorizontal && s.opposite && -1 !== i.globals.collapsedSeriesIndices.indexOf(n)) || (a && !i.globals.isMultipleYAxis)) && + (function (t) { + e.timescaleLabels + ? e.timescaleLabels[e.timescaleLabels.length - 1].position + t.width > i.globals.gridWidth + ? (i.globals.skipLastTimelinelabel = !0) + : (i.globals.skipLastTimelinelabel = !1) + : "datetime" !== i.config.xaxis.type && i.config.grid.padding.right < t.width && (e.xPadRight = t.width / 2 + 1); + })(t)); + }); + } + }, + }, + { + key: "titleSubtitleOffset", + value: function () { + var t = this.w, + e = t.globals, + i = this.isSparkline || !t.globals.axisCharts ? 0 : 10; + void 0 !== t.config.title.text ? (i += t.config.title.margin) : (i += this.isSparkline || !t.globals.axisCharts ? 0 : 5), + void 0 !== t.config.subtitle.text ? (i += t.config.subtitle.margin) : (i += this.isSparkline || !t.globals.axisCharts ? 0 : 5), + t.config.legend.show && "bottom" === t.config.legend.position && !t.config.legend.floating && (t.config.series.length > 1 || !t.globals.axisCharts || t.config.legend.showForSingleSeries) && (i += 10); + var a = this.getTitleSubtitleCoords("title"), + s = this.getTitleSubtitleCoords("subtitle"); + (e.gridHeight = e.gridHeight - a.height - s.height - i), (e.translateY = e.translateY + a.height + s.height + i); + }, + }, + { + key: "getTotalYAxisWidth", + value: function () { + var t = this.w, + e = 0, + i = 10, + a = function (e) { + return t.globals.ignoreYAxisIndexes.indexOf(e) > -1; + }; + return ( + t.globals.yLabelsCoords.map(function (s, n) { + var r = t.config.yaxis[n].floating; + s.width > 0 && !r ? ((e = e + s.width + i), a(n) && (e = e - s.width - i)) : (e += r || !t.config.yaxis[n].show ? 0 : 5); + }), + t.globals.yTitleCoords.map(function (s, n) { + var r = t.config.yaxis[n].floating; + (i = parseInt(t.config.yaxis[n].title.style.fontSize)), s.width > 0 && !r ? ((e = e + s.width + i), a(n) && (e = e - s.width - i)) : (e += r || !t.config.yaxis[n].show ? 0 : 5); + }), + e + ); + }, + }, + { + key: "getxAxisTimeScaleLabelsCoords", + value: function () { + var t, + e = this.w; + (this.timescaleLabels = e.globals.timelineLabels.slice()), e.globals.isBarHorizontal && "datetime" === e.config.xaxis.type && (this.timescaleLabels = e.globals.invertedTimelineLabels.slice()); + var i = this.timescaleLabels.map(function (t) { + return t.value; + }), + a = i.reduce(function (t, e) { + return void 0 === t ? (console.error("You have possibly supplied invalid Date format. Please supply a valid JavaScript Date"), 0) : t.length > e.length ? t : e; + }, 0); + return ( + 1.05 * (t = new m(this.ctx).getTextRects(a, e.config.xaxis.labels.style.fontSize)).width * i.length > e.globals.gridWidth && 0 !== e.config.xaxis.labels.rotate && (e.globals.overlappingXLabels = !0), + t + ); + }, + }, + { + key: "getxAxisLabelsCoords", + value: function () { + var t, + e = this.w, + i = e.globals.labels.slice(); + if (e.globals.timelineLabels.length > 0) { + var a = this.getxAxisTimeScaleLabelsCoords(); + t = { width: a.width, height: a.height }; + } else { + var s = "left" !== e.config.legend.position || "right" !== e.config.legend.position || e.config.legend.floating ? 0 : this.lgRect.width, + n = e.globals.xLabelFormatter, + r = i.reduce(function (t, e) { + return t.length > e.length ? t : e; + }, 0); + e.globals.isBarHorizontal && + (r = e.globals.yAxisScale[0].result.reduce(function (t, e) { + return t.length > e.length ? t : e; + }, 0)), + (r = new _(this.ctx).xLabelFormat(n, r)); + var o = new m(this.ctx), + l = o.getTextRects(r, e.config.xaxis.labels.style.fontSize); + (t = { width: l.width, height: l.height }).width * i.length > e.globals.svgWidth - s - this.yAxisWidth && 0 !== e.config.xaxis.labels.rotate + ? e.globals.isBarHorizontal || + ((e.globals.rotateXLabels = !0), + (l = o.getTextRects(r, e.config.xaxis.labels.style.fontSize, e.config.xaxis.labels.style.fontFamily, "rotate(".concat(e.config.xaxis.labels.rotate, " 0 0)"), !1)), + (t.height = l.height / 1.66)) + : (e.globals.rotateXLabels = !1); + } + return e.config.xaxis.labels.show || (t = { width: 0, height: 0 }), { width: t.width, height: t.height }; + }, + }, + { + key: "getyAxisLabelsCoords", + value: function () { + var t = this, + e = this.w, + i = [], + a = 10; + return ( + e.config.yaxis.map(function (s, n) { + if (s.show && s.labels.show && e.globals.yAxisScale[n].result.length) { + var r = e.globals.yLabelFormatters[n], + o = r(e.globals.yAxisScale[n].niceMax, -1); + if (((void 0 !== o && 0 !== o.length) || (o = e.globals.yAxisScale[n].niceMax), e.globals.isBarHorizontal)) + (a = 0), + (o = r( + (o = e.globals.labels.slice().reduce(function (t, e) { + return t.length > e.length ? t : e; + }, 0)), + -1 + )); + var l = new m(t.ctx).getTextRects(o, s.labels.style.fontSize); + i.push({ width: l.width + a, height: l.height }); + } else i.push({ width: 0, height: 0 }); + }), + i + ); + }, + }, + { + key: "getxAxisTitleCoords", + value: function () { + var t = this.w, + e = 0, + i = 0; + if (void 0 !== t.config.xaxis.title.text) { + var a = new m(this.ctx).getTextRects(t.config.xaxis.title.text, t.config.xaxis.title.style.fontSize); + (e = a.width), (i = a.height); + } + return { width: e, height: i }; + }, + }, + { + key: "getyAxisTitleCoords", + value: function () { + var t = this, + e = this.w, + i = []; + return ( + e.config.yaxis.map(function (e, a) { + if (e.show && void 0 !== e.title.text) { + var s = new m(t.ctx).getTextRects(e.title.text, e.title.style.fontSize, e.title.style.fontFamily, "rotate(-90 0 0)", !1); + i.push({ width: s.width, height: s.height }); + } else i.push({ width: 0, height: 0 }); + }), + i + ); + }, + }, + { + key: "getTitleSubtitleCoords", + value: function (t) { + var e = this.w, + i = 0, + a = 0, + s = "title" === t ? e.config.title.floating : e.config.subtitle.floating, + n = e.globals.dom.baseEl.querySelector(".apexcharts-".concat(t, "-text")); + if (null !== n && !s) { + var r = n.getBoundingClientRect(); + (i = r.width), (a = e.globals.axisCharts ? r.height + 5 : r.height); + } + return { width: i, height: a }; + }, + }, + { + key: "getLegendsRect", + value: function () { + var t = this.w, + e = t.globals.dom.baseEl.querySelector(".apexcharts-legend"), + i = Object.assign({}, p.getBoundingClientRect(e)); + return ( + null !== e && !t.config.legend.floating && t.config.legend.show + ? (this.lgRect = { x: i.x, y: i.y, height: i.height, width: 0 === i.height ? 0 : i.width }) + : (this.lgRect = { x: 0, y: 0, height: 0, width: 0 }), + this.lgRect + ); + }, + }, + ]), + t + ); + })(), + G = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "getAllSeriesEls", + value: function () { + return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series"); + }, + }, + { + key: "getSeriesByName", + value: function (t) { + return this.w.globals.dom.baseEl.querySelector("[seriesName='".concat(p.escapeString(t), "']")); + }, + }, + { + key: "addCollapsedClassToSeries", + value: function (t, e) { + var i = this.w; + function a(i) { + for (var a = 0; a < i.length; a++) i[a].index === e && t.node.classList.add("apexcharts-series-collapsed"); + } + a(i.globals.collapsedSeries), a(i.globals.ancillaryCollapsedSeries); + }, + }, + { + key: "resetSeries", + value: function () { + var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0], + e = this.w, + i = e.globals.initialSeries.slice(); + (e.config.series = i), + (e.globals.collapsedSeries = []), + (e.globals.ancillaryCollapsedSeries = []), + (e.globals.collapsedSeriesIndices = []), + (e.globals.ancillaryCollapsedSeriesIndices = []), + (e.globals.previousPaths = []), + t && this.ctx._updateSeries(i, e.config.chart.animations.dynamicAnimation.enabled); + }, + }, + { + key: "toggleSeriesOnHover", + value: function (t, e) { + var i = this.w, + a = i.globals.dom.baseEl.querySelectorAll(".apexcharts-series"); + if ("mousemove" === t.type) { + var s = parseInt(e.getAttribute("rel")) - 1, + n = null; + n = + i.globals.axisCharts || "radialBar" === i.config.chart.type + ? i.globals.axisCharts + ? i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(s, "']")) + : i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s + 1, "']")) + : i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s + 1, "'] path")); + for (var r = 0; r < a.length; r++) a[r].classList.add("legend-mouseover-inactive"); + null !== n && (i.globals.axisCharts || n.parentNode.classList.remove("legend-mouseover-inactive"), n.classList.remove("legend-mouseover-inactive")); + } else if ("mouseout" === t.type) for (var o = 0; o < a.length; o++) a[o].classList.remove("legend-mouseover-inactive"); + }, + }, + { + key: "highlightRangeInSeries", + value: function (t, e) { + var i = this.w, + a = i.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap-rect"), + s = function () { + for (var t = 0; t < a.length; t++) a[t].classList.remove("legend-mouseover-inactive"); + }; + if ("mousemove" === t.type) { + var n = parseInt(e.getAttribute("rel")) - 1; + s(), + (function () { + for (var t = 0; t < a.length; t++) a[t].classList.add("legend-mouseover-inactive"); + })(), + (function (t) { + for (var e = 0; e < a.length; e++) { + var i = parseInt(a[e].getAttribute("val")); + i >= t.from && i <= t.to && a[e].classList.remove("legend-mouseover-inactive"); + } + })(i.config.plotOptions.heatmap.colorScale.ranges[n]); + } else "mouseout" === t.type && s(); + }, + }, + { + key: "getActiveSeriesIndex", + value: function () { + var t = this.w, + e = 0; + if (t.globals.series.length > 1) + for ( + var i = t.globals.series.map(function (e, i) { + return e.length > 0 && "bar" !== t.config.series[i].type && "column" !== t.config.series[i].type ? i : -1; + }), + a = 0; + a < i.length; + a++ + ) + if (-1 !== i[a]) { + e = i[a]; + break; + } + return e; + }, + }, + { + key: "getActiveConfigSeriesIndex", + value: function () { + var t = this.w, + e = 0; + if (t.config.series.length > 1) + for ( + var i = t.config.series.map(function (t, e) { + return t.data && t.data.length > 0 ? e : -1; + }), + a = 0; + a < i.length; + a++ + ) + if (-1 !== i[a]) { + e = i[a]; + break; + } + return e; + }, + }, + { + key: "getPreviousPaths", + value: function () { + var t = this.w; + function e(e, i, a) { + for (var s = e[i].childNodes, n = { type: a, paths: [], realIndex: e[i].getAttribute("data:realIndex") }, r = 0; r < s.length; r++) + if (s[r].hasAttribute("pathTo")) { + var o = s[r].getAttribute("pathTo"); + n.paths.push({ d: o }); + } + t.globals.previousPaths.push(n); + } + t.globals.previousPaths = []; + var i = t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-series"); + if (i.length > 0) for (var a = i.length - 1; a >= 0; a--) e(i, a, "line"); + var s = t.globals.dom.baseEl.querySelectorAll(".apexcharts-area-series .apexcharts-series"); + if (s.length > 0) for (var n = s.length - 1; n >= 0; n--) e(s, n, "area"); + var r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series .apexcharts-series"); + if (r.length > 0) for (var o = 0; o < r.length; o++) e(r, o, "bar"); + var l = t.globals.dom.baseEl.querySelectorAll(".apexcharts-candlestick-series .apexcharts-series"); + if (l.length > 0) for (var h = 0; h < l.length; h++) e(l, h, "candlestick"); + var c = t.globals.dom.baseEl.querySelectorAll(".apexcharts-radar-series .apexcharts-series"); + if (c.length > 0) for (var d = 0; d < c.length; d++) e(c, d, "radar"); + var u = t.globals.dom.baseEl.querySelectorAll(".apexcharts-bubble-series .apexcharts-series"); + if (u.length > 0) + for (var f = 0; f < u.length; f++) { + for (var g = t.globals.dom.baseEl.querySelectorAll(".apexcharts-bubble-series .apexcharts-series[data\\:realIndex='".concat(f, "'] circle")), p = [], x = 0; x < g.length; x++) + p.push({ x: g[x].getAttribute("cx"), y: g[x].getAttribute("cy"), r: g[x].getAttribute("r") }); + t.globals.previousPaths.push(p); + } + var v = t.globals.dom.baseEl.querySelectorAll(".apexcharts-scatter-series .apexcharts-series"); + if (v.length > 0) + for (var m = 0; m < v.length; m++) { + for (var b = t.globals.dom.baseEl.querySelectorAll(".apexcharts-scatter-series .apexcharts-series[data\\:realIndex='".concat(m, "'] circle")), y = [], w = 0; w < b.length; w++) + y.push({ x: b[w].getAttribute("cx"), y: b[w].getAttribute("cy"), r: b[w].getAttribute("r") }); + t.globals.previousPaths.push(y); + } + var k = t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series"); + if (k.length > 0) + for (var S = 0; S < k.length; S++) { + for (var A = t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series[data\\:realIndex='".concat(S, "'] rect")), C = [], L = 0; L < A.length; L++) + C.push({ color: A[L].getAttribute("color") }); + t.globals.previousPaths.push(C); + } + t.globals.axisCharts || (t.globals.previousPaths = t.globals.series); + }, + }, + { + key: "handleNoData", + value: function () { + var t = this.w, + e = t.config.noData, + i = new m(this.ctx), + a = t.globals.svgWidth / 2, + s = t.globals.svgHeight / 2, + n = "middle"; + if ( + ((t.globals.noData = !0), + (t.globals.animationEnded = !0), + "left" === e.align ? ((a = 10), (n = "start")) : "right" === e.align && ((a = t.globals.svgWidth - 10), (n = "end")), + "top" === e.verticalAlign ? (s = 50) : "bottom" === e.verticalAlign && (s = t.globals.svgHeight - 50), + (a += e.offsetX), + (s = s + parseInt(e.style.fontSize) + 2), + void 0 !== e.text && "" !== e.text) + ) { + var r = i.drawText({ x: a, y: s, text: e.text, textAnchor: n, fontSize: e.style.fontSize, fontFamily: e.style.fontFamily, foreColor: e.style.color, opacity: 1, class: "apexcharts-text-nodata" }); + r.node.setAttribute("class", "apexcharts-title-text"), t.globals.dom.Paper.add(r); + } + }, + }, + { + key: "setNullSeriesToZeroValues", + value: function (t) { + for (var e = this.w, i = 0; i < t.length; i++) if (0 === t[i].length) for (var a = 0; a < t[e.globals.maxValsInArrayIndex].length; a++) t[i].push(0); + return t; + }, + }, + { + key: "hasAllSeriesEqualX", + value: function () { + for (var t = !0, e = this.w, i = this.filteredSeriesX(), a = 0; a < i.length - 1; a++) + if (i[a][0] !== i[a + 1][0]) { + t = !1; + break; + } + return (e.globals.allSeriesHasEqualX = t), t; + }, + }, + { + key: "filteredSeriesX", + value: function () { + var t = this.w.globals.seriesX.map(function (t, e) { + return t.length > 0 ? t : []; + }); + return t; + }, + }, + ]), + t + ); + })(), + j = (function () { + function t(e, i) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.onLegendClick = this.onLegendClick.bind(this)), (this.onLegendHovered = this.onLegendHovered.bind(this)); + } + return ( + o(t, [ + { + key: "init", + value: function () { + var t = this.w, + e = t.globals, + i = t.config; + if (((i.legend.showForSingleSeries && 1 === e.series.length) || e.series.length > 1 || !e.axisCharts) && i.legend.show) { + for (; e.dom.elLegendWrap.firstChild; ) e.dom.elLegendWrap.removeChild(e.dom.elLegendWrap.firstChild); + this.drawLegends(), + p.isIE11() ? document.getElementsByTagName("head")[0].appendChild(this.getLegendStyles()) : this.appendToForeignObject(), + "bottom" === i.legend.position || "top" === i.legend.position ? this.legendAlignHorizontal() : ("right" !== i.legend.position && "left" !== i.legend.position) || this.legendAlignVertical(); + } + }, + }, + { + key: "appendToForeignObject", + value: function () { + var t = this.w.globals; + t.dom.elLegendForeign = document.createElementNS(t.SVGNS, "foreignObject"); + var e = t.dom.elLegendForeign; + e.setAttribute("x", 0), + e.setAttribute("y", 0), + e.setAttribute("width", t.svgWidth), + e.setAttribute("height", t.svgHeight), + t.dom.elLegendWrap.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), + e.appendChild(t.dom.elLegendWrap), + e.appendChild(this.getLegendStyles()), + t.dom.Paper.node.insertBefore(e, t.dom.elGraphical.node); + }, + }, + { + key: "drawLegends", + value: function () { + var t = this.w, + e = t.config.legend.fontFamily, + i = t.globals.seriesNames, + a = t.globals.colors.slice(); + if ("heatmap" === t.config.chart.type) { + var s = t.config.plotOptions.heatmap.colorScale.ranges; + (i = s.map(function (t) { + return t.name ? t.name : t.from + " - " + t.to; + })), + (a = s.map(function (t) { + return t.color; + })); + } + for (var n = t.globals.legendFormatter, r = 0; r <= i.length - 1; r++) { + var o = n(i[r], { seriesIndex: r, w: t }), + l = !1, + h = !1; + if (t.globals.collapsedSeries.length > 0) for (var c = 0; c < t.globals.collapsedSeries.length; c++) t.globals.collapsedSeries[c].index === r && (l = !0); + if (t.globals.ancillaryCollapsedSeriesIndices.length > 0) for (var d = 0; d < t.globals.ancillaryCollapsedSeriesIndices.length; d++) t.globals.ancillaryCollapsedSeriesIndices[d] === r && (h = !0); + var u = document.createElement("span"); + u.classList.add("apexcharts-legend-marker"); + var f = t.config.legend.markers.offsetX, + g = t.config.legend.markers.offsetY, + p = t.config.legend.markers.height, + x = t.config.legend.markers.width, + v = t.config.legend.markers.strokeWidth, + b = t.config.legend.markers.strokeColor, + y = t.config.legend.markers.radius, + w = u.style; + (w.background = a[r]), + (w.color = a[r]), + (w.height = Array.isArray(p) ? parseFloat(p[r]) + "px" : parseFloat(p) + "px"), + (w.width = Array.isArray(x) ? parseFloat(x[r]) + "px" : parseFloat(x) + "px"), + (w.left = Array.isArray(f) ? f[r] : f), + (w.top = Array.isArray(g) ? g[r] : g), + (w.borderWidth = Array.isArray(v) ? v[r] : v), + (w.borderColor = Array.isArray(b) ? b[r] : b), + (w.borderRadius = Array.isArray(y) ? parseFloat(y[r]) + "px" : parseFloat(y) + "px"), + t.config.legend.markers.customHTML && + (Array.isArray(t.config.legend.markers.customHTML) ? (u.innerHTML = t.config.legend.markers.customHTML[r]()) : (u.innerHTML = t.config.legend.markers.customHTML())), + m.setAttrs(u, { rel: r + 1, "data:collapsed": l || h }), + (l || h) && u.classList.add("inactive-legend"); + var k = document.createElement("div"), + S = document.createElement("span"); + S.classList.add("apexcharts-legend-text"), (S.innerHTML = o); + var C = t.config.legend.labels.useSeriesColors ? t.globals.colors[r] : t.config.legend.labels.colors; + C || (C = t.config.chart.foreColor), + (S.style.color = C), + (S.style.fontSize = parseFloat(t.config.legend.fontSize) + "px"), + (S.style.fontFamily = e || t.config.chart.fontFamily), + m.setAttrs(S, { rel: r + 1, "data:collapsed": l || h }), + k.appendChild(u), + k.appendChild(S); + var L = new A(this.ctx); + if (!t.config.legend.showForZeroSeries) + 0 === L.getSeriesTotalByIndex(r) && + L.seriesHaveSameValues(r) && + !L.isSeriesNull(r) && + -1 === t.globals.collapsedSeriesIndices.indexOf(r) && + -1 === t.globals.ancillaryCollapsedSeriesIndices.indexOf(r) && + k.classList.add("apexcharts-hidden-zero-series"); + t.config.legend.showForNullSeries || + (L.isSeriesNull(r) && -1 === t.globals.collapsedSeriesIndices.indexOf(r) && -1 === t.globals.ancillaryCollapsedSeriesIndices.indexOf(r) && k.classList.add("apexcharts-hidden-null-series")), + t.globals.dom.elLegendWrap.appendChild(k), + t.globals.dom.elLegendWrap.classList.add(t.config.legend.horizontalAlign), + t.globals.dom.elLegendWrap.classList.add("position-" + t.config.legend.position), + k.classList.add("apexcharts-legend-series"), + (k.style.margin = "".concat(t.config.legend.itemMargin.horizontal, "px ").concat(t.config.legend.itemMargin.vertical, "px")), + (t.globals.dom.elLegendWrap.style.width = t.config.legend.width ? t.config.legend.width + "px" : ""), + (t.globals.dom.elLegendWrap.style.height = t.config.legend.height ? t.config.legend.height + "px" : ""), + m.setAttrs(k, { rel: r + 1, "data:collapsed": l || h }), + (l || h) && k.classList.add("inactive-legend"), + t.config.legend.onItemClick.toggleDataSeries || k.classList.add("no-click"); + } + "heatmap" !== t.config.chart.type && t.config.legend.onItemClick.toggleDataSeries && t.globals.dom.elWrap.addEventListener("click", this.onLegendClick, !0), + t.config.legend.onItemHover.highlightDataSeries && + (t.globals.dom.elWrap.addEventListener("mousemove", this.onLegendHovered, !0), t.globals.dom.elWrap.addEventListener("mouseout", this.onLegendHovered, !0)); + }, + }, + { + key: "getLegendBBox", + value: function () { + var t = this.w.globals.dom.baseEl.querySelector(".apexcharts-legend").getBoundingClientRect(), + e = t.width; + return { clwh: t.height, clww: e }; + }, + }, + { + key: "setLegendWrapXY", + value: function (t, e) { + var i = this.w, + a = i.globals.dom.baseEl.querySelector(".apexcharts-legend"), + s = a.getBoundingClientRect(), + n = 0, + r = 0; + if ("bottom" === i.config.legend.position) r += i.globals.svgHeight - s.height / 2; + else if ("top" === i.config.legend.position) { + var o = new V(this.ctx), + l = o.getTitleSubtitleCoords("title").height, + h = o.getTitleSubtitleCoords("subtitle").height; + r = r + (l > 0 ? l - 10 : 0) + (h > 0 ? h - 10 : 0); + } + (a.style.position = "absolute"), + (n = n + t + i.config.legend.offsetX), + (r = r + e + i.config.legend.offsetY), + (a.style.left = n + "px"), + (a.style.top = r + "px"), + "bottom" === i.config.legend.position + ? ((a.style.top = "auto"), (a.style.bottom = 10 + i.config.legend.offsetY + "px")) + : "right" === i.config.legend.position && ((a.style.left = "auto"), (a.style.right = 25 + i.config.legend.offsetX + "px")), + a.style.width && (a.style.width = parseInt(i.config.legend.width) + "px"), + a.style.height && (a.style.height = parseInt(i.config.legend.height) + "px"); + }, + }, + { + key: "legendAlignHorizontal", + value: function () { + var t = this.w; + t.globals.dom.baseEl.querySelector(".apexcharts-legend").style.right = 0; + var e = this.getLegendBBox(), + i = new V(this.ctx), + a = i.getTitleSubtitleCoords("title"), + s = i.getTitleSubtitleCoords("subtitle"), + n = 0; + "bottom" === t.config.legend.position ? (n = -e.clwh / 1.8) : "top" === t.config.legend.position && (n = a.height + s.height + t.config.title.margin + t.config.subtitle.margin - 15), + this.setLegendWrapXY(20, n); + }, + }, + { + key: "legendAlignVertical", + value: function () { + var t = this.w, + e = this.getLegendBBox(), + i = 0; + "left" === t.config.legend.position && (i = 20), "right" === t.config.legend.position && (i = t.globals.svgWidth - e.clww - 10), this.setLegendWrapXY(i, 20); + }, + }, + { + key: "onLegendHovered", + value: function (t) { + var e = this.w, + i = t.target.classList.contains("apexcharts-legend-text") || t.target.classList.contains("apexcharts-legend-marker"); + if ("heatmap" !== e.config.chart.type) !t.target.classList.contains("inactive-legend") && i && new G(this.ctx).toggleSeriesOnHover(t, t.target); + else if (i) { + var a = parseInt(t.target.getAttribute("rel")) - 1; + this.ctx.fireEvent("legendHover", [this.ctx, a, this.w]), new G(this.ctx).highlightRangeInSeries(t, t.target); + } + }, + }, + { + key: "onLegendClick", + value: function (t) { + if (t.target.classList.contains("apexcharts-legend-text") || t.target.classList.contains("apexcharts-legend-marker")) { + var e = parseInt(t.target.getAttribute("rel")) - 1, + i = "true" === t.target.getAttribute("data:collapsed"), + a = this.w.config.chart.events.legendClick; + "function" == typeof a && a(this.ctx, e, this.w), this.ctx.fireEvent("legendClick", [this.ctx, e, this.w]); + var s = this.w.config.legend.markers.onClick; + "function" == typeof s && t.target.classList.contains("apexcharts-legend-marker") && (s(this.ctx, e, this.w), this.ctx.fireEvent("legendMarkerClick", [this.ctx, e, this.w])), + this.toggleDataSeries(e, i); + } + }, + }, + { + key: "getLegendStyles", + value: function () { + var t = document.createElement("style"); + t.setAttribute("type", "text/css"); + var e = document.createTextNode( + "\n \n .apexcharts-legend {\n display: flex;\n overflow: auto;\n padding: 0 10px;\n }\n\n .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {\n flex-wrap: wrap\n }\n .apexcharts-legend.position-right, .apexcharts-legend.position-left {\n flex-direction: column;\n bottom: 0;\n }\n\n .apexcharts-legend.position-bottom.left, .apexcharts-legend.position-top.left, .apexcharts-legend.position-right, .apexcharts-legend.position-left {\n justify-content: flex-start;\n }\n\n .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {\n justify-content: center; \n }\n\n .apexcharts-legend.position-bottom.right, .apexcharts-legend.position-top.right {\n justify-content: flex-end;\n }\n\n .apexcharts-legend-series {\n cursor: pointer;\n line-height: normal;\n }\n\n .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top .apexcharts-legend-series{\n display: flex;\n align-items: center;\n }\n\n .apexcharts-legend-text {\n position: relative;\n font-size: 14px;\n }\n\n .apexcharts-legend-text *, .apexcharts-legend-marker * {\n pointer-events: none;\n }\n\n .apexcharts-legend-marker {\n position: relative;\n display: inline-block;\n cursor: pointer;\n margin-right: 3px;\n }\n \n .apexcharts-legend.right .apexcharts-legend-series, .apexcharts-legend.left .apexcharts-legend-series{\n display: inline-block;\n }\n\n .apexcharts-legend-series.no-click {\n cursor: auto;\n }\n\n .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {\n display: none !important;\n }\n\n .inactive-legend {\n opacity: 0.45;\n }" + ); + return t.appendChild(e), t; + }, + }, + { + key: "toggleDataSeries", + value: function (t, e) { + var i = this.w; + if (i.globals.axisCharts || "radialBar" === i.config.chart.type) { + i.globals.resized = !0; + var a = null, + s = null; + if ( + ((i.globals.risingSeries = []), + i.globals.axisCharts + ? ((a = i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(t, "']"))), (s = parseInt(a.getAttribute("data:realIndex")))) + : ((a = i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(t + 1, "']"))), (s = parseInt(a.getAttribute("rel")) - 1)), + e) + ) + this.riseCollapsedSeries(i.globals.collapsedSeries, i.globals.collapsedSeriesIndices, s), + this.riseCollapsedSeries(i.globals.ancillaryCollapsedSeries, i.globals.ancillaryCollapsedSeriesIndices, s); + else { + if (i.globals.axisCharts) { + var n = !1; + if ( + (i.config.yaxis[s] && + i.config.yaxis[s].show && + i.config.yaxis[s].showAlways && + ((n = !0), + i.globals.ancillaryCollapsedSeriesIndices.indexOf(s) < 0 && + (i.globals.ancillaryCollapsedSeries.push({ index: s, data: i.config.series[s].data.slice(), type: a.parentNode.className.baseVal.split("-")[1] }), + i.globals.ancillaryCollapsedSeriesIndices.push(s))), + !n) + ) { + i.globals.collapsedSeries.push({ index: s, data: i.config.series[s].data.slice(), type: a.parentNode.className.baseVal.split("-")[1] }), i.globals.collapsedSeriesIndices.push(s); + var r = i.globals.risingSeries.indexOf(s); + i.globals.risingSeries.splice(r, 1); + } + i.config.series[s].data = []; + } else i.globals.collapsedSeries.push({ index: s, data: i.config.series[s] }), i.globals.collapsedSeriesIndices.push(s), (i.config.series[s] = 0); + for (var o = a.childNodes, l = 0; l < o.length; l++) + o[l].classList.contains("apexcharts-series-markers-wrap") && (o[l].classList.contains("apexcharts-hide") ? o[l].classList.remove("apexcharts-hide") : o[l].classList.add("apexcharts-hide")); + (i.globals.allSeriesCollapsed = i.globals.collapsedSeries.length === i.globals.series.length), this.ctx._updateSeries(i.config.series, i.config.chart.animations.dynamicAnimation.enabled); + } + } else { + var h = i.globals.dom.Paper.select(" .apexcharts-series[rel='".concat(t + 1, "'] path")), + c = i.config.chart.type; + if ("pie" === c || "donut" === c) { + var d = i.config.plotOptions.pie.donut.labels, + u = new m(this.ctx), + f = new R(this.ctx); + u.pathMouseDown(h.members[0], null), f.printDataLabelsInner(h.members[0].node, d); + } + h.fire("click"); + } + }, + }, + { + key: "riseCollapsedSeries", + value: function (t, e, i) { + var a = this.w; + if (t.length > 0) + for (var s = 0; s < t.length; s++) + t[s].index === i && + (a.globals.axisCharts + ? ((a.config.series[i].data = t[s].data.slice()), t.splice(s, 1), e.splice(s, 1), a.globals.risingSeries.push(i)) + : ((a.config.series[i] = t[s].data), t.splice(s, 1), e.splice(s, 1), a.globals.risingSeries.push(i)), + this.ctx._updateSeries(a.config.series, a.config.chart.animations.dynamicAnimation.enabled)); + }, + }, + ]), + t + ); + })(), + U = (function () { + function t(e, i, a) { + n(this, t), + (this.ctx = e), + (this.w = e.w), + (this.xyRatios = i), + (this.pointsChart = !("bubble" !== this.w.config.chart.type && "scatter" !== this.w.config.chart.type) || a), + (this.scatter = new M(this.ctx)), + (this.noNegatives = this.w.globals.minX === Number.MAX_VALUE), + (this.yaxisIndex = 0); + } + return ( + o(t, [ + { + key: "draw", + value: function (t, e, i) { + var a = this.w, + s = new m(this.ctx), + n = new P(this.ctx), + r = a.globals.comboCharts ? e : a.config.chart.type, + o = s.group({ class: "apexcharts-".concat(r, "-series apexcharts-plot-series") }), + l = new A(this.ctx, a); + t = l.getLogSeries(t); + var c = this.xyRatios.yRatio; + c = l.getLogYRatios(c); + for (var d = this.xyRatios.zRatio, u = this.xyRatios.xRatio, f = this.xyRatios.baseLineY, g = [], x = [], v = 0, b = 0; b < t.length; b++) { + if ("line" === r && ("gradient" === a.config.fill.type || "gradient" === a.config.fill.type[b]) && l.seriesHaveSameValues(b)) { + var y = t[b].slice(); + (y[y.length - 1] = y[y.length - 1] + 1e-6), (t[b] = y); + } + var w = a.globals.gridWidth / a.globals.dataPoints, + k = a.globals.comboCharts ? i[b] : b; + c.length > 1 && (this.yaxisIndex = k), (this.isReversed = a.config.yaxis[this.yaxisIndex] && a.config.yaxis[this.yaxisIndex].reversed); + var S = [], + C = [], + L = a.globals.gridHeight - f[this.yaxisIndex] - (this.isReversed ? a.globals.gridHeight : 0) + (this.isReversed ? 2 * f[this.yaxisIndex] : 0), + E = L; + L > a.globals.gridHeight && (E = a.globals.gridHeight), (v = w / 2); + var M = a.globals.padHorizontal + v, + I = 1; + a.globals.isXNumeric && a.globals.seriesX.length > 0 && (M = (a.globals.seriesX[k][0] - a.globals.minX) / u), C.push(M); + var X = void 0, + F = void 0, + Y = void 0, + O = void 0, + R = [], + D = [], + N = s.group({ class: "apexcharts-series", seriesName: p.escapeString(a.globals.seriesNames[k]) }), + H = s.group({ class: "apexcharts-series-markers-wrap" }), + _ = s.group({ class: "apexcharts-datalabels" }); + this.ctx.series.addCollapsedClassToSeries(N, k); + var W = t[b].length === a.globals.dataPoints; + N.attr({ "data:longestSeries": W, rel: b + 1, "data:realIndex": k }), (this.appendPathFrom = !0); + var B = M, + V = void 0, + G = B, + j = L, + U = 0; + if (((j = this.determineFirstPrevY({ i: b, series: t, yRatio: c[this.yaxisIndex], zeroY: L, prevY: j, prevSeriesY: x, lineYPosition: U }).prevY), S.push(j), (V = j), null === t[b][0])) { + for (var q = 0; q < t[b].length; q++) + if (null !== t[b][q]) { + (G = w * q), (j = L - t[b][q] / c[this.yaxisIndex]), (X = s.move(G, j)), (F = s.move(G, E)); + break; + } + } else (X = s.move(G, j)), (F = s.move(G, E) + s.line(G, j)); + if (((Y = s.move(-1, L) + s.line(-1, L)), (O = s.move(-1, L) + s.line(-1, L)), a.globals.previousPaths.length > 0)) { + var Z = this.checkPreviousPaths({ pathFromLine: Y, pathFromArea: O, realIndex: k }); + (Y = Z.pathFromLine), (O = Z.pathFromArea); + } + for (var $ = a.globals.dataPoints > 1 ? a.globals.dataPoints - 1 : a.globals.dataPoints, J = 0; J < $; J++) { + if (a.globals.isXNumeric) { + var Q = a.globals.seriesX[k][J + 1]; + void 0 === a.globals.seriesX[k][J + 1] && (Q = a.globals.seriesX[k][$ - 1]), (M = (Q - a.globals.minX) / u); + } else M += w; + var K = p.isNumber(a.globals.minYArr[k]) ? a.globals.minYArr[k] : a.globals.minY; + a.config.chart.stacked + ? ((U = b > 0 && a.globals.collapsedSeries.length < a.config.series.length - 1 ? x[b - 1][J + 1] : L), + (I = + void 0 === t[b][J + 1] || null === t[b][J + 1] + ? U - K / c[this.yaxisIndex] + 2 * (this.isReversed ? K / c[this.yaxisIndex] : 0) + : U - t[b][J + 1] / c[this.yaxisIndex] + 2 * (this.isReversed ? t[b][J + 1] / c[this.yaxisIndex] : 0))) + : (I = + void 0 === t[b][J + 1] || null === t[b][J + 1] + ? L - K / c[this.yaxisIndex] + 2 * (this.isReversed ? K / c[this.yaxisIndex] : 0) + : L - t[b][J + 1] / c[this.yaxisIndex] + 2 * (this.isReversed ? t[b][J + 1] / c[this.yaxisIndex] : 0)), + C.push(M), + S.push(I); + var tt = this.createPaths({ series: t, i: b, j: J, x: M, y: I, xDivision: w, pX: B, pY: V, areaBottomY: E, linePath: X, areaPath: F, linePaths: R, areaPaths: D, seriesIndex: i }); + (D = tt.areaPaths), (R = tt.linePaths), (B = tt.pX), (V = tt.pY), (F = tt.areaPath), (X = tt.linePath), this.appendPathFrom && ((Y += s.line(M, L)), (O += s.line(M, L))); + var et = this.calculatePoints({ series: t, x: M, y: I, realIndex: k, i: b, j: J, prevY: j, categoryAxisCorrection: v, xRatio: u }); + if (this.pointsChart) this.scatter.draw(N, J, { realIndex: k, pointsPos: et, zRatio: d, elParent: H }); + else { + var it = new T(this.ctx); + a.globals.dataPoints > 1 && H.node.classList.add("hidden"); + var at = it.plotChartMarkers(et, k, J + 1); + null !== at && H.add(at); + } + var st = !t[b][J + 1] || t[b][J + 1] > t[b][J] ? "top" : "bottom", + nt = new z(this.ctx).drawDataLabel(et, k, J + 1, null, st); + null !== nt && _.add(nt); + } + x.push(S), (a.globals.seriesXvalues[k] = C), (a.globals.seriesYvalues[k] = S), this.pointsChart || a.globals.delayedElements.push({ el: H.node, index: k }); + var rt = { + i: b, + realIndex: k, + animationDelay: b, + initialSpeed: a.config.chart.animations.speed, + dataChangeSpeed: a.config.chart.animations.dynamicAnimation.speed, + className: "apexcharts-".concat(r), + id: "apexcharts-".concat(r), + }; + if ("area" === r) + for (var ot = n.fillPath({ seriesNumber: k }), lt = 0; lt < D.length; lt++) { + var ht = s.renderPaths(h({}, rt, { pathFrom: O, pathTo: D[lt], stroke: "none", strokeWidth: 0, strokeLineCap: null, fill: ot })); + N.add(ht); + } + if (a.config.stroke.show && !this.pointsChart) { + var ct = null; + ct = "line" === r ? n.fillPath({ seriesNumber: k, i: b }) : a.globals.stroke.colors[k]; + for (var dt = 0; dt < R.length; dt++) { + var ut = s.renderPaths( + h({}, rt, { + pathFrom: Y, + pathTo: R[dt], + stroke: ct, + strokeWidth: Array.isArray(a.config.stroke.width) ? a.config.stroke.width[k] : a.config.stroke.width, + strokeLineCap: a.config.stroke.lineCap, + fill: "none", + }) + ); + N.add(ut); + } + } + N.add(H), N.add(_), g.push(N); + } + for (var ft = g.length; ft > 0; ft--) o.add(g[ft - 1]); + return o; + }, + }, + { + key: "createPaths", + value: function (t) { + var e = t.series, + i = t.i, + a = t.j, + s = t.x, + n = t.y, + r = t.pX, + o = t.pY, + l = t.xDivision, + h = t.areaBottomY, + c = t.linePath, + d = t.areaPath, + u = t.linePaths, + f = t.areaPaths, + g = t.seriesIndex, + p = this.w, + x = new m(this.ctx), + v = p.config.stroke.curve; + if ((Array.isArray(p.config.stroke.curve) && (v = Array.isArray(g) ? p.config.stroke.curve[g[i]] : p.config.stroke.curve[i]), "smooth" === v)) { + var b = 0.35 * (s - r); + p.globals.hasNullValues + ? (null !== e[i][a] && + (null !== e[i][a + 1] + ? ((c = x.move(r, o) + x.curve(r + b, o, s - b, n, s + 1, n)), (d = x.move(r + 1, o) + x.curve(r + b, o, s - b, n, s + 1, n) + x.line(s, h) + x.line(r, h) + "z")) + : ((c = x.move(r, o)), (d = x.move(r, o) + "z"))), + u.push(c), + f.push(d)) + : ((c += x.curve(r + b, o, s - b, n, s, n)), (d += x.curve(r + b, o, s - b, n, s, n))), + (r = s), + (o = n), + a === e[i].length - 2 && ((d = d + x.curve(r, o, s, n, s, h) + x.move(s, n) + "z"), p.globals.hasNullValues || (u.push(c), f.push(d))); + } else + null === e[i][a + 1] && ((c += x.move(s, n)), (d = d + x.line(s - l, h) + x.move(s, n))), + null === e[i][a] && ((c += x.move(s, n)), (d += x.move(s, h))), + "stepline" === v ? ((c = c + x.line(s, null, "H") + x.line(null, n, "V")), (d = d + x.line(s, null, "H") + x.line(null, n, "V"))) : "straight" === v && ((c += x.line(s, n)), (d += x.line(s, n))), + a === e[i].length - 2 && ((d = d + x.line(s, h) + x.move(s, n) + "z"), u.push(c), f.push(d)); + return { linePaths: u, areaPaths: f, pX: r, pY: o, linePath: c, areaPath: d }; + }, + }, + { + key: "calculatePoints", + value: function (t) { + var e = t.series, + i = t.realIndex, + a = t.x, + s = t.y, + n = t.i, + r = t.j, + o = t.prevY, + l = t.categoryAxisCorrection, + h = t.xRatio, + c = this.w, + d = [], + u = []; + if (0 === r) { + var f = l + c.config.markers.offsetX; + c.globals.isXNumeric && (f = (c.globals.seriesX[i][0] - c.globals.minX) / h + c.config.markers.offsetX), + d.push(f), + u.push(p.isNumber(e[n][0]) ? o + c.config.markers.offsetY : null), + d.push(a + c.config.markers.offsetX), + u.push(p.isNumber(e[n][r + 1]) ? s + c.config.markers.offsetY : null); + } else d.push(a + c.config.markers.offsetX), u.push(p.isNumber(e[n][r + 1]) ? s + c.config.markers.offsetY : null); + return { x: d, y: u }; + }, + }, + { + key: "checkPreviousPaths", + value: function (t) { + for (var e = t.pathFromLine, i = t.pathFromArea, a = t.realIndex, s = this.w, n = 0; n < s.globals.previousPaths.length; n++) { + var r = s.globals.previousPaths[n]; + ("line" === r.type || "area" === r.type) && + r.paths.length > 0 && + parseInt(r.realIndex) === parseInt(a) && + ("line" === r.type + ? ((this.appendPathFrom = !1), (e = s.globals.previousPaths[n].paths[0].d)) + : "area" === r.type && ((this.appendPathFrom = !1), (i = s.globals.previousPaths[n].paths[0].d), s.config.stroke.show && (e = s.globals.previousPaths[n].paths[1].d))); + } + return { pathFromLine: e, pathFromArea: i }; + }, + }, + { + key: "determineFirstPrevY", + value: function (t) { + var e = t.i, + i = t.series, + a = t.yRatio, + s = t.zeroY, + n = t.prevY, + r = t.prevSeriesY, + o = t.lineYPosition, + l = this.w; + if (void 0 !== i[e][0]) n = l.config.chart.stacked ? (o = e > 0 ? r[e - 1][0] : s) - i[e][0] / a + 2 * (this.isReversed ? i[e][0] / a : 0) : s - i[e][0] / a + 2 * (this.isReversed ? i[e][0] / a : 0); + else if (l.config.chart.stacked && e > 0 && void 0 === i[e][0]) + for (var h = e - 1; h >= 0; h--) + if (null !== i[h][0] && void 0 !== i[h][0]) { + n = o = r[h][0]; + break; + } + return { prevY: n, lineYPosition: o }; + }, + }, + ]), + t + ); + })(), + q = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + var i = this.w; + (this.xaxisLabels = i.globals.labels.slice()), + i.globals.timelineLabels.length > 0 && (this.xaxisLabels = i.globals.timelineLabels.slice()), + (this.drawnLabels = []), + "top" === i.config.xaxis.position ? (this.offY = 0) : (this.offY = i.globals.gridHeight + 1), + (this.offY = this.offY + i.config.xaxis.axisBorder.offsetY), + (this.xaxisFontSize = i.config.xaxis.labels.style.fontSize), + (this.xaxisFontFamily = i.config.xaxis.labels.style.fontFamily), + (this.xaxisForeColors = i.config.xaxis.labels.style.colors), + (this.xaxisBorderWidth = i.config.xaxis.axisBorder.width), + this.xaxisBorderWidth.indexOf("%") > -1 ? (this.xaxisBorderWidth = (i.globals.gridWidth * parseInt(this.xaxisBorderWidth)) / 100) : (this.xaxisBorderWidth = parseInt(this.xaxisBorderWidth)), + (this.xaxisBorderHeight = i.config.xaxis.axisBorder.height), + (this.yaxis = i.config.yaxis[0]), + (this.axesUtils = new W(e)); + } + return ( + o(t, [ + { + key: "drawXaxis", + value: function () { + var t, + e = this.w, + i = new m(this.ctx), + a = i.group({ class: "apexcharts-xaxis", transform: "translate(".concat(e.config.xaxis.offsetX, ", ").concat(e.config.xaxis.offsetY, ")") }), + s = i.group({ class: "apexcharts-xaxis-texts-g", transform: "translate(".concat(e.globals.translateXAxisX, ", ").concat(e.globals.translateXAxisY, ")") }); + a.add(s); + for (var n = e.globals.padHorizontal, r = [], o = 0; o < this.xaxisLabels.length; o++) r.push(this.xaxisLabels[o]); + n = e.globals.isXNumeric ? n + (t = e.globals.gridWidth / (r.length - 1)) / 2 + e.config.xaxis.labels.offsetX : n + (t = e.globals.gridWidth / r.length) + e.config.xaxis.labels.offsetX; + var l = r.length; + if (e.config.xaxis.labels.show) + for (var h = 0; h <= l - 1; h++) { + var c = n - t / 2 + e.config.xaxis.labels.offsetX, + d = this.axesUtils.getLabel(r, e.globals.timelineLabels, c, h, this.drawnLabels); + this.drawnLabels.push(d.text); + var u = 28; + e.globals.rotateXLabels && (u = 22); + var f = i.drawText({ + x: d.x, + y: this.offY + e.config.xaxis.labels.offsetY + u, + text: "", + textAnchor: "middle", + fontSize: this.xaxisFontSize, + fontFamily: this.xaxisFontFamily, + foreColor: Array.isArray(this.xaxisForeColors) ? this.xaxisForeColors[h] : this.xaxisForeColors, + cssClass: "apexcharts-xaxis-label " + e.config.xaxis.labels.style.cssClass, + }); + h === l - 1 && e.globals.skipLastTimelinelabel && (d.text = ""), s.add(f), i.addTspan(f, d.text, this.xaxisFontFamily); + var g = document.createElementNS(e.globals.SVGNS, "title"); + (g.textContent = d.text), f.node.appendChild(g), (n += t); + } + if (void 0 !== e.config.xaxis.title.text) { + var p = i.group({ class: "apexcharts-xaxis-title" }), + x = i.drawText({ + x: e.globals.gridWidth / 2 + e.config.xaxis.title.offsetX, + y: this.offY - parseInt(this.xaxisFontSize) + e.globals.xAxisLabelsHeight + e.config.xaxis.title.offsetY, + text: e.config.xaxis.title.text, + textAnchor: "middle", + fontSize: e.config.xaxis.title.style.fontSize, + fontFamily: e.config.xaxis.title.style.fontFamily, + foreColor: e.config.xaxis.title.style.color, + cssClass: "apexcharts-xaxis-title-text " + e.config.xaxis.title.style.cssClass, + }); + p.add(x), a.add(p); + } + if (e.config.xaxis.axisBorder.show) { + var v = 0; + "bar" === e.config.chart.type && e.globals.isXNumeric && (v -= 15); + var b = i.drawLine(e.globals.padHorizontal + v + e.config.xaxis.axisBorder.offsetX, this.offY, this.xaxisBorderWidth, this.offY, e.config.xaxis.axisBorder.color, 0, this.xaxisBorderHeight); + a.add(b); + } + return a; + }, + }, + { + key: "drawXaxisInversed", + value: function (t) { + var e, + i, + a = this.w, + s = new m(this.ctx), + n = a.config.yaxis[0].opposite ? a.globals.translateYAxisX[t] : 0, + r = s.group({ class: "apexcharts-yaxis apexcharts-xaxis-inversed", rel: t }), + o = s.group({ class: "apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g", transform: "translate(" + n + ", 0)" }); + r.add(o); + for (var l = [], h = 0; h < this.xaxisLabels.length; h++) l.push(this.xaxisLabels[h]); + i = -(e = a.globals.gridHeight / l.length) / 2.2; + var c = a.globals.yLabelFormatters[0], + d = a.config.yaxis[0].labels; + if (d.show) + for (var u = 0; u <= l.length - 1; u++) { + var f = void 0 === l[u] ? "" : l[u]; + f = c(f); + var g = s.drawText({ + x: d.offsetX - 15, + y: i + e + d.offsetY, + text: f, + textAnchor: this.yaxis.opposite ? "start" : "end", + foreColor: d.style.color ? d.style.color : d.style.colors[u], + fontSize: d.style.fontSize, + fontFamily: d.style.fontFamily, + cssClass: "apexcharts-yaxis-label " + d.style.cssClass, + }); + if ((o.add(g), 0 !== a.config.yaxis[t].labels.rotate)) { + var p = s.rotateAroundCenter(g.node); + g.node.setAttribute("transform", "rotate(".concat(a.config.yaxis[t].labels.rotate, " ").concat(p.x, " ").concat(p.y, ")")); + } + i += e; + } + if (void 0 !== a.config.yaxis[0].title.text) { + var x = s.group({ class: "apexcharts-yaxis-title apexcharts-xaxis-title-inversed", transform: "translate(" + n + ", 0)" }), + v = s.drawText({ + x: 0, + y: a.globals.gridHeight / 2, + text: a.config.yaxis[0].title.text, + textAnchor: "middle", + foreColor: a.config.yaxis[0].title.style.color, + fontSize: a.config.yaxis[0].title.style.fontSize, + fontFamily: a.config.yaxis[0].title.style.fontFamily, + cssClass: "apexcharts-yaxis-title-text " + a.config.yaxis[0].title.style.cssClass, + }); + x.add(v), r.add(x); + } + if (a.config.xaxis.axisBorder.show) { + var b = s.drawLine(a.globals.padHorizontal + a.config.xaxis.axisBorder.offsetX, this.offY, this.xaxisBorderWidth, this.offY, this.yaxis.axisBorder.color, 0, this.xaxisBorderHeight); + r.add(b), this.axesUtils.drawYAxisTicks(0, l.length, a.config.yaxis[0].axisBorder, a.config.yaxis[0].axisTicks, 0, e, r); + } + return r; + }, + }, + { + key: "drawXaxisTicks", + value: function (t, e) { + var i = this.w, + a = t; + if (!(t < 0 || t > i.globals.gridWidth)) { + var s = this.offY + i.config.xaxis.axisTicks.offsetY, + n = s + i.config.xaxis.axisTicks.height; + if (i.config.xaxis.axisTicks.show) { + var r = new m(this.ctx).drawLine( + t + i.config.xaxis.axisTicks.offsetX, + s + i.config.xaxis.offsetY, + a + i.config.xaxis.axisTicks.offsetX, + n + i.config.xaxis.offsetY, + i.config.xaxis.axisTicks.color + ); + e.add(r), r.node.classList.add("apexcharts-xaxis-tick"); + } + } + }, + }, + { + key: "getXAxisTicksPositions", + value: function () { + var t = this.w, + e = [], + i = this.xaxisLabels.length, + a = t.globals.padHorizontal; + if (t.globals.timelineLabels.length > 0) for (var s = 0; s < i; s++) (a = this.xaxisLabels[s].position), e.push(a); + else + for (var n = i, r = 0; r < n; r++) { + var o = n; + t.globals.isXNumeric && "bar" !== t.config.chart.type && (o -= 1), (a += t.globals.gridWidth / o), e.push(a); + } + return e; + }, + }, + { + key: "xAxisLabelCorrections", + value: function () { + var t = this.w, + e = new m(this.ctx), + i = t.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g"), + a = t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-texts-g text"), + s = t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-inversed text"), + n = t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-inversed-texts-g text"); + if (t.globals.rotateXLabels || t.config.xaxis.labels.rotateAlways) + for (var r = 0; r < a.length; r++) { + var o = e.rotateAroundCenter(a[r]); + (o.y = o.y - 1), (o.x = o.x + 1), a[r].setAttribute("transform", "rotate(".concat(t.config.xaxis.labels.rotate, " ").concat(o.x, " ").concat(o.y, ")")), a[r].setAttribute("text-anchor", "end"); + i.setAttribute("transform", "translate(0, ".concat(-10, ")")); + var l = a[r].childNodes; + t.config.xaxis.labels.trim && e.placeTextWithEllipsis(l[0], l[0].textContent, t.config.xaxis.labels.maxHeight - 40); + } + else + for (var h = t.globals.gridWidth / t.globals.labels.length, c = 0; c < a.length; c++) { + var d = a[c].childNodes; + t.config.xaxis.labels.trim && "datetime" !== t.config.xaxis.type && e.placeTextWithEllipsis(d[0], d[0].textContent, h); + } + if (s.length > 0) { + var u = s[s.length - 1].getBBox(), + f = s[0].getBBox(); + u.x < -20 && s[s.length - 1].parentNode.removeChild(s[s.length - 1]), f.x + f.width > t.globals.gridWidth && s[0].parentNode.removeChild(s[0]); + for (var g = 0; g < n.length; g++) e.placeTextWithEllipsis(n[g], n[g].textContent, t.config.yaxis[0].labels.maxWidth - 2 * parseInt(t.config.yaxis[0].title.style.fontSize) - 20); + } + }, + }, + ]), + t + ); + })(), + Z = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "niceScale", + value: function (t, e, i) { + var a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0, + s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 10, + n = this.w, + r = (void 0 === this.w.config.yaxis[a].max && void 0 === this.w.config.yaxis[a].min) || this.w.config.yaxis[a].forceNiceScale; + if ((t === Number.MIN_VALUE && 0 === e) || (!p.isNumber(t) && !p.isNumber(e)) || (t === Number.MIN_VALUE && e === -Number.MAX_VALUE)) return (t = 0), (e = s), this.linearScale(t, e, s); + t > e ? (console.warn("yaxis.min cannot be greater than yaxis.max"), (e = t + 0.1)) : t === e && ((t = 0 === t ? 0 : t - 0.5), (e = 0 === e ? 2 : e + 0.5)); + var o = [], + l = Math.abs(e - t); + l < 1 && r && ("candlestick" === n.config.chart.type || "candlestick" === n.config.series[a].type || n.globals.isRangeData) && (e *= 1.01); + var h = s + 1; + h < 2 ? (h = 2) : h > 2 && (h -= 2); + for (var c = l / h, d = Math.floor(p.log10(c)), u = Math.pow(10, d), f = parseInt(c / u) * u, g = f * Math.floor(t / f), x = f * Math.ceil(e / f), v = g; o.push(v), !((v += f) > x); ); + if (r && i > 10) return { result: o, niceMin: o[0], niceMax: o[o.length - 1] }; + var m = t; + (o = []).push(m); + for (var b = Math.abs(e - t) / s, y = 0; y <= s; y++) (m += b), o.push(m); + return o[o.length - 2] >= e && o.pop(), { result: o, niceMin: o[0], niceMax: o[o.length - 1] }; + }, + }, + { + key: "linearScale", + value: function (t, e) { + var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 10, + a = Math.abs(e - t) / i; + i === Number.MAX_VALUE && ((i = 10), (a = 1)); + for (var s = [], n = t; i >= 0; ) s.push(n), (n += a), (i -= 1); + return { result: s, niceMin: s[0], niceMax: s[s.length - 1] }; + }, + }, + { + key: "logarithmicScale", + value: function (t, e, i, a) { + (e < 0 || e === Number.MIN_VALUE) && (e = 0.01); + for (var s = Math.log(e) / Math.log(10), n = Math.log(i) / Math.log(10), r = Math.abs(i - e) / a, o = [], l = e; a >= 0; ) o.push(l), (l += r), (a -= 1); + var h = o.map(function (t, a) { + t <= 0 && (t = 0.01); + var r = (n - s) / (i - e), + o = Math.pow(10, s + r * (t - s)); + return Math.round(o / p.roundToBase(o, 10)) * p.roundToBase(o, 10); + }); + return 0 === h[0] && (h[0] = 1), { result: h, niceMin: h[0], niceMax: h[h.length - 1] }; + }, + }, + { + key: "setYScaleForIndex", + value: function (t, e, i) { + var a = this.w.globals, + s = this.w.config, + n = a.isBarHorizontal ? s.xaxis : s.yaxis[t]; + if ((void 0 === a.yAxisScale[t] && (a.yAxisScale[t] = []), n.logarithmic)) + (a.allSeriesCollapsed = !1), (a.yAxisScale[t] = this.logarithmicScale(t, e, i, n.tickAmount ? n.tickAmount : Math.floor(Math.log10(i)))); + else if (i !== -Number.MAX_VALUE && p.isNumber(i)) + if (((a.allSeriesCollapsed = !1), (void 0 === n.min && void 0 === n.max) || n.forceNiceScale)) { + var r = Math.abs(i - e); + a.yAxisScale[t] = this.niceScale(e, i, r, t, n.tickAmount ? n.tickAmount : r < 5 && r > 1 ? r + 1 : 5); + } else a.yAxisScale[t] = this.linearScale(e, i, n.tickAmount); + else a.yAxisScale[t] = this.linearScale(0, 5, 5); + }, + }, + { + key: "setMultipleYScales", + value: function () { + var t = this, + e = this.w.globals, + i = this.w.config, + a = e.minYArr.concat([]), + s = e.maxYArr.concat([]), + n = []; + i.yaxis.forEach(function (r, o) { + var l = o; + i.series.forEach(function (t, i) { + t.name === r.seriesName && -1 === e.collapsedSeriesIndices.indexOf(i) && ((l = i), o !== i ? n.push({ index: i, similarIndex: o, alreadyExists: !0 }) : n.push({ index: i })); + }); + var h = a[l], + c = s[l]; + t.setYScaleForIndex(o, h, c); + }), + this.sameScaleInMultipleAxes(a, s, n); + }, + }, + { + key: "sameScaleInMultipleAxes", + value: function (t, e, i) { + var a = this, + s = this.w.config, + n = this.w.globals, + r = []; + i.forEach(function (t) { + t.alreadyExists && (void 0 === r[t.index] && (r[t.index] = []), r[t.index].push(t.index), r[t.index].push(t.similarIndex)); + }), + r.forEach(function (t, e) { + r.forEach(function (i, a) { + var s, n; + e !== a && + ((s = t), + (n = i), + s.filter(function (t) { + return -1 !== n.indexOf(t); + })).length > 0 && + (r[e] = r[e].concat(r[a])); + }); + }); + var o = r + .map(function (t) { + return t.filter(function (e, i) { + return t.indexOf(e) === i; + }); + }) + .map(function (t) { + return t.sort(); + }); + r = r.filter(function (t) { + return !!t; + }); + var l = o.slice(), + h = l.map(function (t) { + return JSON.stringify(t); + }); + l = l.filter(function (t, e) { + return h.indexOf(JSON.stringify(t)) === e; + }); + var c = [], + d = []; + t.forEach(function (t, i) { + l.forEach(function (a, s) { + a.indexOf(i) > -1 && (void 0 === c[s] && ((c[s] = []), (d[s] = [])), c[s].push({ key: i, value: t }), d[s].push({ key: i, value: e[i] })); + }); + }); + var u = Array.apply(null, Array(l.length)).map(Number.prototype.valueOf, Number.MIN_VALUE), + f = Array.apply(null, Array(l.length)).map(Number.prototype.valueOf, -Number.MAX_VALUE); + c.forEach(function (t, e) { + t.forEach(function (t, i) { + u[e] = Math.min(t.value, u[e]); + }); + }), + d.forEach(function (t, e) { + t.forEach(function (t, i) { + f[e] = Math.max(t.value, f[e]); + }); + }), + t.forEach(function (t, e) { + d.forEach(function (t, i) { + var r = u[i], + o = f[i]; + s.chart.stacked && + ((o = 0), + t.forEach(function (t, e) { + (o += t.value), r !== Number.MIN_VALUE && (r += c[i][e].value); + })), + t.forEach(function (i, l) { + t[l].key === e && + (void 0 !== s.yaxis[e].min && (r = "function" == typeof s.yaxis[e].min ? s.yaxis[e].min(n.minY) : s.yaxis[e].min), + void 0 !== s.yaxis[e].max && (o = "function" == typeof s.yaxis[e].max ? s.yaxis[e].max(n.maxY) : s.yaxis[e].max), + a.setYScaleForIndex(e, r, o)); + }); + }); + }); + }, + }, + { + key: "autoScaleY", + value: function (t, e, i) { + t || (t = this); + var a = t.w, + s = a.globals.seriesX[0], + n = a.config.chart.stacked; + return ( + e.forEach(function (t, r) { + for (var o = 0, l = 0; l < s.length; l++) + if (s[l] >= i.xaxis.min) { + o = l; + break; + } + var h, + c, + d = a.globals.minYArr[r], + u = a.globals.maxYArr[r], + f = a.globals.stackedSeriesTotals; + a.globals.series.forEach(function (r, l) { + var g = r[o]; + n + ? ((g = f[o]), + (h = c = g), + f.forEach(function (t, e) { + s[e] <= i.xaxis.max && s[e] >= i.xaxis.min && (t > c && null !== t && (c = t), r[e] < h && null !== r[e] && (h = r[e])); + })) + : ((h = c = g), + r.forEach(function (t, e) { + if (s[e] <= i.xaxis.max && s[e] >= i.xaxis.min) { + var n = t, + r = t; + a.globals.series.forEach(function (i, a) { + null !== t && ((n = Math.min(i[e], n)), (r = Math.max(i[e], r))); + }), + r > c && null !== r && (c = r), + n < h && null !== n && (h = n); + } + })), + void 0 === h && void 0 === c && ((h = d), (c = u)), + (c *= c < 0 ? 0.9 : 1.1) < 0 && c < u && (c = u), + (h *= h < 0 ? 1.1 : 0.9) < 0 && h > d && (h = d), + e.length > 1 + ? ((e[l].min = void 0 === t.min ? h : t.min), (e[l].max = void 0 === t.max ? c : t.max)) + : ((e[0].min = void 0 === t.min ? h : t.min), (e[0].max = void 0 === t.max ? c : t.max)); + }); + }), + e + ); + }, + }, + ]), + t + ); + })(), + $ = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.scales = new Z(e)); + } + return ( + o(t, [ + { + key: "init", + value: function () { + this.setYRange(), this.setXRange(), this.setZRange(); + }, + }, + { + key: "getMinYMaxY", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : Number.MAX_VALUE, + i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : -Number.MAX_VALUE, + a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : null, + s = this.w.globals, + n = -Number.MAX_VALUE, + r = Number.MIN_VALUE; + null === a && (a = t + 1); + var o = s.series, + l = o, + h = o; + "candlestick" === this.w.config.chart.type ? ((l = s.seriesCandleL), (h = s.seriesCandleH)) : s.isRangeData && ((l = s.seriesRangeStart), (h = s.seriesRangeEnd)); + for (var c = t; c < a; c++) { + s.dataPoints = Math.max(s.dataPoints, o[c].length); + for (var d = 0; d < s.series[c].length; d++) { + var u = o[c][d]; + null !== u && p.isNumber(u) + ? ((n = Math.max(n, h[c][d])), + (e = Math.min(e, l[c][d])), + (i = Math.max(i, l[c][d])), + "candlestick" === this.w.config.chart.type && + ((n = Math.max(n, s.seriesCandleO[c][d])), (n = Math.max(n, s.seriesCandleH[c][d])), (n = Math.max(n, s.seriesCandleL[c][d])), (i = n = Math.max(n, s.seriesCandleC[c][d]))), + p.isFloat(u) && ((u = p.noExponents(u)), (s.yValueDecimal = Math.max(s.yValueDecimal, u.toString().split(".")[1].length))), + r > l[c][d] && l[c][d] < 0 && (r = l[c][d])) + : (s.hasNullValues = !0); + } + } + return { minY: r, maxY: n, lowestY: e, highestY: i }; + }, + }, + { + key: "setYRange", + value: function () { + var t = this.w.globals, + e = this.w.config; + (t.maxY = -Number.MAX_VALUE), (t.minY = Number.MIN_VALUE); + var i = Number.MAX_VALUE; + if (t.isMultipleYAxis) + for (var a = 0; a < t.series.length; a++) { + var s = this.getMinYMaxY(a, i, null, a + 1); + t.minYArr.push(s.minY), t.maxYArr.push(s.maxY), (i = s.lowestY); + } + var n = this.getMinYMaxY(0, i, null, t.series.length); + if (((t.minY = n.minY), (t.maxY = n.maxY), (i = n.lowestY), e.chart.stacked)) { + for (var r = [], o = [], l = 0; l < t.series[t.maxValsInArrayIndex].length; l++) + for (var h = 0, c = 0, d = 0; d < t.series.length; d++) + null !== t.series[d][l] && p.isNumber(t.series[d][l]) && (t.series[d][l] > 0 ? (h = h + parseFloat(t.series[d][l]) + 1e-4) : (c += parseFloat(t.series[d][l]))), + d === t.series.length - 1 && (r.push(h), o.push(c)); + for (var u = 0; u < r.length; u++) (t.maxY = Math.max(t.maxY, r[u])), (t.minY = Math.min(t.minY, o[u])); + } + if (("line" === e.chart.type || "area" === e.chart.type || "candlestick" === e.chart.type) && t.minY === Number.MIN_VALUE && i !== -Number.MAX_VALUE && i !== t.maxY) { + var f = t.maxY - i; + i >= 0 && i <= 10 && (f = 0), (t.minY = i - (5 * f) / 100), (t.maxY = t.maxY + (5 * f) / 100); + } + return ( + e.yaxis.map(function (e, i) { + void 0 !== e.max && ("number" == typeof e.max ? (t.maxYArr[i] = e.max) : "function" == typeof e.max && (t.maxYArr[i] = e.max(t.maxY)), (t.maxY = t.maxYArr[i])), + void 0 !== e.min && ("number" == typeof e.min ? (t.minYArr[i] = e.min) : "function" == typeof e.min && (t.minYArr[i] = e.min(t.minY)), (t.minY = t.minYArr[i])); + }), + t.isBarHorizontal && (void 0 !== e.xaxis.min && "number" == typeof e.xaxis.min && (t.minY = e.xaxis.min), void 0 !== e.xaxis.max && "number" == typeof e.xaxis.max && (t.maxY = e.xaxis.max)), + t.isMultipleYAxis + ? (this.scales.setMultipleYScales(), + (t.minY = i), + t.yAxisScale.forEach(function (e, i) { + (t.minYArr[i] = e.niceMin), (t.maxYArr[i] = e.niceMax); + })) + : (this.scales.setYScaleForIndex(0, t.minY, t.maxY), + (t.minY = t.yAxisScale[0].niceMin), + (t.maxY = t.yAxisScale[0].niceMax), + (t.minYArr[0] = t.yAxisScale[0].niceMin), + (t.maxYArr[0] = t.yAxisScale[0].niceMax)), + { minY: t.minY, maxY: t.maxY, minYArr: t.minYArr, maxYArr: t.maxYArr } + ); + }, + }, + { + key: "setXRange", + value: function () { + var t, + e = this.w.globals, + i = this.w.config, + a = "numeric" === i.xaxis.type || "datetime" === i.xaxis.type || ("category" === i.xaxis.type && !e.noLabelsProvided) || e.noLabelsProvided || e.isXNumeric; + if (e.isXNumeric) + for (var s = 0; s < e.series.length; s++) + if (e.labels[s]) + for (var n = 0; n < e.labels[s].length; n++) + null !== e.labels[s][n] && + p.isNumber(e.labels[s][n]) && + ((e.maxX = Math.max(e.maxX, e.labels[s][n])), + (e.initialmaxX = Math.max(e.maxX, e.labels[s][n])), + (e.minX = Math.min(e.minX, e.labels[s][n])), + (e.initialminX = Math.min(e.minX, e.labels[s][n]))); + if ( + (e.noLabelsProvided && 0 === i.xaxis.categories.length && ((e.maxX = e.labels[e.labels.length - 1]), (e.initialmaxX = e.labels[e.labels.length - 1]), (e.minX = 1), (e.initialminX = 1)), + (e.comboChartsHasBars || "candlestick" === i.chart.type || ("bar" === i.chart.type && e.isXNumeric)) && ("category" !== i.xaxis.type || e.isXNumeric)) + ) { + var r = (e.svgWidth / e.dataPoints) * (Math.abs(e.maxX - e.minX) / e.svgWidth), + o = e.minX - r / 2; + (e.minX = o), (e.initialminX = o); + var l = e.maxX + r / ((e.series.length + 1) / e.series.length); + (e.maxX = l), (e.initialmaxX = l); + } + (!e.isXNumeric && !e.noLabelsProvided) || + (i.xaxis.convertedCatToNumeric && !e.dataFormatXNumeric) || + (void 0 === i.xaxis.tickAmount + ? ((t = Math.round(e.svgWidth / 150)), "numeric" === i.xaxis.type && e.dataPoints < 20 && (t = e.dataPoints - 1), t > e.dataPoints && 0 !== e.dataPoints && (t = e.dataPoints - 1)) + : (t = "dataPoints" === i.xaxis.tickAmount ? e.series[e.maxValsInArrayIndex].length - 1 : i.xaxis.tickAmount), + void 0 !== i.xaxis.max && "number" == typeof i.xaxis.max && (e.maxX = i.xaxis.max), + void 0 !== i.xaxis.min && "number" == typeof i.xaxis.min && (e.minX = i.xaxis.min), + void 0 !== i.xaxis.range && (e.minX = e.maxX - i.xaxis.range), + e.minX !== Number.MAX_VALUE && e.maxX !== -Number.MAX_VALUE + ? (e.xAxisScale = this.scales.linearScale(e.minX, e.maxX, t)) + : ((e.xAxisScale = this.scales.linearScale(1, t, t)), + e.noLabelsProvided && e.labels.length > 0 && ((e.xAxisScale = this.scales.linearScale(1, e.labels.length, t - 1)), (e.seriesX = e.labels.slice()))), + a && (e.labels = e.xAxisScale.result.slice())); + if (e.minX === e.maxX) + if ("datetime" === i.xaxis.type) { + var h = new Date(e.minX); + h.setDate(h.getDate() - 2), (e.minX = new Date(h).getTime()); + var c = new Date(e.maxX); + c.setDate(c.getDate() + 2), (e.maxX = new Date(c).getTime()); + } else ("numeric" === i.xaxis.type || ("category" === i.xaxis.type && !e.noLabelsProvided)) && ((e.minX = e.minX - 2), (e.maxX = e.maxX + 2)); + return ( + e.isXNumeric && + (e.seriesX.forEach(function (t, i) { + t.forEach(function (t, a) { + if (a > 0) { + var s = t - e.seriesX[i][a - 1]; + e.minXDiff = Math.min(s, e.minXDiff); + } + }); + }), + this.calcMinXDiffForTinySeries()), + { minX: e.minX, maxX: e.maxX } + ); + }, + }, + { + key: "calcMinXDiffForTinySeries", + value: function () { + var t = this.w, + e = t.globals.labels.length; + return ( + 1 === t.globals.labels.length + ? (t.globals.minXDiff = (t.globals.maxX - t.globals.minX) / e / 3) + : t.globals.minXDiff === Number.MAX_VALUE && + (t.globals.timelineLabels.length > 0 && (e = t.globals.timelineLabels.length), e < 3 && (e = 3), (t.globals.minXDiff = (t.globals.maxX - t.globals.minX) / e)), + t.globals.minXDiff + ); + }, + }, + { + key: "setZRange", + value: function () { + var t = this.w.globals; + if (t.isDataXYZ) + for (var e = 0; e < t.series.length; e++) + if (void 0 !== t.seriesZ[e]) + for (var i = 0; i < t.seriesZ[e].length; i++) + null !== t.seriesZ[e][i] && p.isNumber(t.seriesZ[e][i]) && ((t.maxZ = Math.max(t.maxZ, t.seriesZ[e][i])), (t.minZ = Math.min(t.minZ, t.seriesZ[e][i]))); + }, + }, + ]), + t + ); + })(), + J = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.timeScaleArray = []); + } + return ( + o(t, [ + { + key: "calculateTimeScaleTicks", + value: function (t, e) { + var i = this, + a = this.w; + if (a.globals.allSeriesCollapsed) return (a.globals.labels = []), (a.globals.timelineLabels = []), []; + var s = new k(this.ctx), + n = (e - t) / 864e5; + this.determineInterval(n), (a.globals.disableZoomIn = !1), (a.globals.disableZoomOut = !1), n < 0.005 ? (a.globals.disableZoomIn = !0) : n > 5e4 && (a.globals.disableZoomOut = !0); + var r = s.getTimeUnitsfromTimestamp(t, e), + o = a.globals.gridWidth / n, + l = o / 24, + c = l / 60, + d = Math.floor(24 * n), + u = Math.floor(24 * n * 60), + f = Math.floor(n), + g = Math.floor(n / 30), + p = Math.floor(n / 365), + x = { minMinute: r.minMinute, minHour: r.minHour, minDate: r.minDate, minMonth: r.minMonth, minYear: r.minYear }, + v = { + firstVal: x, + currentMinute: x.minMinute, + currentHour: x.minHour, + currentMonthDate: x.minDate, + currentDate: x.minDate, + currentMonth: x.minMonth, + currentYear: x.minYear, + daysWidthOnXAxis: o, + hoursWidthOnXAxis: l, + minutesWidthOnXAxis: c, + numberOfMinutes: u, + numberOfHours: d, + numberOfDays: f, + numberOfMonths: g, + numberOfYears: p, + }; + switch (this.tickInterval) { + case "years": + this.generateYearScale(v); + break; + case "months": + case "half_year": + this.generateMonthScale(v); + break; + case "months_days": + case "months_fortnight": + case "days": + case "week_days": + this.generateDayScale(v); + break; + case "hours": + this.generateHourScale(v); + break; + case "minutes": + this.generateMinuteScale(v); + } + var m = this.timeScaleArray.map(function (t) { + var e = { position: t.position, unit: t.unit, year: t.year, day: t.day ? t.day : 1, hour: t.hour ? t.hour : 0, month: t.month + 1 }; + return "month" === t.unit + ? h({}, e, { value: t.value + 1 }) + : "day" === t.unit || "hour" === t.unit + ? h({}, e, { value: t.value }) + : "minute" === t.unit + ? h({}, e, { value: t.value, minute: t.value }) + : t; + }); + return m.filter(function (t) { + var e = 1, + s = Math.ceil(a.globals.gridWidth / 120), + n = t.value; + void 0 !== a.config.xaxis.tickAmount && (s = a.config.xaxis.tickAmount), m.length > s && (e = Math.floor(m.length / s)); + var r = !1, + o = !1; + switch (i.tickInterval) { + case "half_year": + (e = 7), "year" === t.unit && (r = !0); + break; + case "months": + (e = 1), "year" === t.unit && (r = !0); + break; + case "months_fortnight": + (e = 15), ("year" !== t.unit && "month" !== t.unit) || (r = !0), 30 === n && (o = !0); + break; + case "months_days": + (e = 10), "month" === t.unit && (r = !0), 30 === n && (o = !0); + break; + case "week_days": + (e = 8), "month" === t.unit && (r = !0); + break; + case "days": + (e = 1), "month" === t.unit && (r = !0); + break; + case "hours": + "day" === t.unit && (r = !0); + break; + case "minutes": + n % 5 != 0 && (o = !0); + } + if ("minutes" === i.tickInterval || "hours" === i.tickInterval) { + if (!o) return !0; + } else if ((n % e == 0 || r) && !o) return !0; + }); + }, + }, + { + key: "recalcDimensionsBasedOnFormat", + value: function (t, e) { + var i = this.w, + a = this.formatDates(t), + s = this.removeOverlappingTS(a); + e ? (i.globals.invertedTimelineLabels = s.slice()) : (i.globals.timelineLabels = s.slice()), new V(this.ctx).plotCoords(); + }, + }, + { + key: "determineInterval", + value: function (t) { + switch (!0) { + case t > 1825: + this.tickInterval = "years"; + break; + case t > 800 && t <= 1825: + this.tickInterval = "half_year"; + break; + case t > 180 && t <= 800: + this.tickInterval = "months"; + break; + case t > 90 && t <= 180: + this.tickInterval = "months_fortnight"; + break; + case t > 60 && t <= 90: + this.tickInterval = "months_days"; + break; + case t > 30 && t <= 60: + this.tickInterval = "week_days"; + break; + case t > 2 && t <= 30: + this.tickInterval = "days"; + break; + case t > 0.1 && t <= 2: + this.tickInterval = "hours"; + break; + case t < 0.1: + this.tickInterval = "minutes"; + break; + default: + this.tickInterval = "days"; + } + }, + }, + { + key: "generateYearScale", + value: function (t) { + var e = t.firstVal, + i = t.currentMonth, + a = t.currentYear, + s = t.daysWidthOnXAxis, + n = t.numberOfYears, + r = e.minYear, + o = 0, + l = new k(this.ctx); + if (e.minDate > 1 && e.minMonth > 0) { + var h = l.determineRemainingDaysOfYear(e.minYear, e.minMonth, e.minDate); + (o = (l.determineDaysOfYear(e.minYear) - h + 1) * s), (r = e.minYear + 1), this.timeScaleArray.push({ position: o, value: r, unit: "year", year: r, month: p.monthMod(i + 1) }); + } else 1 === e.minDate && 0 === e.minMonth && this.timeScaleArray.push({ position: o, value: r, unit: "year", year: a, month: p.monthMod(i + 1) }); + for (var c = r, d = o, u = 0; u < n; u++) c++, (d = l.determineDaysOfYear(c - 1) * s + d), this.timeScaleArray.push({ position: d, value: c, unit: "year", year: c, month: 1 }); + }, + }, + { + key: "generateMonthScale", + value: function (t) { + var e = t.firstVal, + i = t.currentMonthDate, + a = t.currentMonth, + s = t.currentYear, + n = t.daysWidthOnXAxis, + r = t.numberOfMonths, + o = a, + l = 0, + h = new k(this.ctx), + c = "month", + d = 0; + if (e.minDate > 1) { + (l = (h.determineDaysOfMonths(a + 1, e.minYear) - i + 1) * n), (o = p.monthMod(a + 1)); + var u = s + d, + f = p.monthMod(o), + g = o; + 0 === o && ((c = "year"), (g = u), (f = 1), (u += d += 1)), this.timeScaleArray.push({ position: l, value: g, unit: c, year: u, month: f }); + } else this.timeScaleArray.push({ position: l, value: o, unit: c, year: s, month: p.monthMod(a) }); + for (var x = o + 1, v = l, m = 0, b = 1; m < r; m++, b++) { + 0 === (x = p.monthMod(x)) ? ((c = "year"), (d += 1)) : (c = "month"); + var y = s + Math.floor(x / 12) + d; + v = h.determineDaysOfMonths(x, y) * n + v; + var w = 0 === x ? y : x; + this.timeScaleArray.push({ position: v, value: w, unit: c, year: y, month: 0 === x ? 1 : x }), x++; + } + }, + }, + { + key: "generateDayScale", + value: function (t) { + var e = t.firstVal, + i = t.currentMonth, + a = t.currentYear, + s = t.hoursWidthOnXAxis, + n = t.numberOfDays, + r = new k(this.ctx), + o = "day", + l = (24 - e.minHour) * s, + h = e.minDate + 1, + c = h, + d = function (t, e, i) { + return t > r.determineDaysOfMonths(e + 1, i) ? ((u = 1), (o = "month"), (c = e += 1), e) : e; + }, + u = h, + f = d(u, i, a); + this.timeScaleArray.push({ position: l, value: c, unit: o, year: a, month: p.monthMod(f), day: u }); + for (var g = l, x = 0; x < n; x++) { + (o = "day"), (f = d((u += 1), f, a + Math.floor(f / 12) + 0)); + var v = a + Math.floor(f / 12) + 0; + g = 24 * s + g; + var m = 1 === u ? p.monthMod(f) : u; + this.timeScaleArray.push({ position: g, value: m, unit: o, year: v, month: p.monthMod(f), day: m }); + } + }, + }, + { + key: "generateHourScale", + value: function (t) { + var e = t.firstVal, + i = t.currentDate, + a = t.currentMonth, + s = t.currentYear, + n = t.minutesWidthOnXAxis, + r = t.numberOfHours, + o = new k(this.ctx), + l = "hour", + h = function (t, e) { + return t > o.determineDaysOfMonths(e + 1, s) && ((x = 1), (e += 1)), { month: e, date: x }; + }, + c = function (t, e) { + return t > o.determineDaysOfMonths(e + 1, s) ? (e += 1) : e; + }, + d = 60 - e.minMinute, + u = d * n, + f = e.minHour + 1, + g = f + 1; + 60 === d && ((u = 0), (g = (f = e.minHour) + 1)); + var x = i, + v = c(x, a); + this.timeScaleArray.push({ position: u, value: f, unit: l, day: x, hour: g, year: s, month: p.monthMod(v) }); + for (var m = u, b = 0; b < r; b++) { + if (((l = "hour"), g >= 24)) (g = 0), (l = "day"), (v = h((x += 1), v).month), (v = c(x, v)); + var y = s + Math.floor(v / 12) + 0; + m = 0 === g && 0 === b ? d * n : 60 * n + m; + var w = 0 === g ? x : g; + this.timeScaleArray.push({ position: m, value: w, unit: l, hour: g, day: x, year: y, month: p.monthMod(v) }), g++; + } + }, + }, + { + key: "generateMinuteScale", + value: function (t) { + var e = t.firstVal, + i = t.currentMinute, + a = t.currentHour, + s = t.currentDate, + n = t.currentMonth, + r = t.currentYear, + o = t.minutesWidthOnXAxis, + l = t.numberOfMinutes, + h = o - (i - e.minMinute), + c = e.minMinute + 1, + d = c + 1, + u = s, + f = n, + g = r, + x = a; + this.timeScaleArray.push({ position: h, value: c, unit: "minute", day: u, hour: x, minute: d, year: g, month: p.monthMod(f) }); + for (var v = h, m = 0; m < l; m++) { + d >= 60 && ((d = 0), 24 === (x += 1) && (x = 0)); + var b = r + Math.floor(f / 12) + 0; + v = o + v; + var y = d; + this.timeScaleArray.push({ position: v, value: y, unit: "minute", hour: x, minute: d, day: u, year: b, month: p.monthMod(f) }), d++; + } + }, + }, + { + key: "createRawDateString", + value: function (t, e) { + var i = t.year; + return ( + (i += "-" + ("0" + t.month.toString()).slice(-2)), + "day" === t.unit ? (i += "day" === t.unit ? "-" + ("0" + e).slice(-2) : "-01") : (i += "-" + ("0" + (t.day ? t.day : "1")).slice(-2)), + "hour" === t.unit ? (i += "hour" === t.unit ? "T" + ("0" + e).slice(-2) : "T00") : (i += "T" + ("0" + (t.hour ? t.hour : "0")).slice(-2)), + (i += "minute" === t.unit ? ":" + ("0" + e).slice(-2) + ":00.000Z" : ":00:00.000Z") + ); + }, + }, + { + key: "formatDates", + value: function (t) { + var e = this, + i = this.w; + return t.map(function (t) { + var a = t.value.toString(), + s = new k(e.ctx), + n = e.createRawDateString(t, a), + r = new Date(Date.parse(n)); + if (void 0 === i.config.xaxis.labels.format) { + var o = "dd MMM", + l = i.config.xaxis.labels.datetimeFormatter; + "year" === t.unit && (o = l.year), + "month" === t.unit && (o = l.month), + "day" === t.unit && (o = l.day), + "hour" === t.unit && (o = l.hour), + "minute" === t.unit && (o = l.minute), + (a = s.formatDate(r, o, !0, !1)); + } else a = s.formatDate(r, i.config.xaxis.labels.format); + return { dateString: n, position: t.position, value: a, unit: t.unit, year: t.year, month: t.month }; + }); + }, + }, + { + key: "removeOverlappingTS", + value: function (t) { + var e = this, + i = new m(this.ctx), + a = 0, + s = t.map(function (s, n) { + if (n > 0 && e.w.config.xaxis.labels.hideOverlappingLabels) { + var r = i.getTextRects(t[a].value).width, + o = t[a].position; + return s.position > o + r + 10 ? ((a = n), s) : null; + } + return s; + }); + return (s = s.filter(function (t) { + return null !== t; + })); + }, + }, + ]), + t + ); + })(), + Q = (function () { + function t(e, i) { + n(this, t), (this.ctx = i), (this.w = i.w), (this.el = e), (this.coreUtils = new A(this.ctx)), (this.twoDSeries = []), (this.threeDSeries = []), (this.twoDSeriesX = []); + } + return ( + o(t, [ + { + key: "setupElements", + value: function () { + var t = this.w.globals, + e = this.w.config, + i = e.chart.type; + (t.axisCharts = ["line", "area", "bar", "rangeBar", "candlestick", "radar", "scatter", "bubble", "heatmap"].indexOf(i) > -1), + (t.xyCharts = ["line", "area", "bar", "rangeBar", "candlestick", "scatter", "bubble"].indexOf(i) > -1), + (t.isBarHorizontal = ("bar" === e.chart.type || "rangeBar" === e.chart.type) && e.plotOptions.bar.horizontal), + (t.chartClass = ".apexcharts" + t.cuid), + (t.dom.baseEl = this.el), + (t.dom.elWrap = document.createElement("div")), + m.setAttrs(t.dom.elWrap, { id: t.chartClass.substring(1), class: "apexcharts-canvas " + t.chartClass.substring(1) }), + this.el.appendChild(t.dom.elWrap), + (t.dom.Paper = new window.SVG.Doc(t.dom.elWrap)), + t.dom.Paper.attr({ class: "apexcharts-svg", "xmlns:data": "ApexChartsNS", transform: "translate(".concat(e.chart.offsetX, ", ").concat(e.chart.offsetY, ")") }), + (t.dom.Paper.node.style.background = e.chart.background), + this.setSVGDimensions(), + (t.dom.elGraphical = t.dom.Paper.group().attr({ class: "apexcharts-inner apexcharts-graphical" })), + (t.dom.elDefs = t.dom.Paper.defs()), + (t.dom.elLegendWrap = document.createElement("div")), + t.dom.elLegendWrap.classList.add("apexcharts-legend"), + t.dom.elWrap.appendChild(t.dom.elLegendWrap), + t.dom.Paper.add(t.dom.elGraphical), + t.dom.elGraphical.add(t.dom.elDefs); + }, + }, + { + key: "plotChartType", + value: function (t, e) { + var i = this.w, + a = i.config, + s = i.globals, + n = { series: [], i: [] }, + r = { series: [], i: [] }, + o = { series: [], i: [] }, + l = { series: [], i: [] }, + h = { series: [], i: [] }; + s.series.map(function (e, a) { + void 0 !== t[a].type + ? ("column" === t[a].type || "bar" === t[a].type + ? ((i.config.plotOptions.bar.horizontal = !1), l.series.push(e), l.i.push(a)) + : "area" === t[a].type + ? (r.series.push(e), r.i.push(a)) + : "line" === t[a].type + ? (n.series.push(e), n.i.push(a)) + : "scatter" === t[a].type + ? (o.series.push(e), o.i.push(a)) + : "bubble" === t[a].type || + ("candlestick" === t[a].type + ? (h.series.push(e), h.i.push(a)) + : console.warn("You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar/scatter/bubble")), + (s.comboCharts = !0)) + : (n.series.push(e), n.i.push(a)); + }); + var c = new U(this.ctx, e), + d = new F(this.ctx, e), + u = new R(this.ctx), + f = new N(this.ctx), + g = new H(this.ctx, e), + p = new D(this.ctx), + x = []; + if (s.comboCharts) { + if ((r.series.length > 0 && x.push(c.draw(r.series, "area", r.i)), l.series.length > 0)) + if (i.config.chart.stacked) { + var v = new X(this.ctx, e); + x.push(v.draw(l.series, l.i)); + } else { + var m = new I(this.ctx, e); + x.push(m.draw(l.series, l.i)); + } + if ((n.series.length > 0 && x.push(c.draw(n.series, "line", n.i)), h.series.length > 0 && x.push(d.draw(h.series, h.i)), o.series.length > 0)) { + var b = new U(this.ctx, e, !0); + x.push(b.draw(o.series, "scatter", o.i)); + } + } else + switch (a.chart.type) { + case "line": + x = c.draw(s.series, "line"); + break; + case "area": + x = c.draw(s.series, "area"); + break; + case "bar": + if (a.chart.stacked) x = new X(this.ctx, e).draw(s.series); + else x = new I(this.ctx, e).draw(s.series); + break; + case "candlestick": + x = new F(this.ctx, e).draw(s.series); + break; + case "rangeBar": + x = g.draw(s.series); + break; + case "heatmap": + x = new O(this.ctx, e).draw(s.series); + break; + case "pie": + case "donut": + x = u.draw(s.series); + break; + case "radialBar": + x = f.draw(s.series); + break; + case "radar": + x = p.draw(s.series); + break; + default: + x = c.draw(s.series); + } + return x; + }, + }, + { + key: "setSVGDimensions", + value: function () { + var t = this.w.globals, + e = this.w.config; + (t.svgWidth = e.chart.width), (t.svgHeight = e.chart.height); + var i = p.getDimensions(this.el), + a = e.chart.width + .toString() + .split(/[0-9]+/g) + .pop(); + if ( + ("%" === a + ? p.isNumber(i[0]) && (0 === i[0].width && (i = p.getDimensions(this.el.parentNode)), (t.svgWidth = (i[0] * parseInt(e.chart.width)) / 100)) + : ("px" !== a && "" !== a) || (t.svgWidth = parseInt(e.chart.width)), + "auto" !== t.svgHeight && "" !== t.svgHeight) + ) + if ( + "%" === + e.chart.height + .toString() + .split(/[0-9]+/g) + .pop() + ) { + var s = p.getDimensions(this.el.parentNode); + t.svgHeight = (s[1] * parseInt(e.chart.height)) / 100; + } else t.svgHeight = parseInt(e.chart.height); + else t.axisCharts ? (t.svgHeight = t.svgWidth / 1.61) : (t.svgHeight = t.svgWidth); + t.svgWidth < 0 && (t.svgWidth = 0), t.svgHeight < 0 && (t.svgHeight = 0), m.setAttrs(t.dom.Paper.node, { width: t.svgWidth, height: t.svgHeight }); + var n = e.chart.sparkline.enabled ? 0 : t.axisCharts ? e.chart.parentHeightOffset : 0; + (t.dom.Paper.node.parentNode.parentNode.style.minHeight = t.svgHeight + n + "px"), (t.dom.elWrap.style.width = t.svgWidth + "px"), (t.dom.elWrap.style.height = t.svgHeight + "px"); + }, + }, + { + key: "shiftGraphPosition", + value: function () { + var t = this.w.globals, + e = t.translateY, + i = { transform: "translate(" + t.translateX + ", " + e + ")" }; + m.setAttrs(t.dom.elGraphical.node, i); + }, + }, + { + key: "resizeNonAxisCharts", + value: function () { + var t = this.w, + e = t.globals, + i = 0; + ("top" !== t.config.legend.position && "bottom" !== t.config.legend.position) || (i = new j(this.ctx).getLegendBBox().clwh + 10); + var a = t.globals.dom.baseEl.querySelector(".apexcharts-radialbar"), + s = 2 * t.globals.radialSize; + a && -90 !== t.config.plotOptions.radialBar.startAngle && (s = p.getBoundingClientRect(a).height); + var n = Math.max(s, 2 * t.globals.radialSize) + e.translateY + i + 20; + e.dom.elLegendForeign && e.dom.elLegendForeign.setAttribute("height", n), + (e.dom.elWrap.style.height = n + "px"), + m.setAttrs(e.dom.Paper.node, { height: n }), + (e.dom.Paper.node.parentNode.parentNode.style.minHeight = n + "px"); + }, + }, + { + key: "coreCalculations", + value: function () { + new $(this.ctx).init(); + }, + }, + { + key: "resetGlobals", + value: function () { + var t = this, + e = this.w.globals; + (e.series = []), + (e.seriesCandleO = []), + (e.seriesCandleH = []), + (e.seriesCandleL = []), + (e.seriesCandleC = []), + (e.seriesRangeStart = []), + (e.seriesRangeEnd = []), + (e.seriesPercent = []), + (e.seriesX = []), + (e.seriesZ = []), + (e.seriesNames = []), + (e.seriesTotals = []), + (e.stackedSeriesTotals = []), + (e.labels = []), + (e.timelineLabels = []), + (e.noLabelsProvided = !1), + (e.timescaleTicks = []), + (e.resizeTimer = null), + (e.selectionResizeTimer = null), + (e.seriesXvalues = t.w.config.series.map(function (t) { + return []; + })), + (e.seriesYvalues = t.w.config.series.map(function (t) { + return []; + })), + (e.delayedElements = []), + (e.pointsArray = []), + (e.dataLabelsRects = []), + (e.isXNumeric = !1), + (e.isDataXYZ = !1), + (e.maxY = -Number.MAX_VALUE), + (e.minY = Number.MIN_VALUE), + (e.minYArr = []), + (e.maxYArr = []), + (e.maxX = -Number.MAX_VALUE), + (e.minX = Number.MAX_VALUE), + (e.initialmaxX = -Number.MAX_VALUE), + (e.initialminX = Number.MAX_VALUE), + (e.maxDate = 0), + (e.minDate = Number.MAX_VALUE), + (e.minZ = Number.MAX_VALUE), + (e.maxZ = -Number.MAX_VALUE), + (e.minXDiff = Number.MAX_VALUE), + (e.yAxisScale = []), + (e.xAxisScale = null), + (e.xAxisTicksPositions = []), + (e.yLabelsCoords = []), + (e.yTitleCoords = []), + (e.xRange = 0), + (e.yRange = []), + (e.zRange = 0), + (e.dataPoints = 0); + }, + }, + { + key: "isMultipleY", + value: function () { + if (this.w.config.yaxis.constructor === Array && this.w.config.yaxis.length > 1) return (this.w.globals.isMultipleYAxis = !0), !0; + }, + }, + { + key: "excludeCollapsedSeriesInYAxis", + value: function () { + var t = this, + e = this.w; + e.globals.ignoreYAxisIndexes = e.globals.collapsedSeries.map(function (e, i) { + if (t.w.globals.isMultipleYAxis) return e.index; + }); + }, + }, + { + key: "isMultiFormat", + value: function () { + return this.isFormatXY() || this.isFormat2DArray(); + }, + }, + { + key: "isFormatXY", + value: function () { + var t = this.w.config.series.slice(), + e = new G(this.ctx); + if ( + ((this.activeSeriesIndex = e.getActiveConfigSeriesIndex()), + void 0 !== t[this.activeSeriesIndex].data && + t[this.activeSeriesIndex].data.length > 0 && + null !== t[this.activeSeriesIndex].data[0] && + void 0 !== t[this.activeSeriesIndex].data[0].x && + null !== t[this.activeSeriesIndex].data[0]) + ) + return !0; + }, + }, + { + key: "isFormat2DArray", + value: function () { + var t = this.w.config.series.slice(), + e = new G(this.ctx); + if ( + ((this.activeSeriesIndex = e.getActiveConfigSeriesIndex()), + void 0 !== t[this.activeSeriesIndex].data && + t[this.activeSeriesIndex].data.length > 0 && + void 0 !== t[this.activeSeriesIndex].data[0] && + null !== t[this.activeSeriesIndex].data[0] && + t[this.activeSeriesIndex].data[0].constructor === Array) + ) + return !0; + }, + }, + { + key: "handleFormat2DArray", + value: function (t, e) { + for (var i = this.w.config, a = this.w.globals, s = 0; s < t[e].data.length; s++) + if ( + (void 0 !== t[e].data[s][1] && + (Array.isArray(t[e].data[s][1]) && 4 === t[e].data[s][1].length ? this.twoDSeries.push(p.parseNumber(t[e].data[s][1][3])) : this.twoDSeries.push(p.parseNumber(t[e].data[s][1])), + (a.dataFormatXNumeric = !0)), + "datetime" === i.xaxis.type) + ) { + var n = new Date(t[e].data[s][0]); + (n = new Date(n).getTime()), this.twoDSeriesX.push(n); + } else this.twoDSeriesX.push(t[e].data[s][0]); + for (var r = 0; r < t[e].data.length; r++) void 0 !== t[e].data[r][2] && (this.threeDSeries.push(t[e].data[r][2]), (a.isDataXYZ = !0)); + }, + }, + { + key: "handleFormatXY", + value: function (t, e) { + var i = this.w.config, + a = this.w.globals, + s = new k(this.ctx), + n = e; + a.collapsedSeriesIndices.indexOf(e) > -1 && (n = this.activeSeriesIndex); + for (var r = 0; r < t[e].data.length; r++) + void 0 !== t[e].data[r].y && (Array.isArray(t[e].data[r].y) ? this.twoDSeries.push(p.parseNumber(t[e].data[r].y[t[e].data[r].y.length - 1])) : this.twoDSeries.push(p.parseNumber(t[e].data[r].y))); + for (var o = 0; o < t[n].data.length; o++) { + var l = "string" == typeof t[n].data[o].x, + h = !!s.isValidDate(t[n].data[o].x.toString()); + l || h + ? l + ? "datetime" !== i.xaxis.type || a.isRangeData + ? ((this.fallbackToCategory = !0), this.twoDSeriesX.push(t[n].data[o].x)) + : this.twoDSeriesX.push(s.parseDate(t[n].data[o].x)) + : "datetime" === i.xaxis.type + ? this.twoDSeriesX.push(s.parseDate(t[n].data[o].x.toString())) + : ((a.dataFormatXNumeric = !0), (a.isXNumeric = !0), this.twoDSeriesX.push(parseFloat(t[n].data[o].x))) + : ((a.isXNumeric = !0), (a.dataFormatXNumeric = !0), this.twoDSeriesX.push(t[n].data[o].x)); + } + if (t[e].data[0] && void 0 !== t[e].data[0].z) { + for (var c = 0; c < t[e].data.length; c++) this.threeDSeries.push(t[e].data[c].z); + a.isDataXYZ = !0; + } + }, + }, + { + key: "handleRangeData", + value: function (t, e) { + var i = this.w.globals, + a = {}; + return ( + this.isFormat2DArray() ? (a = this.handleRangeDataFormat("array", t, e)) : this.isFormatXY() && (a = this.handleRangeDataFormat("xy", t, e)), + i.seriesRangeStart.push(a.start), + i.seriesRangeEnd.push(a.end), + a + ); + }, + }, + { + key: "handleCandleStickData", + value: function (t, e) { + var i = this.w.globals, + a = {}; + return ( + this.isFormat2DArray() ? (a = this.handleCandleStickDataFormat("array", t, e)) : this.isFormatXY() && (a = this.handleCandleStickDataFormat("xy", t, e)), + i.seriesCandleO.push(a.o), + i.seriesCandleH.push(a.h), + i.seriesCandleL.push(a.l), + i.seriesCandleC.push(a.c), + a + ); + }, + }, + { + key: "handleRangeDataFormat", + value: function (t, e, i) { + var a = [], + s = [], + n = "Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts", + r = new G(this.ctx).getActiveConfigSeriesIndex(); + if ("array" === t) { + if (2 !== e[r].data[0][1].length) throw new Error(n); + for (var o = 0; o < e[i].data.length; o++) a.push(e[i].data[o][1][0]), s.push(e[i].data[o][1][1]); + } else if ("xy" === t) { + if (2 !== e[r].data[0].y.length) throw new Error(n); + for (var l = 0; l < e[i].data.length; l++) a.push(e[i].data[l].y[0]), s.push(e[i].data[l].y[1]); + } + return { start: a, end: s }; + }, + }, + { + key: "handleCandleStickDataFormat", + value: function (t, e, i) { + var a = [], + s = [], + n = [], + r = [], + o = "Please provide [Open, High, Low and Close] values in valid format. Read more https://apexcharts.com/docs/series/#candlestick"; + if ("array" === t) { + if (4 !== e[i].data[0][1].length) throw new Error(o); + for (var l = 0; l < e[i].data.length; l++) a.push(e[i].data[l][1][0]), s.push(e[i].data[l][1][1]), n.push(e[i].data[l][1][2]), r.push(e[i].data[l][1][3]); + } else if ("xy" === t) { + if (4 !== e[i].data[0].y.length) throw new Error(o); + for (var h = 0; h < e[i].data.length; h++) a.push(e[i].data[h].y[0]), s.push(e[i].data[h].y[1]), n.push(e[i].data[h].y[2]), r.push(e[i].data[h].y[3]); + } + return { o: a, h: s, l: n, c: r }; + }, + }, + { + key: "parseDataAxisCharts", + value: function (t) { + for (var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this.ctx, i = this.w.config, a = this.w.globals, s = new k(e), n = 0; n < t.length; n++) { + if (((this.twoDSeries = []), (this.twoDSeriesX = []), (this.threeDSeries = []), void 0 === t[n].data)) + return void console.error("It is a possibility that you may have not included 'data' property in series."); + if ( + (("rangeBar" !== i.chart.type && "rangeArea" !== i.chart.type && "rangeBar" !== t[n].type && "rangeArea" !== t[n].type) || ((a.isRangeData = !0), this.handleRangeData(t, n)), this.isMultiFormat()) + ) + this.isFormat2DArray() ? this.handleFormat2DArray(t, n) : this.isFormatXY() && this.handleFormatXY(t, n), + ("candlestick" !== i.chart.type && "candlestick" !== t[n].type) || this.handleCandleStickData(t, n), + a.series.push(this.twoDSeries), + a.labels.push(this.twoDSeriesX), + a.seriesX.push(this.twoDSeriesX), + this.fallbackToCategory || (a.isXNumeric = !0); + else { + if ("datetime" === i.xaxis.type) { + a.isXNumeric = !0; + for (var r = i.labels.length > 0 ? i.labels.slice() : i.xaxis.categories.slice(), o = 0; o < r.length; o++) + if ("string" == typeof r[o]) { + if (!s.isValidDate(r[o])) throw new Error("You have provided invalid Date format. Please provide a valid JavaScript Date"); + this.twoDSeriesX.push(s.parseDate(r[o])); + } else { + if (13 !== String(r[o]).length) throw new Error("Please provide a valid JavaScript timestamp"); + this.twoDSeriesX.push(r[o]); + } + a.seriesX.push(this.twoDSeriesX); + } else if ("numeric" === i.xaxis.type) { + a.isXNumeric = !0; + var l = i.labels.length > 0 ? i.labels.slice() : i.xaxis.categories.slice(); + l.length > 0 && ((this.twoDSeriesX = l), a.seriesX.push(this.twoDSeriesX)); + } + a.labels.push(this.twoDSeriesX); + var h = t[n].data.map(function (t) { + return p.parseNumber(t); + }); + a.series.push(h); + } + a.seriesZ.push(this.threeDSeries), void 0 !== t[n].name ? a.seriesNames.push(t[n].name) : a.seriesNames.push("series-" + parseInt(n + 1)); + } + return this.w; + }, + }, + { + key: "parseDataNonAxisCharts", + value: function (t) { + var e = this.w.globals, + i = this.w.config; + (e.series = t.slice()), (e.seriesNames = i.labels.slice()); + for (var a = 0; a < e.series.length; a++) void 0 === e.seriesNames[a] && e.seriesNames.push("series-" + (a + 1)); + return this.w; + }, + }, + { + key: "handleExternalLabelsData", + value: function (t) { + var e = this.w.config, + i = this.w.globals; + if (e.xaxis.categories.length > 0) i.labels = e.xaxis.categories; + else if (e.labels.length > 0) i.labels = e.labels.slice(); + else if (this.fallbackToCategory) i.labels = i.labels[0]; + else { + var a = []; + if (i.axisCharts) { + for (var s = 0; s < i.series[i.maxValsInArrayIndex].length; s++) a.push(s + 1); + for (var n = 0; n < t.length; n++) i.seriesX.push(a); + i.isXNumeric = !0; + } + if (0 === a.length) { + a = [0, 10]; + for (var r = 0; r < t.length; r++) i.seriesX.push(a); + } + (i.labels = a), (i.noLabelsProvided = !0); + } + }, + }, + { + key: "parseData", + value: function (t) { + var e = this.w, + i = e.config, + a = e.globals; + if ( + (this.excludeCollapsedSeriesInYAxis(), + (this.fallbackToCategory = !1), + this.resetGlobals(), + this.isMultipleY(), + a.axisCharts ? this.parseDataAxisCharts(t) : this.parseDataNonAxisCharts(t), + this.coreUtils.getLargestSeries(), + "bar" === i.chart.type && i.chart.stacked) + ) { + var s = new G(this.ctx); + a.series = s.setNullSeriesToZeroValues(a.series); + } + this.coreUtils.getSeriesTotals(), + a.axisCharts && this.coreUtils.getStackedSeriesTotals(), + this.coreUtils.getPercentSeries(), + a.dataFormatXNumeric || (a.isXNumeric && ("numeric" !== i.xaxis.type || 0 !== i.labels.length || 0 !== i.xaxis.categories.length)) || this.handleExternalLabelsData(t); + }, + }, + { + key: "xySettings", + value: function () { + var t = null, + e = this.w; + if (e.globals.axisCharts) { + if ("back" === e.config.xaxis.crosshairs.position) new Y(this.ctx).drawXCrosshairs(); + if ("back" === e.config.yaxis[0].crosshairs.position) new Y(this.ctx).drawYCrosshairs(); + if (((t = this.coreUtils.getCalculatedRatios()), "datetime" === e.config.xaxis.type && void 0 === e.config.xaxis.labels.formatter)) { + var i, + a = new J(this.ctx); + isFinite(e.globals.minX) && isFinite(e.globals.maxX) && !e.globals.isBarHorizontal + ? ((i = a.calculateTimeScaleTicks(e.globals.minX, e.globals.maxX)), a.recalcDimensionsBasedOnFormat(i, !1)) + : e.globals.isBarHorizontal && ((i = a.calculateTimeScaleTicks(e.globals.minY, e.globals.maxY)), a.recalcDimensionsBasedOnFormat(i, !0)); + } + } + return t; + }, + }, + { + key: "drawAxis", + value: function (t, e) { + var i, + a, + s = this.w.globals, + n = this.w.config, + r = new q(this.ctx), + o = new B(this.ctx); + s.axisCharts && + "radar" !== t && + (s.isBarHorizontal + ? ((a = o.drawYaxisInversed(0)), (i = r.drawXaxisInversed(0)), s.dom.elGraphical.add(i), s.dom.elGraphical.add(a)) + : ((i = r.drawXaxis()), + s.dom.elGraphical.add(i), + n.yaxis.map(function (t, e) { + -1 === s.ignoreYAxisIndexes.indexOf(e) && ((a = o.drawYaxis(e)), s.dom.Paper.add(a)); + }))); + n.yaxis.map(function (t, e) { + -1 === s.ignoreYAxisIndexes.indexOf(e) && o.yAxisTitleRotate(e, t.opposite); + }); + }, + }, + { + key: "setupBrushHandler", + value: function () { + var t = this, + e = this.w; + e.config.chart.brush.enabled && + "function" != typeof e.config.chart.events.selection && + (e.config.chart.brush.targets || [e.config.chart.brush.target]).forEach(function (i) { + var a = ApexCharts.getChartByID(i); + a.w.globals.brushSource = t.ctx; + var s = function () { + t.ctx._updateOptions({ chart: { selection: { xaxis: { min: a.w.globals.minX, max: a.w.globals.maxX } } } }, !1, !1); + }; + "function" != typeof a.w.config.chart.events.zoomed && + (a.w.config.chart.events.zoomed = function () { + s(); + }), + "function" != typeof a.w.config.chart.events.scrolled && + (a.w.config.chart.events.scrolled = function () { + s(); + }), + (e.config.chart.events.selection = function (t, i) { + var s = p.clone(e.config.yaxis); + e.config.chart.brush.autoScaleYaxis && (s = new Z(a).autoScaleY(a, s, i)); + a._updateOptions({ xaxis: { min: i.xaxis.min, max: i.xaxis.max }, yaxis: s }, !1, !1, !1); + }); + }); + }, + }, + ]), + t + ); + })(); + var K = setTimeout; + function tt() {} + function et(t) { + if (!(this instanceof et)) throw new TypeError("Promises must be constructed via new"); + if ("function" != typeof t) throw new TypeError("not a function"); + (this._state = 0), (this._handled = !1), (this._value = void 0), (this._deferreds = []), ot(t, this); + } + function it(t, e) { + for (; 3 === t._state; ) t = t._value; + 0 !== t._state + ? ((t._handled = !0), + et._immediateFn(function () { + var i = 1 === t._state ? e.onFulfilled : e.onRejected; + if (null !== i) { + var a; + try { + a = i(t._value); + } catch (t) { + return void st(e.promise, t); + } + at(e.promise, a); + } else (1 === t._state ? at : st)(e.promise, t._value); + })) + : t._deferreds.push(e); + } + function at(t, e) { + try { + if (e === t) throw new TypeError("A promise cannot be resolved with itself."); + if (e && ("object" == typeof e || "function" == typeof e)) { + var i = e.then; + if (e instanceof et) return (t._state = 3), (t._value = e), void nt(t); + if ("function" == typeof i) + return void ot( + ((a = i), + (s = e), + function () { + a.apply(s, arguments); + }), + t + ); + } + (t._state = 1), (t._value = e), nt(t); + } catch (e) { + st(t, e); + } + var a, s; + } + function st(t, e) { + (t._state = 2), (t._value = e), nt(t); + } + function nt(t) { + 2 === t._state && + 0 === t._deferreds.length && + et._immediateFn(function () { + t._handled || et._unhandledRejectionFn(t._value); + }); + for (var e = 0, i = t._deferreds.length; e < i; e++) it(t, t._deferreds[e]); + t._deferreds = null; + } + function rt(t, e, i) { + (this.onFulfilled = "function" == typeof t ? t : null), (this.onRejected = "function" == typeof e ? e : null), (this.promise = i); + } + function ot(t, e) { + var i = !1; + try { + t( + function (t) { + i || ((i = !0), at(e, t)); + }, + function (t) { + i || ((i = !0), st(e, t)); + } + ); + } catch (t) { + if (i) return; + (i = !0), st(e, t); + } + } + (et.prototype.catch = function (t) { + return this.then(null, t); + }), + (et.prototype.then = function (t, e) { + var i = new this.constructor(tt); + return it(this, new rt(t, e, i)), i; + }), + (et.prototype.finally = function (t) { + var e = this.constructor; + return this.then( + function (i) { + return e.resolve(t()).then(function () { + return i; + }); + }, + function (i) { + return e.resolve(t()).then(function () { + return e.reject(i); + }); + } + ); + }), + (et.all = function (t) { + return new et(function (e, i) { + if (!t || void 0 === t.length) throw new TypeError("Promise.all accepts an array"); + var a = Array.prototype.slice.call(t); + if (0 === a.length) return e([]); + var s = a.length; + function n(t, r) { + try { + if (r && ("object" == typeof r || "function" == typeof r)) { + var o = r.then; + if ("function" == typeof o) + return void o.call( + r, + function (e) { + n(t, e); + }, + i + ); + } + (a[t] = r), 0 == --s && e(a); + } catch (t) { + i(t); + } + } + for (var r = 0; r < a.length; r++) n(r, a[r]); + }); + }), + (et.resolve = function (t) { + return t && "object" == typeof t && t.constructor === et + ? t + : new et(function (e) { + e(t); + }); + }), + (et.reject = function (t) { + return new et(function (e, i) { + i(t); + }); + }), + (et.race = function (t) { + return new et(function (e, i) { + for (var a = 0, s = t.length; a < s; a++) t[a].then(e, i); + }); + }), + (et._immediateFn = + ("function" == typeof t && + function (e) { + t(e); + }) || + function (t) { + K(t, 0); + }), + (et._unhandledRejectionFn = function (t) { + "undefined" != typeof console && console && console.warn("Possible Unhandled Promise Rejection:", t); + }); + var lt, + ht, + ct = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "getSvgString", + value: function () { + return this.w.globals.dom.Paper.svg(); + }, + }, + { + key: "cleanup", + value: function () { + var t = this.w, + e = t.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs"), + i = t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs"); + e && e.setAttribute("x", -500), i && (i.setAttribute("y1", -100), i.setAttribute("y2", -100)); + }, + }, + { + key: "svgUrl", + value: function () { + this.cleanup(); + var t = this.getSvgString(), + e = new Blob([t], { type: "image/svg+xml;charset=utf-8" }); + return URL.createObjectURL(e); + }, + }, + { + key: "dataURI", + value: function () { + var t = this; + return new et(function (e) { + var i = t.w; + t.cleanup(); + var a = document.createElement("canvas"); + (a.width = i.globals.svgWidth), (a.height = i.globals.svgHeight); + var s = "transparent" === i.config.chart.background ? "#fff" : i.config.chart.background, + n = a.getContext("2d"); + (n.fillStyle = s), n.fillRect(0, 0, a.width, a.height); + var r = window.URL || window.webkitURL || window, + o = new Image(); + o.crossOrigin = "anonymous"; + var l = t.getSvgString(), + h = "data:image/svg+xml," + encodeURIComponent(l); + (o.onload = function () { + n.drawImage(o, 0, 0), r.revokeObjectURL(h); + var t = a.toDataURL("image/png"); + e(t); + }), + (o.src = h); + }); + }, + }, + { + key: "exportToSVG", + value: function () { + this.triggerDownload(this.svgUrl(), ".svg"); + }, + }, + { + key: "exportToPng", + value: function () { + var t = this; + this.dataURI().then(function (e) { + t.triggerDownload(e, ".png"); + }); + }, + }, + { + key: "triggerDownload", + value: function (t, e) { + var i = document.createElement("a"); + (i.href = t), (i.download = this.w.globals.chartID + e), document.body.appendChild(i), i.click(), document.body.removeChild(i); + }, + }, + ]), + t + ); + })(), + dt = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + var i = this.w; + (this.anim = new v(this.ctx)), + (this.xaxisLabels = i.globals.labels.slice()), + (this.animX = i.config.grid.xaxis.lines.animate && i.config.chart.animations.enabled), + (this.animY = i.config.grid.yaxis.lines.animate && i.config.chart.animations.enabled), + i.globals.timelineLabels.length > 0 && (this.xaxisLabels = i.globals.timelineLabels.slice()); + } + return ( + o(t, [ + { + key: "drawGridArea", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, + e = this.w, + i = new m(this.ctx); + null === t && (t = i.group({ class: "apexcharts-grid" })); + var a = i.drawLine(e.globals.padHorizontal, 1, e.globals.padHorizontal, e.globals.gridHeight, "transparent"), + s = i.drawLine(e.globals.padHorizontal, e.globals.gridHeight, e.globals.gridWidth, e.globals.gridHeight, "transparent"); + return t.add(s), t.add(a), t; + }, + }, + { + key: "drawGrid", + value: function () { + var t = this.w, + e = new q(this.ctx), + i = new B(this.ctx), + a = this.w.globals, + s = null; + if (a.axisCharts) { + if (t.config.grid.show) (s = this.renderGrid()), a.dom.elGraphical.add(s.el), this.drawGridArea(s.el); + else { + var n = this.drawGridArea(); + a.dom.elGraphical.add(n); + } + null !== s && e.xAxisLabelCorrections(s.xAxisTickWidth), i.setYAxisTextAlignments(); + } + }, + }, + { + key: "createGridMask", + value: function () { + var t = this.w, + e = t.globals, + i = new m(this.ctx), + a = Array.isArray(t.config.stroke.width) ? 0 : t.config.stroke.width; + if (Array.isArray(t.config.stroke.width)) { + var s = 0; + t.config.stroke.width.forEach(function (t) { + s = Math.max(s, t); + }), + (a = s); + } + (e.dom.elGridRectMask = document.createElementNS(e.SVGNS, "clipPath")), + e.dom.elGridRectMask.setAttribute("id", "gridRectMask".concat(e.cuid)), + (e.dom.elGridRectMarkerMask = document.createElementNS(e.SVGNS, "clipPath")), + e.dom.elGridRectMarkerMask.setAttribute("id", "gridRectMarkerMask".concat(e.cuid)), + (e.dom.elGridRect = i.drawRect(-a / 2, -a / 2, e.gridWidth + a, e.gridHeight + a, 0, "#fff")), + new A(this).getLargestMarkerSize(); + var n = t.globals.markers.largestSize + 1; + (e.dom.elGridRectMarker = i.drawRect(-n, -n, e.gridWidth + 2 * n, e.gridHeight + 2 * n, 0, "#fff")), + e.dom.elGridRectMask.appendChild(e.dom.elGridRect.node), + e.dom.elGridRectMarkerMask.appendChild(e.dom.elGridRectMarker.node); + var r = e.dom.baseEl.querySelector("defs"); + r.appendChild(e.dom.elGridRectMask), r.appendChild(e.dom.elGridRectMarkerMask); + }, + }, + { + key: "renderGrid", + value: function () { + var t = this.w, + e = new m(this.ctx), + i = t.config.grid.strokeDashArray, + a = e.group({ class: "apexcharts-grid" }), + s = e.group({ class: "apexcharts-gridlines-horizontal" }), + n = e.group({ class: "apexcharts-gridlines-vertical" }); + a.add(s), a.add(n); + for (var r, o = 8, l = 0; l < t.globals.series.length && (void 0 !== t.globals.yAxisScale[l] && (o = t.globals.yAxisScale[l].result.length - 1), !(o > 2)); l++); + if (t.globals.isBarHorizontal) { + if (((r = o), t.config.grid.xaxis.lines.show || t.config.xaxis.axisTicks.show)) + for (var h, c = t.globals.padHorizontal, d = t.globals.gridHeight, u = 0; u < r + 1 && ((h = c = c + t.globals.gridWidth / r + 0.3), u !== r - 1); u++) { + if (t.config.grid.xaxis.lines.show) { + var f = e.drawLine(c, 0, h, d, t.config.grid.borderColor, i); + f.node.classList.add("apexcharts-gridline"), n.add(f), this.animX && this.animateLine(f, { x1: 0, x2: 0 }, { x1: c, x2: h }); + } + new q(this.ctx).drawXaxisTicks(c, a); + } + if (t.config.grid.yaxis.lines.show) + for (var g = 0, p = 0, x = t.globals.gridWidth, v = 0; v < t.globals.dataPoints + 1; v++) { + var b = e.drawLine(0, g, x, p, t.config.grid.borderColor, i); + s.add(b), b.node.classList.add("apexcharts-gridline"), this.animY && this.animateLine(b, { y1: g + 20, y2: p + 20 }, { y1: g, y2: p }), (p = g += t.globals.gridHeight / t.globals.dataPoints); + } + } else { + if (((r = this.xaxisLabels.length), t.config.grid.xaxis.lines.show || t.config.xaxis.axisTicks.show)) { + var y, + w = t.globals.padHorizontal, + k = t.globals.gridHeight; + if (t.globals.timelineLabels.length > 0) + for (var S = 0; S < r; S++) { + if (((w = this.xaxisLabels[S].position), (y = this.xaxisLabels[S].position), t.config.grid.xaxis.lines.show && w > 0 && w < t.globals.gridWidth)) { + var A = e.drawLine(w, 0, y, k, t.config.grid.borderColor, i); + A.node.classList.add("apexcharts-gridline"), n.add(A), this.animX && this.animateLine(A, { x1: 0, x2: 0 }, { x1: w, x2: y }); + } + var C = new q(this.ctx); + (S === r - 1 && t.globals.skipLastTimelinelabel) || C.drawXaxisTicks(w, a); + } + else + for (var L = r, E = 0; E < L; E++) { + var P = L; + if ((t.globals.isXNumeric && "bar" !== t.config.chart.type && (P -= 1), (y = w += t.globals.gridWidth / P), E === P - 1)) break; + if (t.config.grid.xaxis.lines.show) { + var T = e.drawLine(w, 0, y, k, t.config.grid.borderColor, i); + T.node.classList.add("apexcharts-gridline"), n.add(T), this.animX && this.animateLine(T, { x1: 0, x2: 0 }, { x1: w, x2: y }); + } + new q(this.ctx).drawXaxisTicks(w, a); + } + } + if (t.config.grid.yaxis.lines.show) + for (var M = 0, z = 0, I = t.globals.gridWidth, X = 0; X < o + 1; X++) { + var F = e.drawLine(0, M, I, z, t.config.grid.borderColor, i); + s.add(F), F.node.classList.add("apexcharts-gridline"), this.animY && this.animateLine(F, { y1: M + 20, y2: z + 20 }, { y1: M, y2: z }), (z = M += t.globals.gridHeight / o); + } + } + return this.drawGridBands(a, r, o), { el: a, xAxisTickWidth: t.globals.gridWidth / r }; + }, + }, + { + key: "drawGridBands", + value: function (t, e, i) { + var a = this.w, + s = new m(this.ctx); + if (void 0 !== a.config.grid.row.colors && a.config.grid.row.colors.length > 0) + for (var n = 0, r = a.globals.gridHeight / i, o = a.globals.gridWidth, l = 0, h = 0; l < i; l++, h++) { + h >= a.config.grid.row.colors.length && (h = 0); + var c = a.config.grid.row.colors[h], + d = s.drawRect(0, n, o, r, 0, c, a.config.grid.row.opacity); + t.add(d), d.node.classList.add("apexcharts-gridRow"), (n += a.globals.gridHeight / i); + } + if (void 0 !== a.config.grid.column.colors && a.config.grid.column.colors.length > 0) + for (var u = a.globals.padHorizontal, f = a.globals.padHorizontal + a.globals.gridWidth / e, g = a.globals.gridHeight, p = 0, x = 0; p < e; p++, x++) { + x >= a.config.grid.column.colors.length && (x = 0); + var v = a.config.grid.column.colors[x], + b = s.drawRect(u, 0, f, g, 0, v, a.config.grid.column.opacity); + b.node.classList.add("apexcharts-gridColumn"), t.add(b), (u += a.globals.gridWidth / e); + } + }, + }, + { + key: "animateLine", + value: function (t, e, i) { + var a = this.w, + s = a.config.chart.animations; + if (s && !a.globals.resized && !a.globals.dataChanged) { + var n = s.speed; + this.anim.animateLine(t, e, i, n); + } + }, + }, + ]), + t + ); + })(), + ut = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "checkResponsiveConfig", + value: function (t) { + var e = this, + i = this.w, + a = i.config; + if (0 !== a.responsive.length) { + var s = a.responsive.slice(); + s.sort(function (t, e) { + return t.breakpoint > e.breakpoint ? 1 : e.breakpoint > t.breakpoint ? -1 : 0; + }).reverse(); + var n = new C({}), + r = function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, + a = s[0].breakpoint, + r = window.innerWidth > 0 ? window.innerWidth : screen.width; + if (r > a) { + var o = A.extendArrayProps(n, i.globals.initialConfig); + (t = p.extend(o, t)), (t = p.extend(i.config, t)), e.overrideResponsiveOptions(t); + } else for (var l = 0; l < s.length; l++) r < s[l].breakpoint && ((t = A.extendArrayProps(n, s[l].options)), (t = p.extend(i.config, t)), e.overrideResponsiveOptions(t)); + }; + if (t) { + var o = A.extendArrayProps(n, t); + (o = p.extend(i.config, o)), r((o = p.extend(o, t))); + } else r({}); + } + }, + }, + { + key: "overrideResponsiveOptions", + value: function (t) { + var e = new C(t).init(); + this.w.config = e; + }, + }, + ]), + t + ); + })(), + ft = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.colors = []); + } + return ( + o(t, [ + { + key: "init", + value: function () { + this.setDefaultColors(); + }, + }, + { + key: "setDefaultColors", + value: function () { + var t = this.w, + e = new p(); + if ( + (t.globals.dom.elWrap.classList.add(t.config.theme.mode), void 0 === t.config.colors ? (t.globals.colors = this.predefined()) : (t.globals.colors = t.config.colors), t.config.theme.monochrome.enabled) + ) { + var i = [], + a = t.globals.series.length; + t.config.plotOptions.bar.distributed && "bar" === t.config.chart.type && (a = t.globals.series[0].length * t.globals.series.length); + for (var s = t.config.theme.monochrome.color, n = 1 / (a / t.config.theme.monochrome.shadeIntensity), r = t.config.theme.monochrome.shadeTo, o = 0, l = 0; l < a; l++) { + var h = void 0; + "dark" === r ? ((h = e.shadeColor(-1 * o, s)), (o += n)) : ((h = e.shadeColor(o, s)), (o += n)), i.push(h); + } + t.globals.colors = i.slice(); + } + var c = t.globals.colors.slice(); + this.pushExtraColors(t.globals.colors), + void 0 === t.config.stroke.colors ? (t.globals.stroke.colors = c) : (t.globals.stroke.colors = t.config.stroke.colors), + this.pushExtraColors(t.globals.stroke.colors), + void 0 === t.config.fill.colors ? (t.globals.fill.colors = c) : (t.globals.fill.colors = t.config.fill.colors), + this.pushExtraColors(t.globals.fill.colors), + void 0 === t.config.dataLabels.style.colors ? (t.globals.dataLabels.style.colors = c) : (t.globals.dataLabels.style.colors = t.config.dataLabels.style.colors), + this.pushExtraColors(t.globals.dataLabels.style.colors, 50), + void 0 === t.config.plotOptions.radar.polygons.fill.colors + ? (t.globals.radarPolygons.fill.colors = ["dark" === t.config.theme.mode ? "#202D48" : "#fff"]) + : (t.globals.radarPolygons.fill.colors = t.config.plotOptions.radar.polygons.fill.colors), + this.pushExtraColors(t.globals.radarPolygons.fill.colors, 20), + void 0 === t.config.markers.colors ? (t.globals.markers.colors = c) : (t.globals.markers.colors = t.config.markers.colors), + this.pushExtraColors(t.globals.markers.colors); + }, + }, + { + key: "pushExtraColors", + value: function (t, e) { + var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null, + a = this.w, + s = e || a.globals.series.length; + if ( + (null === i && (i = ("bar" === a.config.chart.type && a.config.plotOptions.bar.distributed) || ("heatmap" === a.config.chart.type && a.config.plotOptions.heatmap.colorScale.inverse)), + i && (s = a.globals.series[0].length * a.globals.series.length), + t.length < s) + ) + for (var n = s - t.length, r = 0; r < n; r++) t.push(t[r]); + }, + }, + { + key: "updateThemeOptions", + value: function (t) { + (t.chart = t.chart || {}), (t.tooltip = t.tooltip || {}); + var e = t.theme.mode || "light", + i = t.theme.palette ? t.theme.palette : "dark" === e ? "palette4" : "palette1", + a = t.chart.foreColor ? t.chart.foreColor : "dark" === e ? "#f6f7f8" : "#373d3f"; + return (t.tooltip.theme = e), (t.chart.foreColor = a), (t.theme.palette = i), t; + }, + }, + { + key: "predefined", + value: function () { + switch (this.w.config.theme.palette) { + case "palette1": + this.colors = ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"]; + break; + case "palette2": + this.colors = ["#3f51b5", "#03a9f4", "#4caf50", "#f9ce1d", "#FF9800"]; + break; + case "palette3": + this.colors = ["#33b2df", "#546E7A", "#d4526e", "#13d8aa", "#A5978B"]; + break; + case "palette4": + this.colors = ["#4ecdc4", "#c7f464", "#81D4FA", "#fd6a6a", "#546E7A"]; + break; + case "palette5": + this.colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"]; + break; + case "palette6": + this.colors = ["#449DD1", "#F86624", "#EA3546", "#662E9B", "#C5D86D"]; + break; + case "palette7": + this.colors = ["#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044"]; + break; + case "palette8": + this.colors = ["#662E9B", "#F86624", "#F9C80E", "#EA3546", "#43BCCD"]; + break; + case "palette9": + this.colors = ["#5C4742", "#A5978B", "#8D5B4C", "#5A2A27", "#C4BBAF"]; + break; + case "palette10": + this.colors = ["#A300D6", "#7D02EB", "#5653FE", "#2983FF", "#00B1F2"]; + break; + default: + this.colors = ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"]; + } + return this.colors; + }, + }, + ]), + t + ); + })(), + gt = (function () { + function t(e) { + n(this, t), (this.w = e.w), (this.ttCtx = e), (this.ctx = e.ctx); + } + return ( + o(t, [ + { + key: "getNearestValues", + value: function (t) { + var e = t.hoverArea, + i = t.elGrid, + a = t.clientX, + s = t.clientY, + n = t.hasBars, + r = this.w, + o = r.globals.gridWidth, + l = o / (r.globals.dataPoints - 1), + h = i.getBoundingClientRect(); + ((n && r.globals.comboCharts) || n) && (l = o / r.globals.dataPoints); + var c = a - h.left, + d = s - h.top; + c < 0 || d < 0 || c > r.globals.gridWidth || d > r.globals.gridHeight + ? (e.classList.remove("hovering-zoom"), e.classList.remove("hovering-pan")) + : r.globals.zoomEnabled + ? (e.classList.remove("hovering-pan"), e.classList.add("hovering-zoom")) + : r.globals.panEnabled && (e.classList.remove("hovering-zoom"), e.classList.add("hovering-pan")); + var u = Math.round(c / l); + n && ((u = Math.ceil(c / l)), (u -= 1)); + for (var f, g = null, p = null, x = [], v = 0; v < r.globals.seriesXvalues.length; v++) x.push([r.globals.seriesXvalues[v][0] - 1e-6].concat(r.globals.seriesXvalues[v])); + return ( + (x = x.map(function (t) { + return t.filter(function (t) { + return t; + }); + })), + (f = r.globals.seriesYvalues.map(function (t) { + return t.filter(function (t) { + return t; + }); + })), + r.globals.isXNumeric && ((g = (p = this.closestInMultiArray(c, d, x, f)).index), (u = p.j), null !== g && ((x = r.globals.seriesXvalues[g]), (u = (p = this.closestInArray(c, x)).index))), + (!u || u < 1) && (u = 0), + { capturedSeries: g, j: u, hoverX: c, hoverY: d } + ); + }, + }, + { + key: "closestInMultiArray", + value: function (t, e, i, a) { + var s = this.w, + n = 0, + r = null, + o = -1; + s.globals.series.length > 1 ? (n = this.getFirstActiveXArray(i)) : (r = 0); + var l = a[n][0], + h = i[n][0], + c = Math.abs(t - h), + d = Math.abs(e - l), + u = d + c; + return ( + a.map(function (s, n) { + s.map(function (s, l) { + var h = Math.abs(e - a[n][l]), + f = Math.abs(t - i[n][l]), + g = f + h; + g < u && ((u = g), (c = f), (d = h), (r = n), (o = l)); + }); + }), + { index: r, j: o } + ); + }, + }, + { + key: "getFirstActiveXArray", + value: function (t) { + for ( + var e = 0, + i = new A(this.ctx), + a = t.map(function (t, e) { + return t.length > 0 ? e : -1; + }), + s = 0; + s < a.length; + s++ + ) { + var n = i.getSeriesTotalByIndex(s); + if (-1 !== a[s] && 0 !== n && !i.seriesHaveSameValues(s)) { + e = a[s]; + break; + } + } + return e; + }, + }, + { + key: "closestInArray", + value: function (t, e) { + for (var i = e[0], a = null, s = Math.abs(t - i), n = 0; n < e.length; n++) { + var r = Math.abs(t - e[n]); + r < s && ((s = r), (i = e[n]), (a = n)); + } + return { index: a }; + }, + }, + { + key: "isXoverlap", + value: function (t) { + var e = [], + i = this.w.globals.seriesX.filter(function (t) { + return void 0 !== t[0]; + }); + if (i.length > 0) for (var a = 0; a < i.length - 1; a++) void 0 !== i[a][t] && void 0 !== i[a + 1][t] && i[a][t] !== i[a + 1][t] && e.push("unEqual"); + return 0 === e.length; + }, + }, + { + key: "isinitialSeriesSameLen", + value: function () { + for (var t = !0, e = this.w.globals.initialSeries, i = 0; i < e.length - 1; i++) + if (e[i].data.length !== e[i + 1].data.length) { + t = !1; + break; + } + return t; + }, + }, + { + key: "getBarsHeight", + value: function (t) { + return g(t).reduce(function (t, e) { + return t + e.getBBox().height; + }, 0); + }, + }, + { + key: "toggleAllTooltipSeriesGroups", + value: function (t) { + var e = this.w, + i = this.ttCtx; + 0 === i.allTooltipSeriesGroups.length && (i.allTooltipSeriesGroups = e.globals.dom.baseEl.querySelectorAll(".apexcharts-tooltip-series-group")); + for (var a = i.allTooltipSeriesGroups, s = 0; s < a.length; s++) + "enable" === t ? (a[s].classList.add("active"), (a[s].style.display = e.config.tooltip.items.display)) : (a[s].classList.remove("active"), (a[s].style.display = "none")); + }, + }, + ]), + t + ); + })(), + pt = (function () { + function t(e) { + n(this, t), (this.w = e.w), (this.ctx = e.ctx), (this.ttCtx = e), (this.tooltipUtil = new gt(e)); + } + return ( + o(t, [ + { + key: "drawSeriesTexts", + value: function (t) { + var e = t.shared, + i = void 0 === e || e, + a = t.ttItems, + s = t.i, + n = void 0 === s ? 0 : s, + r = t.j, + o = void 0 === r ? null : r; + void 0 !== this.w.config.tooltip.custom ? this.handleCustomTooltip({ i: n, j: o }) : this.toggleActiveInactiveSeries(i); + var l = this.getValuesToPrint({ i: n, j: o }); + this.printLabels({ i: n, j: o, values: l, ttItems: a, shared: i }); + var h = this.ttCtx.getElTooltip(); + (this.ttCtx.tooltipRect.ttWidth = h.getBoundingClientRect().width), (this.ttCtx.tooltipRect.ttHeight = h.getBoundingClientRect().height); + }, + }, + { + key: "printLabels", + value: function (t) { + var e, + i = t.i, + a = t.j, + s = t.values, + n = t.ttItems, + r = t.shared, + o = this.w, + l = s.xVal, + h = s.zVal, + c = s.xAxisTTVal, + d = "", + u = o.globals.colors[i]; + null !== a && o.config.plotOptions.bar.distributed && (u = o.globals.colors[a]); + for (var f = 0, g = o.globals.series.length - 1; f < o.globals.series.length; f++, g--) { + var p = this.getFormatters(i); + if (((d = this.getSeriesName({ fn: p.yLbTitleFormatter, index: i, seriesIndex: i, j: a })), r)) { + var x = o.config.tooltip.inverseOrder ? g : f; + (p = this.getFormatters(x)), + (d = this.getSeriesName({ fn: p.yLbTitleFormatter, index: x, seriesIndex: i, j: a })), + (u = o.globals.colors[x]), + (e = p.yLbFormatter(o.globals.series[x][a], { series: o.globals.series, seriesIndex: x, dataPointIndex: a, w: o })), + ((this.ttCtx.hasBars() && o.config.chart.stacked && 0 === o.globals.series[x][a]) || void 0 === o.globals.series[x][a]) && (e = void 0); + } else e = p.yLbFormatter(o.globals.series[i][a], { series: o.globals.series, seriesIndex: i, dataPointIndex: a, w: o }); + null === a && (e = p.yLbFormatter(o.globals.series[i], o)), this.DOMHandling({ t: f, ttItems: n, values: { val: e, xVal: l, xAxisTTVal: c, zVal: h }, seriesName: d, shared: r, pColor: u }); + } + }, + }, + { + key: "getFormatters", + value: function (t) { + var e, + i = this.w, + a = i.globals.yLabelFormatters[t]; + return ( + void 0 !== i.globals.ttVal + ? Array.isArray(i.globals.ttVal) + ? ((a = i.globals.ttVal[t] && i.globals.ttVal[t].formatter), (e = i.globals.ttVal[t] && i.globals.ttVal[t].title && i.globals.ttVal[t].title.formatter)) + : ((a = i.globals.ttVal.formatter), "function" == typeof i.globals.ttVal.title.formatter && (e = i.globals.ttVal.title.formatter)) + : (e = i.config.tooltip.y.title.formatter), + "function" != typeof a && + (a = i.globals.yLabelFormatters[0] + ? i.globals.yLabelFormatters[0] + : function (t) { + return t; + }), + "function" != typeof e && + (e = function (t) { + return t; + }), + { yLbFormatter: a, yLbTitleFormatter: e } + ); + }, + }, + { + key: "getSeriesName", + value: function (t) { + var e = t.fn, + i = t.index, + a = t.seriesIndex, + s = t.j, + n = this.w; + return e(String(n.globals.seriesNames[i]), { series: n.globals.series, seriesIndex: a, dataPointIndex: s, w: n }); + }, + }, + { + key: "DOMHandling", + value: function (t) { + var e = t.t, + i = t.ttItems, + a = t.values, + s = t.seriesName, + n = t.shared, + r = t.pColor, + o = this.w, + l = this.ttCtx, + h = a.val, + c = a.xVal, + d = a.xAxisTTVal, + u = a.zVal, + f = null; + (f = i[e].children), + o.config.tooltip.fillSeriesColor && ((i[e].style.backgroundColor = r), (f[0].style.display = "none")), + l.showTooltipTitle && (null === l.tooltipTitle && (l.tooltipTitle = o.globals.dom.baseEl.querySelector(".apexcharts-tooltip-title")), (l.tooltipTitle.innerHTML = c)), + l.blxaxisTooltip && (l.xaxisTooltipText.innerHTML = "" !== d ? d : c); + var g = i[e].querySelector(".apexcharts-tooltip-text-label"); + g && (g.innerHTML = s ? s + ": " : ""); + var p = i[e].querySelector(".apexcharts-tooltip-text-value"); + (p && (p.innerHTML = h), f[0] && f[0].classList.contains("apexcharts-tooltip-marker") && (f[0].style.backgroundColor = r), o.config.tooltip.marker.show || (f[0].style.display = "none"), null !== u) && + ((i[e].querySelector(".apexcharts-tooltip-text-z-label").innerHTML = o.config.tooltip.z.title), (i[e].querySelector(".apexcharts-tooltip-text-z-value").innerHTML = u)); + n && f[0] && (null == h || o.globals.collapsedSeriesIndices.indexOf(e) > -1 ? (f[0].parentNode.style.display = "none") : (f[0].parentNode.style.display = o.config.tooltip.items.display)); + }, + }, + { + key: "toggleActiveInactiveSeries", + value: function (t) { + var e = this.w; + if (t) this.tooltipUtil.toggleAllTooltipSeriesGroups("enable"); + else { + this.tooltipUtil.toggleAllTooltipSeriesGroups("disable"); + var i = e.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group"); + i && (i.classList.add("active"), (i.style.display = e.config.tooltip.items.display)); + } + }, + }, + { + key: "getValuesToPrint", + value: function (t) { + var e = t.i, + i = t.j, + a = this.w, + s = this.ctx.series.filteredSeriesX(), + n = "", + r = null, + o = null, + l = { series: a.globals.series, seriesIndex: e, dataPointIndex: i, w: a }, + h = a.globals.ttZFormatter; + null === i + ? (o = a.globals.series[e]) + : a.globals.isXNumeric + ? ((n = s[e][i]), 0 === s[e].length && (n = s[this.tooltipUtil.getFirstActiveXArray(s)][i])) + : (n = void 0 !== a.globals.labels[i] ? a.globals.labels[i] : ""); + var c = n; + a.globals.isXNumeric && "datetime" === a.config.xaxis.type ? (n = new _(this.ctx).xLabelFormat(a.globals.ttKeyFormatter, c)) : (n = a.globals.xLabelFormatter(c, l)); + return ( + void 0 !== a.config.tooltip.x.formatter && (n = a.globals.ttKeyFormatter(c, l)), + a.globals.seriesZ.length > 0 && a.globals.seriesZ[0].length > 0 && (r = h(a.globals.seriesZ[e][i], a)), + { val: o, xVal: n, xAxisTTVal: "function" == typeof a.config.xaxis.tooltip.formatter ? a.globals.xaxisTooltipFormatter(c, l) : n, zVal: r } + ); + }, + }, + { + key: "handleCustomTooltip", + value: function (t) { + var e = t.i, + i = t.j, + a = this.w; + this.ttCtx.getElTooltip().innerHTML = a.config.tooltip.custom({ ctx: this.ctx, series: a.globals.series, seriesIndex: e, dataPointIndex: i, w: a }); + }, + }, + ]), + t + ); + })(), + xt = (function () { + function t(e) { + n(this, t), (this.ttCtx = e), (this.ctx = e.ctx), (this.w = e.w); + } + return ( + o(t, [ + { + key: "moveXCrosshairs", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null, + i = this.ttCtx, + a = this.w, + s = i.getElXCrosshairs(), + n = t - i.xcrosshairsWidth / 2, + r = a.globals.labels.slice().length; + if ( + (null !== e && (n = (a.globals.gridWidth / r) * e), + "tickWidth" === a.config.xaxis.crosshairs.width || "barWidth" === a.config.xaxis.crosshairs.width + ? n + i.xcrosshairsWidth > a.globals.gridWidth && (n = a.globals.gridWidth - i.xcrosshairsWidth) + : null !== e && (n += a.globals.gridWidth / r / 2), + n < 0 && (n = 0), + n > a.globals.gridWidth && (n = a.globals.gridWidth), + null !== s && (s.setAttribute("x", n), s.setAttribute("x1", n), s.setAttribute("x2", n), s.setAttribute("y2", a.globals.gridHeight), s.classList.add("active")), + i.blxaxisTooltip) + ) { + var o = n; + ("tickWidth" !== a.config.xaxis.crosshairs.width && "barWidth" !== a.config.xaxis.crosshairs.width) || (o = n + i.xcrosshairsWidth / 2), this.moveXAxisTooltip(o); + } + }, + }, + { + key: "moveYCrosshairs", + value: function (t) { + var e = this.ttCtx; + null !== e.ycrosshairs && (m.setAttrs(e.ycrosshairs, { y1: t, y2: t }), m.setAttrs(e.ycrosshairsHidden, { y1: t, y2: t })); + }, + }, + { + key: "moveXAxisTooltip", + value: function (t) { + var e = this.w, + i = this.ttCtx; + if (null !== i.xaxisTooltip) { + i.xaxisTooltip.classList.add("active"); + var a = i.xaxisOffY + e.config.xaxis.tooltip.offsetY + e.globals.translateY + 1 + e.config.xaxis.offsetY; + if (((t -= i.xaxisTooltip.getBoundingClientRect().width / 2), !isNaN(t))) { + t += e.globals.translateX; + var s; + (s = new m(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML)), + (i.xaxisTooltipText.style.minWidth = s.width + "px"), + (i.xaxisTooltip.style.left = t + "px"), + (i.xaxisTooltip.style.top = a + "px"); + } + } + }, + }, + { + key: "moveYAxisTooltip", + value: function (t) { + var e = this.w, + i = this.ttCtx; + null === i.yaxisTTEls && (i.yaxisTTEls = e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip")); + var a = parseInt(i.ycrosshairsHidden.getAttribute("y1")), + s = e.globals.translateY + a, + n = i.yaxisTTEls[t].getBoundingClientRect().height, + r = e.globals.translateYAxisX[t] - 2; + e.config.yaxis[t].opposite && (r -= 26), + (s -= n / 2), + -1 === e.globals.ignoreYAxisIndexes.indexOf(t) + ? (i.yaxisTTEls[t].classList.add("active"), (i.yaxisTTEls[t].style.top = s + "px"), (i.yaxisTTEls[t].style.left = r + e.config.yaxis[t].tooltip.offsetX + "px")) + : i.yaxisTTEls[t].classList.remove("active"); + }, + }, + { + key: "moveTooltip", + value: function (t, e) { + var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null, + a = this.w, + s = this.ttCtx, + n = s.getElTooltip(), + r = s.tooltipRect, + o = null !== i ? parseInt(i) : 1, + l = parseInt(t) + o + 5, + h = parseInt(e) + o / 2; + if ((l > a.globals.gridWidth / 2 && (l = l - r.ttWidth - o - 15), l > a.globals.gridWidth - r.ttWidth - 10 && (l = a.globals.gridWidth - r.ttWidth), l < -20 && (l = -20), a.config.tooltip.followCursor)) { + var c = s.getElGrid().getBoundingClientRect(); + h = s.e.clientY + a.globals.translateY - c.top - r.ttHeight / 2; + } + var d = this.positionChecks(r, l, h); + (l = d.x), (h = d.y), isNaN(l) || ((l += a.globals.translateX), (n.style.left = l + "px"), (n.style.top = h + "px")); + }, + }, + { + key: "positionChecks", + value: function (t, e, i) { + var a = this.w; + return t.ttHeight + i > a.globals.gridHeight && (i = a.globals.gridHeight - t.ttHeight + a.globals.translateY), i < 0 && (i = 0), { x: e, y: i }; + }, + }, + { + key: "moveMarkers", + value: function (t, e) { + var i = this.w, + a = this.ttCtx; + if (i.globals.markers.size[t] > 0) + for (var s = i.globals.dom.baseEl.querySelectorAll(" .apexcharts-series[data\\:realIndex='".concat(t, "'] .apexcharts-marker")), n = 0; n < s.length; n++) + parseInt(s[n].getAttribute("rel")) === e && (a.marker.resetPointsSize(), a.marker.enlargeCurrentPoint(e, s[n])); + else a.marker.resetPointsSize(), this.moveDynamicPointOnHover(e, t); + }, + }, + { + key: "moveDynamicPointOnHover", + value: function (t, e) { + var i, + a, + s = this.w, + n = this.ttCtx, + r = s.globals.pointsArray, + o = s.config.markers.hover.size; + void 0 === o && (o = s.globals.markers.size[e] + s.config.markers.hover.sizeOffset), (i = r[e][t][0]), (a = r[e][t][1] ? r[e][t][1] : 0); + var l = s.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(e, "'] .apexcharts-series-markers circle")); + l && (l.setAttribute("r", o), l.setAttribute("cx", i), l.setAttribute("cy", a)), this.moveXCrosshairs(i), n.fixedTooltip || this.moveTooltip(i, a, o); + }, + }, + { + key: "moveDynamicPointsOnHover", + value: function (t) { + var e, + i = this.ttCtx, + a = i.w, + s = 0, + n = 0, + r = a.globals.pointsArray; + e = new G(this.ctx).getActiveSeriesIndex(); + var o = a.config.markers.hover.size; + void 0 === o && (o = a.globals.markers.size[e] + a.config.markers.hover.sizeOffset), r[e] && ((s = r[e][t][0]), (n = r[e][t][1])); + var l = null, + h = i.getAllMarkers(); + if (null !== (l = null !== h ? h : a.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers circle"))) + for (var c = 0; c < l.length; c++) { + var d = r[c]; + if (d && d.length) { + var u = r[c][t][1]; + l[c].setAttribute("cx", s); + var f = parseInt(l[c].parentNode.parentNode.parentNode.getAttribute("data:realIndex")); + null !== u ? (l[f] && l[f].setAttribute("r", o), l[f] && l[f].setAttribute("cy", u)) : l[f] && l[f].setAttribute("r", 0); + } + } + if ((this.moveXCrosshairs(s), !i.fixedTooltip)) { + var g = n || a.globals.gridHeight; + this.moveTooltip(s, g, o); + } + }, + }, + { + key: "moveStickyTooltipOverBars", + value: function (t) { + var e, + i = this.w, + a = this.ttCtx, + s = i.globals.dom.baseEl.querySelector( + ".apexcharts-bar-series .apexcharts-series[rel='1'] path[j='" + .concat(t, "'], .apexcharts-candlestick-series .apexcharts-series[rel='1'] path[j='") + .concat(t, "'], .apexcharts-rangebar-series .apexcharts-series[rel='1'] path[j='") + .concat(t, "']") + ), + n = s ? parseFloat(s.getAttribute("cx")) : 0, + r = s ? parseFloat(s.getAttribute("barWidth")) : 0; + i.globals.isXNumeric ? (n -= r / 2) : ((n = a.xAxisTicksPositions[t - 1] + a.dataPointsDividedWidth / 2), isNaN(n) && (n = a.xAxisTicksPositions[t] - a.dataPointsDividedWidth / 2)); + var o = a.getElGrid().getBoundingClientRect(); + if (((e = a.e.clientY - o.top - a.tooltipRect.ttHeight / 2), this.moveXCrosshairs(n), !a.fixedTooltip)) { + var l = e || i.globals.gridHeight; + this.moveTooltip(n, l); + } + }, + }, + ]), + t + ); + })(), + vt = (function () { + function t(e) { + n(this, t), (this.w = e.w), (this.ttCtx = e), (this.ctx = e.ctx), (this.tooltipPosition = new xt(e)); + } + return ( + o(t, [ + { + key: "drawDynamicPoints", + value: function () { + for (var t = this.w, e = new m(this.ctx), i = new T(this.ctx), a = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series"), s = 0; s < a.length; s++) { + var n = parseInt(a[s].getAttribute("data:realIndex")), + r = t.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(n, "'] .apexcharts-series-markers-wrap")); + if (null !== r) { + var o = void 0, + l = "apexcharts-marker w".concat((Math.random() + 1).toString(36).substring(4)); + ("line" !== t.config.chart.type && "area" !== t.config.chart.type) || t.globals.comboCharts || t.config.tooltip.intersect || (l += " no-pointer-events"); + var h = i.getMarkerConfig(l, n); + (o = e.drawMarker(0, 0, h)).node.setAttribute("default-marker-size", 0); + var c = document.createElementNS(t.globals.SVGNS, "g"); + c.classList.add("apexcharts-series-markers"), c.appendChild(o.node), r.appendChild(c); + } + } + }, + }, + { + key: "enlargeCurrentPoint", + value: function (t, e) { + var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null, + a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : null, + s = this.w; + "bubble" !== s.config.chart.type && this.newPointSize(t, e); + var n = e.getAttribute("cx"), + r = e.getAttribute("cy"); + if ((null !== i && null !== a && ((n = i), (r = a)), this.tooltipPosition.moveXCrosshairs(n), !this.fixedTooltip)) { + if ("radar" === s.config.chart.type) { + var o = this.ttCtx.getElGrid().getBoundingClientRect(); + n = this.ttCtx.e.clientX - o.left; + } + this.tooltipPosition.moveTooltip(n, r, s.config.markers.hover.size); + } + }, + }, + { + key: "enlargePoints", + value: function (t) { + for ( + var e = this.w, i = this.ttCtx, a = t, s = e.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"), n = e.config.markers.hover.size, r = 0; + r < s.length; + r++ + ) { + var o = s[r].getAttribute("rel"), + l = s[r].getAttribute("index"); + if ((void 0 === n && (n = e.globals.markers.size[l] + e.config.markers.hover.sizeOffset), a === parseInt(o))) { + this.newPointSize(a, s[r]); + var h = s[r].getAttribute("cx"), + c = s[r].getAttribute("cy"); + this.tooltipPosition.moveXCrosshairs(h), i.fixedTooltip || this.tooltipPosition.moveTooltip(h, c, n); + } else this.oldPointSize(s[r]); + } + }, + }, + { + key: "newPointSize", + value: function (t, e) { + var i = this.w, + a = i.config.markers.hover.size, + s = null; + s = 0 === t ? e.parentNode.firstChild : e.parentNode.lastChild; + var n = parseInt(s.getAttribute("index")); + void 0 === a && (a = i.globals.markers.size[n] + i.config.markers.hover.sizeOffset), s.setAttribute("r", a); + }, + }, + { + key: "oldPointSize", + value: function (t) { + var e = parseInt(t.getAttribute("default-marker-size")); + t.setAttribute("r", e); + }, + }, + { + key: "resetPointsSize", + value: function () { + for (var t = this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"), e = 0; e < t.length; e++) { + var i = parseInt(t[e].getAttribute("default-marker-size")); + p.isNumber(i) ? t[e].setAttribute("r", i) : t[e].setAttribute("r", 0); + } + }, + }, + ]), + t + ); + })(), + mt = (function () { + function t(e) { + n(this, t), (this.w = e.w), (this.ttCtx = e); + } + return ( + o(t, [ + { + key: "getAttr", + value: function (t, e) { + return parseFloat(t.target.getAttribute(e)); + }, + }, + { + key: "handleHeatTooltip", + value: function (t) { + var e = t.e, + i = t.opt, + a = t.x, + s = t.y, + n = this.ttCtx, + r = this.w; + if (e.target.classList.contains("apexcharts-heatmap-rect")) { + var o = this.getAttr(e, "i"), + l = this.getAttr(e, "j"), + h = this.getAttr(e, "cx"), + c = this.getAttr(e, "cy"), + d = this.getAttr(e, "width"), + u = this.getAttr(e, "height"); + if ( + (n.tooltipLabels.drawSeriesTexts({ ttItems: i.ttItems, i: o, j: l, shared: !1 }), + (a = h + n.tooltipRect.ttWidth / 2 + d), + (s = c + n.tooltipRect.ttHeight / 2 - u / 2), + n.tooltipPosition.moveXCrosshairs(h + d / 2), + a > r.globals.gridWidth / 2 && (a = h - n.tooltipRect.ttWidth / 2 + d), + n.w.config.tooltip.followCursor) + ) { + var f = n.getElGrid().getBoundingClientRect(); + s = n.e.clientY - f.top + r.globals.translateY / 2 - 10; + } + } + return { x: a, y: s }; + }, + }, + { + key: "handleMarkerTooltip", + value: function (t) { + var e, + i, + a = t.e, + s = t.opt, + n = t.x, + r = t.y, + o = this.w, + l = this.ttCtx; + if (a.target.classList.contains("apexcharts-marker")) { + var h = parseInt(s.paths.getAttribute("cx")), + c = parseInt(s.paths.getAttribute("cy")), + d = parseFloat(s.paths.getAttribute("val")); + if (((i = parseInt(s.paths.getAttribute("rel"))), (e = parseInt(s.paths.parentNode.parentNode.parentNode.getAttribute("rel")) - 1), l.intersect)) { + var u = p.findAncestor(s.paths, "apexcharts-series"); + u && (e = parseInt(u.getAttribute("data:realIndex"))); + } + if ( + (l.tooltipLabels.drawSeriesTexts({ ttItems: s.ttItems, i: e, j: i, shared: !l.showOnIntersect && o.config.tooltip.shared }), + "mouseup" === a.type && l.markerClick(a, e, i), + (n = h), + (r = c + o.globals.translateY - 1.4 * l.tooltipRect.ttHeight), + l.w.config.tooltip.followCursor) + ) { + var f = l.getElGrid().getBoundingClientRect(); + r = l.e.clientY + o.globals.translateY - f.top; + } + d < 0 && (r = c), l.marker.enlargeCurrentPoint(i, s.paths, n, r); + } + return { x: n, y: r }; + }, + }, + { + key: "handleBarTooltip", + value: function (t) { + var e, + i, + a = t.e, + s = t.opt, + n = this.w, + r = this.ttCtx, + o = r.getElTooltip(), + l = 0, + h = 0, + c = 0, + d = this.getBarTooltipXY({ e: a, opt: s }); + e = d.i; + var u = d.barHeight, + f = d.j; + if ( + ((n.globals.isBarHorizontal && r.hasBars()) || !n.config.tooltip.shared + ? ((h = d.x), (c = d.y), (i = Array.isArray(n.config.stroke.width) ? n.config.stroke.width[e] : n.config.stroke.width), (l = h)) + : n.globals.comboCharts || n.config.tooltip.shared || (l /= 2), + isNaN(c) && (c = n.globals.svgHeight - r.tooltipRect.ttHeight), + h + r.tooltipRect.ttWidth > n.globals.gridWidth ? (h -= r.tooltipRect.ttWidth) : h < 0 && (h += r.tooltipRect.ttWidth), + r.w.config.tooltip.followCursor) + ) { + var g = r.getElGrid().getBoundingClientRect(); + c = r.e.clientY - g.top; + } + if ( + (null === r.tooltip && (r.tooltip = n.globals.dom.baseEl.querySelector(".apexcharts-tooltip")), + n.config.tooltip.shared || (n.globals.comboChartsHasBars ? r.tooltipPosition.moveXCrosshairs(l + i / 2) : r.tooltipPosition.moveXCrosshairs(l)), + !r.fixedTooltip && (!n.config.tooltip.shared || (n.globals.isBarHorizontal && r.hasBars()))) + ) { + x && (h = n.globals.gridWidth - h), (o.style.left = h + n.globals.translateX + "px"); + var p = parseInt(s.paths.parentNode.getAttribute("data:realIndex")), + x = n.globals.isMultipleYAxis ? n.config.yaxis[p] && n.config.yaxis[p].reversed : n.config.yaxis[0].reversed; + !x || (n.globals.isBarHorizontal && r.hasBars()) || (c = c + u - 2 * (n.globals.series[e][f] < 0 ? u : 0)), + r.tooltipRect.ttHeight + c > n.globals.gridHeight + ? ((c = n.globals.gridHeight - r.tooltipRect.ttHeight + n.globals.translateY), (o.style.top = c + "px")) + : (o.style.top = c + n.globals.translateY - r.tooltipRect.ttHeight / 2 + "px"); + } + }, + }, + { + key: "getBarTooltipXY", + value: function (t) { + var e = t.e, + i = t.opt, + a = this.w, + s = null, + n = this.ttCtx, + r = 0, + o = 0, + l = 0, + h = 0, + c = 0, + d = e.target.classList; + if (d.contains("apexcharts-bar-area") || d.contains("apexcharts-candlestick-area") || d.contains("apexcharts-rangebar-area")) { + var u = e.target, + f = u.getBoundingClientRect(), + g = i.elGrid.getBoundingClientRect(), + p = f.height; + c = f.height; + var x = f.width, + v = parseInt(u.getAttribute("cx")), + m = parseInt(u.getAttribute("cy")); + h = parseFloat(u.getAttribute("barWidth")); + var b = "touchmove" === e.type ? e.touches[0].clientX : e.clientX; + (s = parseInt(u.getAttribute("j"))), + (r = parseInt(u.parentNode.getAttribute("rel")) - 1), + a.globals.comboCharts && (r = parseInt(u.parentNode.getAttribute("data:realIndex"))), + n.tooltipLabels.drawSeriesTexts({ ttItems: i.ttItems, i: r, j: s, shared: !n.showOnIntersect && a.config.tooltip.shared }), + a.config.tooltip.followCursor + ? a.globals.isBarHorizontal + ? ((o = b - g.left + 15), (l = m - n.dataPointsDividedHeight + p / 2 - n.tooltipRect.ttHeight / 2)) + : ((o = a.globals.isXNumeric ? v - x / 2 : v - n.dataPointsDividedWidth + x / 2), (l = e.clientY - g.top - n.tooltipRect.ttHeight / 2 - 15)) + : a.globals.isBarHorizontal + ? ((o = v) < n.xyRatios.baseLineInvertedY && (o = v - n.tooltipRect.ttWidth), (l = m - n.dataPointsDividedHeight + p / 2 - n.tooltipRect.ttHeight / 2)) + : ((o = a.globals.isXNumeric ? v - x / 2 : v - n.dataPointsDividedWidth + x / 2), (l = m)); + } + return { x: o, y: l, barHeight: c, barWidth: h, i: r, j: s }; + }, + }, + ]), + t + ); + })(), + bt = (function () { + function t(e) { + n(this, t), (this.w = e.w), (this.ttCtx = e); + } + return ( + o(t, [ + { + key: "drawXaxisTooltip", + value: function () { + var t = this.w, + e = this.ttCtx, + i = "bottom" === t.config.xaxis.position; + e.xaxisOffY = i ? t.globals.gridHeight + 1 : 1; + var a = i ? "apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom" : "apexcharts-xaxistooltip apexcharts-xaxistooltip-top", + s = t.globals.dom.elWrap; + e.blxaxisTooltip && + null === t.globals.dom.baseEl.querySelector(".apexcharts-xaxistooltip") && + ((e.xaxisTooltip = document.createElement("div")), + e.xaxisTooltip.setAttribute("class", a + " " + t.config.tooltip.theme), + s.appendChild(e.xaxisTooltip), + (e.xaxisTooltipText = document.createElement("div")), + e.xaxisTooltipText.classList.add("apexcharts-xaxistooltip-text"), + (e.xaxisTooltipText.style.fontFamily = t.config.xaxis.tooltip.style.fontFamily || t.config.chart.fontFamily), + (e.xaxisTooltipText.style.fontSize = t.config.xaxis.tooltip.style.fontSize), + e.xaxisTooltip.appendChild(e.xaxisTooltipText)); + }, + }, + { + key: "drawYaxisTooltip", + value: function () { + for (var t = this.w, e = this.ttCtx, i = 0; i < t.config.yaxis.length; i++) { + var a = t.config.yaxis[i].opposite || t.config.yaxis[i].crosshairs.opposite; + e.yaxisOffX = a ? t.globals.gridWidth + 1 : 1; + var s = "apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i, a ? " apexcharts-yaxistooltip-right" : " apexcharts-yaxistooltip-left"), + n = t.globals.dom.elWrap; + if (e.blyaxisTooltip) + null === t.globals.dom.baseEl.querySelector(".apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i)) && + ((e.yaxisTooltip = document.createElement("div")), + e.yaxisTooltip.setAttribute("class", s + " " + t.config.tooltip.theme), + n.appendChild(e.yaxisTooltip), + 0 === i && (e.yaxisTooltipText = []), + e.yaxisTooltipText.push(document.createElement("div")), + e.yaxisTooltipText[i].classList.add("apexcharts-yaxistooltip-text"), + e.yaxisTooltip.appendChild(e.yaxisTooltipText[i])); + } + }, + }, + { + key: "setXCrosshairWidth", + value: function () { + var t = this.w, + e = this.ttCtx, + i = e.getElXCrosshairs(); + if (((e.xcrosshairsWidth = parseInt(t.config.xaxis.crosshairs.width)), t.globals.comboCharts)) { + var a = t.globals.dom.baseEl.querySelector(".apexcharts-bar-area"); + if (null !== a && "barWidth" === t.config.xaxis.crosshairs.width) { + var s = parseFloat(a.getAttribute("barWidth")); + e.xcrosshairsWidth = s; + } else if ("tickWidth" === t.config.xaxis.crosshairs.width) { + var n = t.globals.labels.length; + e.xcrosshairsWidth = t.globals.gridWidth / n; + } + } else if ("tickWidth" === t.config.xaxis.crosshairs.width) { + var r = t.globals.labels.length; + e.xcrosshairsWidth = t.globals.gridWidth / r; + } else if ("barWidth" === t.config.xaxis.crosshairs.width) { + var o = t.globals.dom.baseEl.querySelector(".apexcharts-bar-area"); + if (null !== o) { + var l = parseFloat(o.getAttribute("barWidth")); + e.xcrosshairsWidth = l; + } else e.xcrosshairsWidth = 1; + } + t.globals.isBarHorizontal && (e.xcrosshairsWidth = 0), null !== i && e.xcrosshairsWidth > 0 && i.setAttribute("width", e.xcrosshairsWidth); + }, + }, + { + key: "handleYCrosshair", + value: function () { + var t = this.w, + e = this.ttCtx; + (e.ycrosshairs = t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs")), (e.ycrosshairsHidden = t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs-hidden")); + }, + }, + { + key: "drawYaxisTooltipText", + value: function (t, e, i) { + var a = this.ttCtx, + s = this.w, + n = s.globals.yLabelFormatters[t]; + if (a.blyaxisTooltip) { + var r = a.getElGrid().getBoundingClientRect(), + o = (e - r.top) * i.yRatio[t], + l = s.globals.maxYArr[t] - s.globals.minYArr[t], + h = s.globals.minYArr[t] + (l - o); + a.tooltipPosition.moveYCrosshairs(e - r.top), (a.yaxisTooltipText[t].innerHTML = n(h)), a.tooltipPosition.moveYAxisTooltip(t); + } + }, + }, + ]), + t + ); + })(), + yt = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + var i = this.w; + (this.tConfig = i.config.tooltip), + (this.tooltipUtil = new gt(this)), + (this.tooltipLabels = new pt(this)), + (this.tooltipPosition = new xt(this)), + (this.marker = new vt(this)), + (this.intersect = new mt(this)), + (this.axesTooltip = new bt(this)), + (this.showOnIntersect = this.tConfig.intersect), + (this.showTooltipTitle = this.tConfig.x.show), + (this.fixedTooltip = this.tConfig.fixed.enabled), + (this.xaxisTooltip = null), + (this.yaxisTTEls = null), + (this.isBarShared = !i.globals.isBarHorizontal && this.tConfig.shared); + } + return ( + o(t, [ + { + key: "getElTooltip", + value: function (t) { + return t || (t = this), t.w.globals.dom.baseEl.querySelector(".apexcharts-tooltip"); + }, + }, + { + key: "getElXCrosshairs", + value: function () { + return this.w.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs"); + }, + }, + { + key: "getElGrid", + value: function () { + return this.w.globals.dom.baseEl.querySelector(".apexcharts-grid"); + }, + }, + { + key: "drawTooltip", + value: function (t) { + var e = this.w; + (this.xyRatios = t), + (this.blxaxisTooltip = e.config.xaxis.tooltip.enabled && e.globals.axisCharts), + (this.blyaxisTooltip = e.config.yaxis[0].tooltip.enabled && e.globals.axisCharts), + (this.allTooltipSeriesGroups = []), + e.globals.axisCharts || (this.showTooltipTitle = !1); + var i = document.createElement("div"); + if ((i.classList.add("apexcharts-tooltip"), i.classList.add(this.tConfig.theme), e.globals.dom.elWrap.appendChild(i), e.globals.axisCharts)) { + this.axesTooltip.drawXaxisTooltip(), this.axesTooltip.drawYaxisTooltip(), this.axesTooltip.setXCrosshairWidth(), this.axesTooltip.handleYCrosshair(); + var a = new q(this.ctx); + this.xAxisTicksPositions = a.getXAxisTicksPositions(); + } + if ( + (((e.globals.comboCharts && !this.tConfig.shared) || + (this.tConfig.intersect && !this.tConfig.shared) || + (("bar" === e.config.chart.type || "rangeBar" === e.config.chart.type) && !this.tConfig.shared)) && + (this.showOnIntersect = !0), + (0 !== e.config.markers.size && 0 !== e.globals.markers.largestSize) || this.marker.drawDynamicPoints(this), + e.globals.collapsedSeries.length !== e.globals.series.length) + ) { + (this.dataPointsDividedHeight = e.globals.gridHeight / e.globals.dataPoints), + (this.dataPointsDividedWidth = e.globals.gridWidth / e.globals.dataPoints), + this.showTooltipTitle && + ((this.tooltipTitle = document.createElement("div")), + this.tooltipTitle.classList.add("apexcharts-tooltip-title"), + (this.tooltipTitle.style.fontFamily = this.tConfig.style.fontFamily || e.config.chart.fontFamily), + (this.tooltipTitle.style.fontSize = this.tConfig.style.fontSize), + i.appendChild(this.tooltipTitle)); + var s = e.globals.series.length; + (e.globals.xyCharts || e.globals.comboCharts) && this.tConfig.shared && (s = this.showOnIntersect ? 1 : e.globals.series.length), (this.ttItems = this.createTTElements(s)), this.addSVGEvents(); + } + }, + }, + { + key: "createTTElements", + value: function (t) { + for (var e = this.w, i = [], a = this.getElTooltip(), s = 0; s < t; s++) { + var n = document.createElement("div"); + n.classList.add("apexcharts-tooltip-series-group"), + this.tConfig.shared && + this.tConfig.enabledOnSeries && + Array.isArray(this.tConfig.enabledOnSeries) && + this.tConfig.enabledOnSeries.indexOf(s) < 0 && + n.classList.add("apexcharts-tooltip-series-group-hidden"); + var r = document.createElement("span"); + r.classList.add("apexcharts-tooltip-marker"), (r.style.backgroundColor = e.globals.colors[s]), n.appendChild(r); + var o = document.createElement("div"); + o.classList.add("apexcharts-tooltip-text"), (o.style.fontFamily = this.tConfig.style.fontFamily || e.config.chart.fontFamily), (o.style.fontSize = this.tConfig.style.fontSize); + var l = document.createElement("div"); + l.classList.add("apexcharts-tooltip-y-group"); + var h = document.createElement("span"); + h.classList.add("apexcharts-tooltip-text-label"), l.appendChild(h); + var c = document.createElement("span"); + c.classList.add("apexcharts-tooltip-text-value"), l.appendChild(c); + var d = document.createElement("div"); + d.classList.add("apexcharts-tooltip-z-group"); + var u = document.createElement("span"); + u.classList.add("apexcharts-tooltip-text-z-label"), d.appendChild(u); + var f = document.createElement("span"); + f.classList.add("apexcharts-tooltip-text-z-value"), d.appendChild(f), o.appendChild(l), o.appendChild(d), n.appendChild(o), a.appendChild(n), i.push(n); + } + return i; + }, + }, + { + key: "addSVGEvents", + value: function () { + var t = this.w, + e = t.config.chart.type, + i = this.getElTooltip(), + a = !("bar" !== e && "candlestick" !== e && "rangeBar" !== e), + s = t.globals.dom.Paper.node, + n = this.getElGrid(); + n && (this.seriesBound = n.getBoundingClientRect()); + var r, + o = [], + l = [], + h = { hoverArea: s, elGrid: n, tooltipEl: i, tooltipY: o, tooltipX: l, ttItems: this.ttItems }; + if ( + t.globals.axisCharts && + ("area" === e || "line" === e || "scatter" === e || "bubble" === e + ? (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series[data\\:longestSeries='true'] .apexcharts-marker")) + : a + ? (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-bar-area, .apexcharts-series .apexcharts-candlestick-area, .apexcharts-series .apexcharts-rangebar-area")) + : "heatmap" === e + ? (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-heatmap")) + : "radar" === e && (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-marker")), + r && r.length) + ) + for (var c = 0; c < r.length; c++) o.push(r[c].getAttribute("cy")), l.push(r[c].getAttribute("cx")); + if ((t.globals.xyCharts && !this.showOnIntersect) || (t.globals.comboCharts && !this.showOnIntersect) || (a && this.hasBars() && this.tConfig.shared)) this.addPathsEventListeners([s], h); + else if (a && !t.globals.comboCharts) this.addBarsEventListeners(h); + else if ("bubble" === e || "scatter" === e || "radar" === e || (this.showOnIntersect && ("area" === e || "line" === e))) this.addPointsEventsListeners(h); + else if (!t.globals.axisCharts || "heatmap" === e) { + var d = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series"); + this.addPathsEventListeners(d, h); + } + if (this.showOnIntersect) { + var u = t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-marker"); + u.length > 0 && this.addPathsEventListeners(u, h); + var f = t.globals.dom.baseEl.querySelectorAll(".apexcharts-area-series .apexcharts-marker"); + f.length > 0 && this.addPathsEventListeners(f, h), this.hasBars() && !this.tConfig.shared && this.addBarsEventListeners(h); + } + }, + }, + { + key: "drawFixedTooltipRect", + value: function () { + var t = this.w, + e = this.getElTooltip(), + i = e.getBoundingClientRect(), + a = i.width + 10, + s = i.height + 10, + n = this.tConfig.fixed.offsetX, + r = this.tConfig.fixed.offsetY; + return ( + this.tConfig.fixed.position.toLowerCase().indexOf("right") > -1 && (n = n + t.globals.svgWidth - a + 10), + this.tConfig.fixed.position.toLowerCase().indexOf("bottom") > -1 && (r = r + t.globals.svgHeight - s - 10), + (e.style.left = n + "px"), + (e.style.top = r + "px"), + { x: n, y: r, ttWidth: a, ttHeight: s } + ); + }, + }, + { + key: "addPointsEventsListeners", + value: function (t) { + var e = this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker"); + this.addPathsEventListeners(e, t); + }, + }, + { + key: "addBarsEventListeners", + value: function (t) { + var e = this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-area, .apexcharts-candlestick-area, .apexcharts-rangebar-area"); + this.addPathsEventListeners(e, t); + }, + }, + { + key: "addPathsEventListeners", + value: function (t, e) { + for ( + var i = this, + a = this, + s = function (s) { + var n = { paths: t[s], tooltipEl: e.tooltipEl, tooltipY: e.tooltipY, tooltipX: e.tooltipX, elGrid: e.elGrid, hoverArea: e.hoverArea, ttItems: e.ttItems }; + i.w.globals.tooltipOpts = n; + ["mousemove", "mouseup", "touchmove", "mouseout", "touchend"].map(function (e) { + return t[s].addEventListener(e, a.seriesHover.bind(a, n), { capture: !1, passive: !0 }); + }); + }, + n = 0; + n < t.length; + n++ + ) + s(n); + }, + }, + { + key: "seriesHover", + value: function (t, e) { + var i = this, + a = [], + s = this.w; + s.config.chart.group && (a = this.ctx.getGroupedCharts()), + (s.globals.axisCharts && ((s.globals.minX === -1 / 0 && s.globals.maxX === 1 / 0) || 0 === s.globals.dataPoints)) || + (a.length + ? a.forEach(function (a) { + var s = i.getElTooltip(a), + n = { paths: t.paths, tooltipEl: s, tooltipY: t.tooltipY, tooltipX: t.tooltipX, elGrid: t.elGrid, hoverArea: t.hoverArea, ttItems: a.w.globals.tooltip.ttItems }; + a.w.globals.minX === i.w.globals.minX && a.w.globals.maxX === i.w.globals.maxX && a.w.globals.tooltip.seriesHoverByContext({ chartCtx: a, ttCtx: a.w.globals.tooltip, opt: n, e: e }); + }) + : this.seriesHoverByContext({ chartCtx: this.ctx, ttCtx: this.w.globals.tooltip, opt: t, e: e })); + }, + }, + { + key: "seriesHoverByContext", + value: function (t) { + var e = t.chartCtx, + i = t.ttCtx, + a = t.opt, + s = t.e, + n = e.w, + r = this.getElTooltip(); + ((i.tooltipRect = { x: 0, y: 0, ttWidth: r.getBoundingClientRect().width, ttHeight: r.getBoundingClientRect().height }), (i.e = s), !i.hasBars() || n.globals.comboCharts || i.isBarShared) || + (this.tConfig.onDatasetHover.highlightDataSeries && new G(e).toggleSeriesOnHover(s, s.target.parentNode)); + i.fixedTooltip && i.drawFixedTooltipRect(), + n.globals.axisCharts ? i.axisChartsTooltips({ e: s, opt: a, tooltipRect: i.tooltipRect }) : i.nonAxisChartsTooltips({ e: s, opt: a, tooltipRect: i.tooltipRect }); + }, + }, + { + key: "axisChartsTooltips", + value: function (t) { + var e, + i, + a, + s = t.e, + n = t.opt, + r = this.w, + o = null, + l = n.elGrid.getBoundingClientRect(), + h = "touchmove" === s.type ? s.touches[0].clientX : s.clientX, + c = "touchmove" === s.type ? s.touches[0].clientY : s.clientY; + if (((this.clientY = c), (this.clientX = h), c < l.top || c > l.top + l.height)) this.handleMouseOut(n); + else { + if (Array.isArray(this.tConfig.enabledOnSeries)) { + var d = parseInt(n.paths.getAttribute("index")); + if (this.tConfig.enabledOnSeries.indexOf(d) < 0) return void this.handleMouseOut(n); + } + var u = this.getElTooltip(), + f = this.getElXCrosshairs(), + g = r.globals.xyCharts || ("bar" === r.config.chart.type && !r.globals.isBarHorizontal && this.hasBars() && this.tConfig.shared) || (r.globals.comboCharts && this.hasBars); + if ((r.globals.isBarHorizontal && this.hasBars() && (g = !1), "mousemove" === s.type || "touchmove" === s.type || "mouseup" === s.type)) { + if ((null !== f && f.classList.add("active"), null !== this.ycrosshairs && this.blyaxisTooltip && this.ycrosshairs.classList.add("active"), g && !this.showOnIntersect)) { + e = (o = this.tooltipUtil.getNearestValues({ context: this, hoverArea: n.hoverArea, elGrid: n.elGrid, clientX: h, clientY: c, hasBars: this.hasBars })).j; + var p = o.capturedSeries; + if (o.hoverX < 0 || o.hoverX > r.globals.gridWidth) return void this.handleMouseOut(n); + if (null !== p) { + if (null === r.globals.series[p][e]) return void n.tooltipEl.classList.remove("active"); + void 0 !== r.globals.series[p][e] + ? this.tConfig.shared && this.tooltipUtil.isXoverlap(e) && this.tooltipUtil.isinitialSeriesSameLen() + ? this.create(s, this, p, e, n.ttItems) + : this.create(s, this, p, e, n.ttItems, !1) + : this.tooltipUtil.isXoverlap(e) && this.create(s, this, 0, e, n.ttItems); + } else this.tooltipUtil.isXoverlap(e) && this.create(s, this, 0, e, n.ttItems); + } else if ("heatmap" === r.config.chart.type) { + var x = this.intersect.handleHeatTooltip({ e: s, opt: n, x: i, y: a }); + (i = x.x), (a = x.y), (u.style.left = i + "px"), (u.style.top = a + "px"); + } else this.hasBars && this.intersect.handleBarTooltip({ e: s, opt: n }), this.hasMarkers && this.intersect.handleMarkerTooltip({ e: s, opt: n, x: i, y: a }); + if (this.blyaxisTooltip) for (var v = 0; v < r.config.yaxis.length; v++) this.axesTooltip.drawYaxisTooltipText(v, c, this.xyRatios); + n.tooltipEl.classList.add("active"); + } else ("mouseout" !== s.type && "touchend" !== s.type) || this.handleMouseOut(n); + } + }, + }, + { + key: "nonAxisChartsTooltips", + value: function (t) { + var e = t.e, + i = t.opt, + a = t.tooltipRect, + s = this.w, + n = i.paths.getAttribute("rel"), + r = this.getElTooltip(), + o = s.globals.dom.elWrap.getBoundingClientRect(); + if ("mousemove" === e.type || "touchmove" === e.type) { + r.classList.add("active"), this.tooltipLabels.drawSeriesTexts({ ttItems: i.ttItems, i: parseInt(n) - 1, shared: !1 }); + var l = s.globals.clientX - o.left - a.ttWidth / 2, + h = s.globals.clientY - o.top - a.ttHeight - 10; + (r.style.left = l + "px"), (r.style.top = h + "px"); + } else ("mouseout" !== e.type && "touchend" !== e.type) || r.classList.remove("active"); + }, + }, + { + key: "deactivateHoverFilter", + value: function () { + for (var t = this.w, e = new m(this.ctx), i = t.globals.dom.Paper.select(".apexcharts-bar-area"), a = 0; a < i.length; a++) e.pathMouseLeave(i[a]); + }, + }, + { + key: "handleMouseOut", + value: function (t) { + var e = this.w, + i = this.getElXCrosshairs(); + if ( + (t.tooltipEl.classList.remove("active"), + this.deactivateHoverFilter(), + "bubble" !== e.config.chart.type && this.marker.resetPointsSize(), + null !== i && i.classList.remove("active"), + null !== this.ycrosshairs && this.ycrosshairs.classList.remove("active"), + this.blxaxisTooltip && this.xaxisTooltip.classList.remove("active"), + this.blyaxisTooltip) + ) { + null === this.yaxisTTEls && (this.yaxisTTEls = e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip")); + for (var a = 0; a < this.yaxisTTEls.length; a++) this.yaxisTTEls[a].classList.remove("active"); + } + }, + }, + { + key: "getElMarkers", + value: function () { + return this.w.globals.dom.baseEl.querySelectorAll(" .apexcharts-series-markers"); + }, + }, + { + key: "getAllMarkers", + value: function () { + return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker"); + }, + }, + { + key: "hasMarkers", + value: function () { + return this.getElMarkers().length > 0; + }, + }, + { + key: "getElBars", + value: function () { + return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series, .apexcharts-candlestick-series, .apexcharts-rangebar-series"); + }, + }, + { + key: "hasBars", + value: function () { + return this.getElBars().length > 0; + }, + }, + { + key: "markerClick", + value: function (t, e, i) { + var a = this.w; + "function" == typeof a.config.chart.events.markerClick && a.config.chart.events.markerClick(t, this.ctx, { seriesIndex: e, dataPointIndex: i, w: a }), + this.ctx.fireEvent("markerClick", [t, this.ctx, { seriesIndex: e, dataPointIndex: i, w: a }]); + }, + }, + { + key: "create", + value: function (t, e, i, a, s) { + var n = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : null, + r = this.w, + o = e; + "mouseup" === t.type && this.markerClick(t, i, a), null === n && (n = this.tConfig.shared); + var l = this.hasMarkers(), + h = this.getElBars(); + if (n) { + if ( + (o.tooltipLabels.drawSeriesTexts({ ttItems: s, i: i, j: a, shared: !this.showOnIntersect && this.tConfig.shared }), + l && (r.globals.markers.largestSize > 0 ? o.marker.enlargePoints(a) : o.tooltipPosition.moveDynamicPointsOnHover(a)), + this.hasBars() && ((this.barSeriesHeight = this.tooltipUtil.getBarsHeight(h)), this.barSeriesHeight > 0)) + ) { + var c = new m(this.ctx), + d = r.globals.dom.Paper.select(".apexcharts-bar-area[j='".concat(a, "']")); + this.deactivateHoverFilter(), this.tooltipPosition.moveStickyTooltipOverBars(a); + for (var u = 0; u < d.length; u++) c.pathMouseEnter(d[u]); + } + } else o.tooltipLabels.drawSeriesTexts({ shared: !1, ttItems: s, i: i, j: a }), this.hasBars() && o.tooltipPosition.moveStickyTooltipOverBars(a), l && o.tooltipPosition.moveMarkers(i, a); + }, + }, + ]), + t + ); + })(), + wt = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w), (this.ev = this.w.config.chart.events), (this.localeValues = this.w.globals.locale.toolbar); + } + return ( + o(t, [ + { + key: "createToolbar", + value: function () { + var t = this.w, + e = document.createElement("div"); + if ( + (e.setAttribute("class", "apexcharts-toolbar"), + t.globals.dom.elWrap.appendChild(e), + (this.elZoom = document.createElement("div")), + (this.elZoomIn = document.createElement("div")), + (this.elZoomOut = document.createElement("div")), + (this.elPan = document.createElement("div")), + (this.elSelection = document.createElement("div")), + (this.elZoomReset = document.createElement("div")), + (this.elMenuIcon = document.createElement("div")), + (this.elMenu = document.createElement("div")), + (this.elCustomIcons = []), + (this.t = t.config.chart.toolbar.tools), + Array.isArray(this.t.customIcons)) + ) + for (var i = 0; i < this.t.customIcons.length; i++) this.elCustomIcons.push(document.createElement("div")); + this.elMenuItems = []; + var a = []; + this.t.zoomin && + t.config.chart.zoom.enabled && + a.push({ + el: this.elZoomIn, + icon: + "string" == typeof this.t.zoomin + ? this.t.zoomin + : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n', + title: this.localeValues.zoomIn, + class: "apexcharts-zoom-in-icon", + }), + this.t.zoomout && + t.config.chart.zoom.enabled && + a.push({ + el: this.elZoomOut, + icon: + "string" == typeof this.t.zoomout + ? this.t.zoomout + : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n', + title: this.localeValues.zoomOut, + class: "apexcharts-zoom-out-icon", + }), + this.t.zoom && + t.config.chart.zoom.enabled && + a.push({ + el: this.elZoom, + icon: + "string" == typeof this.t.zoom + ? this.t.zoom + : '<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>\n <path d="M0 0h24v24H0V0z" fill="none"/>\n <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>\n</svg>', + title: this.localeValues.selectionZoom, + class: t.globals.isTouchDevice ? "hidden" : "apexcharts-zoom-icon", + }), + this.t.selection && + t.config.chart.selection.enabled && + a.push({ + el: this.elSelection, + icon: + "string" == typeof this.t.selection + ? this.t.selection + : '<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>\n</svg>', + title: this.localeValues.selection, + class: t.globals.isTouchDevice ? "hidden" : "apexcharts-selection-icon", + }), + this.t.pan && + t.config.chart.zoom.enabled && + a.push({ + el: this.elPan, + icon: + "string" == typeof this.t.pan + ? this.t.pan + : '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n <defs>\n <path d="M0 0h24v24H0z" id="a"/>\n </defs>\n <clipPath id="b">\n <use overflow="visible" xlink:href="#a"/>\n </clipPath>\n <path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>\n</svg>', + title: this.localeValues.pan, + class: t.globals.isTouchDevice ? "hidden" : "apexcharts-pan-icon", + }), + this.t.reset && + t.config.chart.zoom.enabled && + a.push({ + el: this.elZoomReset, + icon: + "string" == typeof this.t.reset + ? this.t.reset + : '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>\n <path d="M0 0h24v24H0z" fill="none"/>\n</svg>', + title: this.localeValues.reset, + class: "apexcharts-reset-zoom-icon", + }), + this.t.download && + a.push({ + el: this.elMenuIcon, + icon: + "string" == typeof this.t.download + ? this.t.download + : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>', + title: this.localeValues.menu, + class: "apexcharts-menu-icon", + }); + for (var s = 0; s < this.elCustomIcons.length; s++) + a.push({ + el: this.elCustomIcons[s], + icon: this.t.customIcons[s].icon, + title: this.t.customIcons[s].title, + index: this.t.customIcons[s].index, + class: "apexcharts-toolbar-custom-icon " + this.t.customIcons[s].class, + }); + a.forEach(function (t, e) { + t.index && p.moveIndexInArray(a, e, t.index); + }); + for (var n = 0; n < a.length; n++) m.setAttrs(a[n].el, { class: a[n].class, title: a[n].title }), (a[n].el.innerHTML = a[n].icon), e.appendChild(a[n].el); + e.appendChild(this.elMenu), m.setAttrs(this.elMenu, { class: "apexcharts-menu" }); + for ( + var r = [ + { name: "exportSVG", title: this.localeValues.exportToSVG }, + { name: "exportPNG", title: this.localeValues.exportToPNG }, + ], + o = 0; + o < r.length; + o++ + ) + this.elMenuItems.push(document.createElement("div")), + (this.elMenuItems[o].innerHTML = r[o].title), + m.setAttrs(this.elMenuItems[o], { class: "apexcharts-menu-item ".concat(r[o].name), title: r[o].title }), + this.elMenu.appendChild(this.elMenuItems[o]); + t.globals.zoomEnabled ? this.elZoom.classList.add("selected") : t.globals.panEnabled ? this.elPan.classList.add("selected") : t.globals.selectionEnabled && this.elSelection.classList.add("selected"), + this.addToolbarEventListeners(); + }, + }, + { + key: "addToolbarEventListeners", + value: function () { + var t = this; + this.elZoomReset.addEventListener("click", this.handleZoomReset.bind(this)), + this.elSelection.addEventListener("click", this.toggleSelection.bind(this)), + this.elZoom.addEventListener("click", this.toggleZooming.bind(this)), + this.elZoomIn.addEventListener("click", this.handleZoomIn.bind(this)), + this.elZoomOut.addEventListener("click", this.handleZoomOut.bind(this)), + this.elPan.addEventListener("click", this.togglePanning.bind(this)), + this.elMenuIcon.addEventListener("click", this.toggleMenu.bind(this)), + this.elMenuItems.forEach(function (e) { + e.classList.contains("exportSVG") ? e.addEventListener("click", t.downloadSVG.bind(t)) : e.classList.contains("exportPNG") && e.addEventListener("click", t.downloadPNG.bind(t)); + }); + for (var e = 0; e < this.t.customIcons.length; e++) this.elCustomIcons[e].addEventListener("click", this.t.customIcons[e].click); + }, + }, + { + key: "toggleSelection", + value: function () { + this.toggleOtherControls(), + (this.w.globals.selectionEnabled = !this.w.globals.selectionEnabled), + this.elSelection.classList.contains("selected") ? this.elSelection.classList.remove("selected") : this.elSelection.classList.add("selected"); + }, + }, + { + key: "toggleZooming", + value: function () { + this.toggleOtherControls(), + (this.w.globals.zoomEnabled = !this.w.globals.zoomEnabled), + this.elZoom.classList.contains("selected") ? this.elZoom.classList.remove("selected") : this.elZoom.classList.add("selected"); + }, + }, + { + key: "getToolbarIconsReference", + value: function () { + var t = this.w; + this.elZoom || (this.elZoom = t.globals.dom.baseEl.querySelector(".apexcharts-zoom-icon")), + this.elPan || (this.elPan = t.globals.dom.baseEl.querySelector(".apexcharts-pan-icon")), + this.elSelection || (this.elSelection = t.globals.dom.baseEl.querySelector(".apexcharts-selection-icon")); + }, + }, + { + key: "enableZooming", + value: function () { + this.toggleOtherControls(), (this.w.globals.zoomEnabled = !0), this.elZoom && this.elZoom.classList.add("selected"), this.elPan && this.elPan.classList.remove("selected"); + }, + }, + { + key: "enablePanning", + value: function () { + this.toggleOtherControls(), (this.w.globals.panEnabled = !0), this.elPan && this.elPan.classList.add("selected"), this.elZoom && this.elZoom.classList.remove("selected"); + }, + }, + { + key: "togglePanning", + value: function () { + this.toggleOtherControls(), + (this.w.globals.panEnabled = !this.w.globals.panEnabled), + this.elPan.classList.contains("selected") ? this.elPan.classList.remove("selected") : this.elPan.classList.add("selected"); + }, + }, + { + key: "toggleOtherControls", + value: function () { + var t = this.w; + (t.globals.panEnabled = !1), + (t.globals.zoomEnabled = !1), + (t.globals.selectionEnabled = !1), + this.getToolbarIconsReference(), + this.elPan && this.elPan.classList.remove("selected"), + this.elSelection && this.elSelection.classList.remove("selected"), + this.elZoom && this.elZoom.classList.remove("selected"); + }, + }, + { + key: "handleZoomIn", + value: function () { + var t = this.w, + e = (t.globals.minX + t.globals.maxX) / 2, + i = (t.globals.minX + e) / 2, + a = (t.globals.maxX + e) / 2; + t.globals.disableZoomIn || this.zoomUpdateOptions(i, a); + }, + }, + { + key: "handleZoomOut", + value: function () { + var t = this.w; + if (!("datetime" === t.config.xaxis.type && new Date(t.globals.minX).getUTCFullYear() < 1e3)) { + var e = (t.globals.minX + t.globals.maxX) / 2, + i = t.globals.minX - (e - t.globals.minX), + a = t.globals.maxX - (e - t.globals.maxX); + t.globals.disableZoomOut || this.zoomUpdateOptions(i, a); + } + }, + }, + { + key: "zoomUpdateOptions", + value: function (t, e) { + var i = { min: t, max: e }, + a = this.getBeforeZoomRange(i); + a && (i = a.xaxis), (this.w.globals.zoomed = !0), this.ctx._updateOptions({ xaxis: i }, !1, this.w.config.chart.animations.dynamicAnimation.enabled), this.zoomCallback(i); + }, + }, + { + key: "zoomCallback", + value: function (t, e) { + "function" == typeof this.ev.zoomed && this.ev.zoomed(this.ctx, { xaxis: t, yaxis: e }); + }, + }, + { + key: "getBeforeZoomRange", + value: function (t, e) { + var i = null; + return "function" == typeof this.ev.beforeZoom && (i = this.ev.beforeZoom(this, { xaxis: t, yaxis: e })), i; + }, + }, + { + key: "toggleMenu", + value: function () { + this.elMenu.classList.contains("open") ? this.elMenu.classList.remove("open") : this.elMenu.classList.add("open"); + }, + }, + { + key: "downloadPNG", + value: function () { + var t = new ct(this.ctx); + t.exportToPng(this.ctx), this.toggleMenu(); + }, + }, + { + key: "downloadSVG", + value: function () { + var t = new ct(this.ctx); + t.exportToSVG(), this.toggleMenu(); + }, + }, + { + key: "handleZoomReset", + value: function (t) { + var e = this; + this.ctx.getSyncedCharts().forEach(function (t) { + var i = t.w; + i.globals.minX !== i.globals.initialminX && + i.globals.maxX !== i.globals.initialmaxX && + (t.revertDefaultAxisMinMax(), + "function" == typeof i.config.chart.events.zoomed && e.zoomCallback({ min: i.config.xaxis.min, max: i.config.xaxis.max }), + (i.globals.zoomed = !1), + t._updateSeries(i.globals.initialSeries, i.config.chart.animations.dynamicAnimation.enabled)); + }); + }, + }, + { + key: "destroy", + value: function () { + (this.elZoom = null), (this.elZoomIn = null), (this.elZoomOut = null), (this.elPan = null), (this.elSelection = null), (this.elZoomReset = null), (this.elMenuIcon = null); + }, + }, + ]), + t + ); + })(), + kt = (function (t) { + function e(t) { + var i; + return ( + n(this, e), + ((i = f(this, d(e).call(this, t))).ctx = t), + (i.w = t.w), + (i.dragged = !1), + (i.graphics = new m(i.ctx)), + (i.eventList = ["mousedown", "mouseleave", "mousemove", "touchstart", "touchmove", "mouseup", "touchend"]), + (i.clientX = 0), + (i.clientY = 0), + (i.startX = 0), + (i.endX = 0), + (i.dragX = 0), + (i.startY = 0), + (i.endY = 0), + (i.dragY = 0), + i + ); + } + return ( + c(e, wt), + o(e, [ + { + key: "init", + value: function (t) { + var e = this, + i = t.xyRatios, + a = this.w, + s = this; + (this.xyRatios = i), + (this.zoomRect = this.graphics.drawRect(0, 0, 0, 0)), + (this.selectionRect = this.graphics.drawRect(0, 0, 0, 0)), + (this.gridRect = a.globals.dom.baseEl.querySelector(".apexcharts-grid")), + this.zoomRect.node.classList.add("apexcharts-zoom-rect"), + this.selectionRect.node.classList.add("apexcharts-selection-rect"), + a.globals.dom.elGraphical.add(this.zoomRect), + a.globals.dom.elGraphical.add(this.selectionRect), + "x" === a.config.chart.selection.type + ? (this.slDraggableRect = this.selectionRect.draggable({ minX: 0, minY: 0, maxX: a.globals.gridWidth, maxY: a.globals.gridHeight }).on("dragmove", this.selectionDragging.bind(this, "dragging"))) + : "y" === a.config.chart.selection.type + ? (this.slDraggableRect = this.selectionRect.draggable({ minX: 0, maxX: a.globals.gridWidth }).on("dragmove", this.selectionDragging.bind(this, "dragging"))) + : (this.slDraggableRect = this.selectionRect.draggable().on("dragmove", this.selectionDragging.bind(this, "dragging"))), + this.preselectedSelection(), + (this.hoverArea = a.globals.dom.baseEl.querySelector(a.globals.chartClass)), + this.hoverArea.classList.add("zoomable"), + this.eventList.forEach(function (t) { + e.hoverArea.addEventListener(t, s.svgMouseEvents.bind(s, i), { capture: !1, passive: !0 }); + }); + }, + }, + { + key: "destroy", + value: function () { + this.slDraggableRect && (this.slDraggableRect.draggable(!1), this.slDraggableRect.off(), this.selectionRect.off()), (this.selectionRect = null), (this.zoomRect = null), (this.gridRect = null); + }, + }, + { + key: "svgMouseEvents", + value: function (t, e) { + var i = this.w, + a = this, + s = this.ctx.toolbar, + n = i.globals.zoomEnabled ? i.config.chart.zoom.type : i.config.chart.selection.type; + if ( + (e.shiftKey ? ((this.shiftWasPressed = !0), s.enablePanning()) : this.shiftWasPressed && (s.enableZooming(), (this.shiftWasPressed = !1)), + !(e.target.classList.contains("apexcharts-selection-rect") || e.target.parentNode.classList.contains("apexcharts-toolbar"))) + ) { + if ( + ((a.clientX = "touchmove" === e.type || "touchstart" === e.type ? e.touches[0].clientX : "touchend" === e.type ? e.changedTouches[0].clientX : e.clientX), + (a.clientY = "touchmove" === e.type || "touchstart" === e.type ? e.touches[0].clientY : "touchend" === e.type ? e.changedTouches[0].clientY : e.clientY), + "mousedown" === e.type && 1 === e.which) + ) { + var r = a.gridRect.getBoundingClientRect(); + (a.startX = a.clientX - r.left), (a.startY = a.clientY - r.top), (a.dragged = !1), (a.w.globals.mousedown = !0); + } + if ( + ((("mousemove" === e.type && 1 === e.which) || "touchmove" === e.type) && + ((a.dragged = !0), + i.globals.panEnabled + ? ((i.globals.selection = null), a.w.globals.mousedown && a.panDragging({ context: a, zoomtype: n, xyRatios: t })) + : ((a.w.globals.mousedown && i.globals.zoomEnabled) || (a.w.globals.mousedown && i.globals.selectionEnabled)) && (a.selection = a.selectionDrawing({ context: a, zoomtype: n }))), + "mouseup" === e.type || "touchend" === e.type || "mouseleave" === e.type) + ) { + var o = a.gridRect.getBoundingClientRect(); + a.w.globals.mousedown && + ((a.endX = a.clientX - o.left), + (a.endY = a.clientY - o.top), + (a.dragX = Math.abs(a.endX - a.startX)), + (a.dragY = Math.abs(a.endY - a.startY)), + (i.globals.zoomEnabled || i.globals.selectionEnabled) && a.selectionDrawn({ context: a, zoomtype: n })), + i.globals.zoomEnabled && a.hideSelectionRect(this.selectionRect), + (a.dragged = !1), + (a.w.globals.mousedown = !1); + } + this.makeSelectionRectDraggable(); + } + }, + }, + { + key: "makeSelectionRectDraggable", + value: function () { + var t = this.w; + if (this.selectionRect) { + var e = this.selectionRect.node.getBoundingClientRect(); + e.width > 0 && + e.height > 0 && + this.slDraggableRect + .selectize() + .resize({ constraint: { minX: 0, minY: 0, maxX: t.globals.gridWidth, maxY: t.globals.gridHeight } }) + .on("resizing", this.selectionDragging.bind(this, "resizing")); + } + }, + }, + { + key: "preselectedSelection", + value: function () { + var t = this.w, + e = this.xyRatios; + if (!t.globals.zoomEnabled) + if (void 0 !== t.globals.selection && null !== t.globals.selection) this.drawSelectionRect(t.globals.selection); + else if (void 0 !== t.config.chart.selection.xaxis.min && void 0 !== t.config.chart.selection.xaxis.max) { + var i = (t.config.chart.selection.xaxis.min - t.globals.minX) / e.xRatio, + a = { + x: i, + y: 0, + width: t.globals.gridWidth - (t.globals.maxX - t.config.chart.selection.xaxis.max) / e.xRatio - i, + height: t.globals.gridHeight, + translateX: 0, + translateY: 0, + selectionEnabled: !0, + }; + this.drawSelectionRect(a), + this.makeSelectionRectDraggable(), + "function" == typeof t.config.chart.events.selection && + t.config.chart.events.selection(this.ctx, { xaxis: { min: t.config.chart.selection.xaxis.min, max: t.config.chart.selection.xaxis.max }, yaxis: {} }); + } + }, + }, + { + key: "drawSelectionRect", + value: function (t) { + var e = t.x, + i = t.y, + a = t.width, + s = t.height, + n = t.translateX, + r = t.translateY, + o = this.w, + l = this.zoomRect, + h = this.selectionRect; + if (this.dragged || null !== o.globals.selection) { + var c = { transform: "translate(" + n + ", " + r + ")" }; + o.globals.zoomEnabled && + this.dragged && + (l.attr({ + x: e, + y: i, + width: a, + height: s, + fill: o.config.chart.zoom.zoomedArea.fill.color, + "fill-opacity": o.config.chart.zoom.zoomedArea.fill.opacity, + stroke: o.config.chart.zoom.zoomedArea.stroke.color, + "stroke-width": o.config.chart.zoom.zoomedArea.stroke.width, + "stroke-opacity": o.config.chart.zoom.zoomedArea.stroke.opacity, + }), + m.setAttrs(l.node, c)), + o.globals.selectionEnabled && + (h.attr({ + x: e, + y: i, + width: a > 0 ? a : 0, + height: s > 0 ? s : 0, + fill: o.config.chart.selection.fill.color, + "fill-opacity": o.config.chart.selection.fill.opacity, + stroke: o.config.chart.selection.stroke.color, + "stroke-width": o.config.chart.selection.stroke.width, + "stroke-dasharray": o.config.chart.selection.stroke.dashArray, + "stroke-opacity": o.config.chart.selection.stroke.opacity, + }), + m.setAttrs(h.node, c)); + } + }, + }, + { + key: "hideSelectionRect", + value: function (t) { + t && t.attr({ x: 0, y: 0, width: 0, height: 0 }); + }, + }, + { + key: "selectionDrawing", + value: function (t) { + var e = t.context, + i = t.zoomtype, + a = this.w, + s = e, + n = this.gridRect.getBoundingClientRect(), + r = s.startX - 1, + o = s.startY, + l = s.clientX - n.left - r, + h = s.clientY - n.top - o, + c = 0, + d = 0, + u = {}; + return ( + Math.abs(l + r) > a.globals.gridWidth ? (l = a.globals.gridWidth - r) : s.clientX - n.left < 0 && (l = r), + r > s.clientX - n.left && (c = -(l = Math.abs(l))), + o > s.clientY - n.top && (d = -(h = Math.abs(h))), + (u = + "x" === i + ? { x: r, y: 0, width: l, height: a.globals.gridHeight, translateX: c, translateY: 0 } + : "y" === i + ? { x: 0, y: o, width: a.globals.gridWidth, height: h, translateX: 0, translateY: d } + : { x: r, y: o, width: l, height: h, translateX: c, translateY: d }), + s.drawSelectionRect(u), + s.selectionDragging("resizing"), + u + ); + }, + }, + { + key: "selectionDragging", + value: function (t, e) { + var i = this, + a = this.w, + s = this.xyRatios, + n = this.selectionRect, + r = 0; + "resizing" === t && (r = 30), + "function" == typeof a.config.chart.events.selection && + a.globals.selectionEnabled && + (clearTimeout(this.w.globals.selectionResizeTimer), + (this.w.globals.selectionResizeTimer = window.setTimeout(function () { + var t = i.gridRect.getBoundingClientRect(), + e = n.node.getBoundingClientRect(), + r = a.globals.xAxisScale.niceMin + (e.left - t.left) * s.xRatio, + o = a.globals.xAxisScale.niceMin + (e.right - t.left) * s.xRatio, + l = a.globals.yAxisScale[0].niceMin + (t.bottom - e.bottom) * s.yRatio[0], + h = a.globals.yAxisScale[0].niceMax - (e.top - t.top) * s.yRatio[0]; + a.config.chart.events.selection(i.ctx, { xaxis: { min: r, max: o }, yaxis: { min: l, max: h } }); + }, r))); + }, + }, + { + key: "selectionDrawn", + value: function (t) { + var e = t.context, + i = t.zoomtype, + a = this.w, + s = e, + n = this.xyRatios, + r = this.ctx.toolbar; + if (s.startX > s.endX) { + var o = s.startX; + (s.startX = s.endX), (s.endX = o); + } + if (s.startY > s.endY) { + var l = s.startY; + (s.startY = s.endY), (s.endY = l); + } + var h = a.globals.xAxisScale.niceMin + s.startX * n.xRatio, + c = a.globals.xAxisScale.niceMin + s.endX * n.xRatio, + d = [], + u = []; + if ( + (a.config.yaxis.forEach(function (t, e) { + d.push(Math.floor(a.globals.yAxisScale[e].niceMax - n.yRatio[e] * s.startY)), u.push(Math.floor(a.globals.yAxisScale[e].niceMax - n.yRatio[e] * s.endY)); + }), + s.dragged && (s.dragX > 10 || s.dragY > 10) && h !== c) + ) + if (a.globals.zoomEnabled) { + var f = p.clone(a.globals.initialConfig.yaxis); + a.globals.zoomed || ((a.globals.lastXAxis = p.clone(a.config.xaxis)), (a.globals.lastYAxis = p.clone(a.config.yaxis))); + var g = { min: h, max: c }; + if ( + (("xy" !== i && "y" !== i) || + f.forEach(function (t, e) { + (f[e].min = u[e]), (f[e].max = d[e]); + }), + a.config.chart.zoom.autoScaleYaxis) + ) { + var x = new Z(s.ctx); + f = x.autoScaleY(s.ctx, f, { xaxis: g }); + } + if (r) { + var v = r.getBeforeZoomRange(g, f); + v && ((g = v.xaxis ? v.xaxis : g), (f = v.yaxis ? v.yaxe : f)); + } + s.ctx._updateOptions({ xaxis: g, yaxis: f }, !1, s.w.config.chart.animations.dynamicAnimation.enabled), + "function" == typeof a.config.chart.events.zoomed && r.zoomCallback(g, f), + (a.globals.zoomed = !0); + } else if (a.globals.selectionEnabled) { + var m, + b = null; + (m = { min: h, max: c }), + ("xy" !== i && "y" !== i) || + (b = p.clone(a.config.yaxis)).forEach(function (t, e) { + (b[e].min = u[e]), (b[e].max = d[e]); + }), + (a.globals.selection = s.selection), + "function" == typeof a.config.chart.events.selection && a.config.chart.events.selection(s.ctx, { xaxis: m, yaxis: b }); + } + }, + }, + { + key: "panDragging", + value: function (t) { + var e, + i = t.context, + a = this.w, + s = i; + if (void 0 !== a.globals.lastClientPosition.x) { + var n = a.globals.lastClientPosition.x - s.clientX, + r = a.globals.lastClientPosition.y - s.clientY; + Math.abs(n) > Math.abs(r) && n > 0 + ? (e = "left") + : Math.abs(n) > Math.abs(r) && n < 0 + ? (e = "right") + : Math.abs(r) > Math.abs(n) && r > 0 + ? (e = "up") + : Math.abs(r) > Math.abs(n) && r < 0 && (e = "down"); + } + a.globals.lastClientPosition = { x: s.clientX, y: s.clientY }; + var o = a.globals.minX, + l = a.globals.maxX; + s.panScrolled(e, o, l); + }, + }, + { + key: "panScrolled", + value: function (t, e, i) { + var a = this.w, + s = this.xyRatios, + n = p.clone(a.globals.initialConfig.yaxis); + "left" === t + ? ((e = a.globals.minX + (a.globals.gridWidth / 15) * s.xRatio), (i = a.globals.maxX + (a.globals.gridWidth / 15) * s.xRatio)) + : "right" === t && ((e = a.globals.minX - (a.globals.gridWidth / 15) * s.xRatio), (i = a.globals.maxX - (a.globals.gridWidth / 15) * s.xRatio)), + (e < a.globals.initialminX || i > a.globals.initialmaxX) && ((e = a.globals.minX), (i = a.globals.maxX)); + var r = { min: e, max: i }; + a.config.chart.zoom.autoScaleYaxis && (n = new Z(this.ctx).autoScaleY(this.ctx, n, { xaxis: r })); + this.ctx._updateOptions({ xaxis: { min: e, max: i }, yaxis: n }, !1, !1), "function" == typeof a.config.chart.events.scrolled && a.config.chart.events.scrolled(this.ctx, { xaxis: { min: e, max: i } }); + }, + }, + ]), + e + ); + })(), + St = (function () { + function t(e) { + n(this, t), (this.ctx = e), (this.w = e.w); + } + return ( + o(t, [ + { + key: "draw", + value: function () { + this.drawTitleSubtitle("title"), this.drawTitleSubtitle("subtitle"); + }, + }, + { + key: "drawTitleSubtitle", + value: function (t) { + var e = this.w, + i = "title" === t ? e.config.title : e.config.subtitle, + a = e.globals.svgWidth / 2, + s = i.offsetY, + n = "middle"; + if (("left" === i.align ? ((a = 10), (n = "start")) : "right" === i.align && ((a = e.globals.svgWidth - 10), (n = "end")), (a += i.offsetX), (s = s + parseInt(i.style.fontSize) + 2), void 0 !== i.text)) { + var r = new m(this.ctx).drawText({ x: a, y: s, text: i.text, textAnchor: n, fontSize: i.style.fontSize, fontFamily: i.style.fontFamily, foreColor: i.style.color, opacity: 1 }); + r.node.setAttribute("class", "apexcharts-".concat(t, "-text")), e.globals.dom.Paper.add(r); + } + }, + }, + ]), + t + ); + })(); + (lt = "undefined" != typeof window ? window : void 0), + (ht = function (t, e) { + var i = ((void 0 !== this ? this : t).SVG = function (t) { + if (i.supported) return (t = new i.Doc(t)), i.parser.draw || i.prepare(), t; + }); + if (((i.ns = "http://www.w3.org/2000/svg"), (i.xmlns = "http://www.w3.org/2000/xmlns/"), (i.xlink = "http://www.w3.org/1999/xlink"), (i.svgjs = "http://svgjs.com/svgjs"), (i.supported = !0), !i.supported)) return !1; + (i.did = 1e3), + (i.eid = function (t) { + return "Svgjs" + d(t) + i.did++; + }), + (i.create = function (t) { + var i = e.createElementNS(this.ns, t); + return i.setAttribute("id", this.eid(t)), i; + }), + (i.extend = function () { + var t, e, a, s; + for (e = (t = [].slice.call(arguments)).pop(), s = t.length - 1; s >= 0; s--) if (t[s]) for (a in e) t[s].prototype[a] = e[a]; + i.Set && i.Set.inherit && i.Set.inherit(); + }), + (i.invent = function (t) { + var e = + "function" == typeof t.create + ? t.create + : function () { + this.constructor.call(this, i.create(t.create)); + }; + return t.inherit && (e.prototype = new t.inherit()), t.extend && i.extend(e, t.extend), t.construct && i.extend(t.parent || i.Container, t.construct), e; + }), + (i.adopt = function (e) { + return e + ? e.instance + ? e.instance + : (((a = + "svg" == e.nodeName + ? e.parentNode instanceof t.SVGElement + ? new i.Nested() + : new i.Doc() + : "linearGradient" == e.nodeName + ? new i.Gradient("linear") + : "radialGradient" == e.nodeName + ? new i.Gradient("radial") + : i[d(e.nodeName)] + ? new i[d(e.nodeName)]() + : new i.Element(e)).type = e.nodeName), + (a.node = e), + (e.instance = a), + a instanceof i.Doc && a.namespace().defs(), + a.setData(JSON.parse(e.getAttribute("svgjs:data")) || {}), + a) + : null; + var a; + }), + (i.prepare = function () { + var t = e.getElementsByTagName("body")[0], + a = (t ? new i.Doc(t) : i.adopt(e.documentElement).nested()).size(2, 0); + i.parser = { body: t || e.documentElement, draw: a.style("opacity:0;position:absolute;left:-100%;top:-100%;overflow:hidden").node, poly: a.polyline().node, path: a.path().node, native: i.create("svg") }; + }), + (i.parser = { native: i.create("svg") }), + e.addEventListener( + "DOMContentLoaded", + function () { + i.parser.draw || i.prepare(); + }, + !1 + ), + (i.regex = { + numberAndUnit: /^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i, + hex: /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i, + rgb: /rgb\((\d+),(\d+),(\d+)\)/, + reference: /#([a-z0-9\-_]+)/i, + transforms: /\)\s*,?\s*/, + whitespace: /\s/g, + isHex: /^#[a-f0-9]{3,6}$/i, + isRgb: /^rgb\(/, + isCss: /[^:]+:[^;]+;?/, + isBlank: /^(\s+)?$/, + isNumber: /^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i, + isPercent: /^-?[\d\.]+%$/, + isImage: /\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i, + delimiter: /[\s,]+/, + hyphen: /([^e])\-/gi, + pathLetters: /[MLHVCSQTAZ]/gi, + isPathLetter: /[MLHVCSQTAZ]/i, + numbersWithDots: /((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi, + dots: /\./g, + }), + (i.utils = { + map: function (t, e) { + var i, + a = t.length, + s = []; + for (i = 0; i < a; i++) s.push(e(t[i])); + return s; + }, + filter: function (t, e) { + var i, + a = t.length, + s = []; + for (i = 0; i < a; i++) e(t[i]) && s.push(t[i]); + return s; + }, + radians: function (t) { + return ((t % 360) * Math.PI) / 180; + }, + degrees: function (t) { + return ((180 * t) / Math.PI) % 360; + }, + filterSVGElements: function (e) { + return this.filter(e, function (e) { + return e instanceof t.SVGElement; + }); + }, + }), + (i.defaults = { + attrs: { + "fill-opacity": 1, + "stroke-opacity": 1, + "stroke-width": 0, + "stroke-linejoin": "miter", + "stroke-linecap": "butt", + fill: "#000000", + stroke: "#000000", + opacity: 1, + x: 0, + y: 0, + cx: 0, + cy: 0, + width: 0, + height: 0, + r: 0, + rx: 0, + ry: 0, + offset: 0, + "stop-opacity": 1, + "stop-color": "#000000", + "font-size": 16, + "font-family": "Helvetica, Arial, sans-serif", + "text-anchor": "start", + }, + }), + (i.Color = function (t) { + var e, a; + ((this.r = 0), (this.g = 0), (this.b = 0), t) && + ("string" == typeof t + ? i.regex.isRgb.test(t) + ? ((e = i.regex.rgb.exec(t.replace(i.regex.whitespace, ""))), (this.r = parseInt(e[1])), (this.g = parseInt(e[2])), (this.b = parseInt(e[3]))) + : i.regex.isHex.test(t) && + ((e = i.regex.hex.exec(4 == (a = t).length ? ["#", a.substring(1, 2), a.substring(1, 2), a.substring(2, 3), a.substring(2, 3), a.substring(3, 4), a.substring(3, 4)].join("") : a)), + (this.r = parseInt(e[1], 16)), + (this.g = parseInt(e[2], 16)), + (this.b = parseInt(e[3], 16))) + : "object" === s(t) && ((this.r = t.r), (this.g = t.g), (this.b = t.b))); + }), + i.extend(i.Color, { + toString: function () { + return this.toHex(); + }, + toHex: function () { + return "#" + u(this.r) + u(this.g) + u(this.b); + }, + toRgb: function () { + return "rgb(" + [this.r, this.g, this.b].join() + ")"; + }, + brightness: function () { + return (this.r / 255) * 0.3 + (this.g / 255) * 0.59 + (this.b / 255) * 0.11; + }, + morph: function (t) { + return (this.destination = new i.Color(t)), this; + }, + at: function (t) { + return this.destination + ? ((t = t < 0 ? 0 : t > 1 ? 1 : t), + new i.Color({ r: ~~(this.r + (this.destination.r - this.r) * t), g: ~~(this.g + (this.destination.g - this.g) * t), b: ~~(this.b + (this.destination.b - this.b) * t) })) + : this; + }, + }), + (i.Color.test = function (t) { + return (t += ""), i.regex.isHex.test(t) || i.regex.isRgb.test(t); + }), + (i.Color.isRgb = function (t) { + return t && "number" == typeof t.r && "number" == typeof t.g && "number" == typeof t.b; + }), + (i.Color.isColor = function (t) { + return i.Color.isRgb(t) || i.Color.test(t); + }), + (i.Array = function (t, e) { + 0 == (t = (t || []).valueOf()).length && e && (t = e.valueOf()), (this.value = this.parse(t)); + }), + i.extend(i.Array, { + morph: function (t) { + if (((this.destination = this.parse(t)), this.value.length != this.destination.length)) { + for (var e = this.value[this.value.length - 1], i = this.destination[this.destination.length - 1]; this.value.length > this.destination.length; ) this.destination.push(i); + for (; this.value.length < this.destination.length; ) this.value.push(e); + } + return this; + }, + settle: function () { + for (var t = 0, e = this.value.length, i = []; t < e; t++) -1 == i.indexOf(this.value[t]) && i.push(this.value[t]); + return (this.value = i); + }, + at: function (t) { + if (!this.destination) return this; + for (var e = 0, a = this.value.length, s = []; e < a; e++) s.push(this.value[e] + (this.destination[e] - this.value[e]) * t); + return new i.Array(s); + }, + toString: function () { + return this.value.join(" "); + }, + valueOf: function () { + return this.value; + }, + parse: function (t) { + return (t = t.valueOf()), Array.isArray(t) ? t : this.split(t); + }, + split: function (t) { + return t.trim().split(i.regex.delimiter).map(parseFloat); + }, + reverse: function () { + return this.value.reverse(), this; + }, + clone: function () { + var t = new this.constructor(); + return ( + (t.value = (function t(e) { + var i = e.slice(0); + for (var a = i.length; a--; ) Array.isArray(i[a]) && (i[a] = t(i[a])); + return i; + })(this.value)), + t + ); + }, + }), + (i.PointArray = function (t, e) { + i.Array.call(this, t, e || [[0, 0]]); + }), + (i.PointArray.prototype = new i.Array()), + (i.PointArray.prototype.constructor = i.PointArray), + i.extend(i.PointArray, { + toString: function () { + for (var t = 0, e = this.value.length, i = []; t < e; t++) i.push(this.value[t].join(",")); + return i.join(" "); + }, + toLine: function () { + return { x1: this.value[0][0], y1: this.value[0][1], x2: this.value[1][0], y2: this.value[1][1] }; + }, + at: function (t) { + if (!this.destination) return this; + for (var e = 0, a = this.value.length, s = []; e < a; e++) s.push([this.value[e][0] + (this.destination[e][0] - this.value[e][0]) * t, this.value[e][1] + (this.destination[e][1] - this.value[e][1]) * t]); + return new i.PointArray(s); + }, + parse: function (t) { + var e = []; + if (((t = t.valueOf()), Array.isArray(t))) { + if (Array.isArray(t[0])) + return t.map(function (t) { + return t.slice(); + }); + if (null != t[0].x) + return t.map(function (t) { + return [t.x, t.y]; + }); + } else t = t.trim().split(i.regex.delimiter).map(parseFloat); + t.length % 2 != 0 && t.pop(); + for (var a = 0, s = t.length; a < s; a += 2) e.push([t[a], t[a + 1]]); + return e; + }, + move: function (t, e) { + var i = this.bbox(); + if (((t -= i.x), (e -= i.y), !isNaN(t) && !isNaN(e))) for (var a = this.value.length - 1; a >= 0; a--) this.value[a] = [this.value[a][0] + t, this.value[a][1] + e]; + return this; + }, + size: function (t, e) { + var i, + a = this.bbox(); + for (i = this.value.length - 1; i >= 0; i--) a.width && (this.value[i][0] = ((this.value[i][0] - a.x) * t) / a.width + a.x), a.height && (this.value[i][1] = ((this.value[i][1] - a.y) * e) / a.height + a.y); + return this; + }, + bbox: function () { + return i.parser.draw || i.prepare(), i.parser.poly.setAttribute("points", this.toString()), i.parser.poly.getBBox(); + }, + }); + for ( + var a = { + M: function (t, e, i) { + return (e.x = i.x = t[0]), (e.y = i.y = t[1]), ["M", e.x, e.y]; + }, + L: function (t, e) { + return (e.x = t[0]), (e.y = t[1]), ["L", t[0], t[1]]; + }, + H: function (t, e) { + return (e.x = t[0]), ["H", t[0]]; + }, + V: function (t, e) { + return (e.y = t[0]), ["V", t[0]]; + }, + C: function (t, e) { + return (e.x = t[4]), (e.y = t[5]), ["C", t[0], t[1], t[2], t[3], t[4], t[5]]; + }, + S: function (t, e) { + return (e.x = t[2]), (e.y = t[3]), ["S", t[0], t[1], t[2], t[3]]; + }, + Q: function (t, e) { + return (e.x = t[2]), (e.y = t[3]), ["Q", t[0], t[1], t[2], t[3]]; + }, + T: function (t, e) { + return (e.x = t[0]), (e.y = t[1]), ["T", t[0], t[1]]; + }, + Z: function (t, e, i) { + return (e.x = i.x), (e.y = i.y), ["Z"]; + }, + A: function (t, e) { + return (e.x = t[5]), (e.y = t[6]), ["A", t[0], t[1], t[2], t[3], t[4], t[5], t[6]]; + }, + }, + n = "mlhvqtcsaz".split(""), + r = 0, + o = n.length; + r < o; + ++r + ) + a[n[r]] = (function (t) { + return function (e, i, s) { + if ("H" == t) e[0] = e[0] + i.x; + else if ("V" == t) e[0] = e[0] + i.y; + else if ("A" == t) (e[5] = e[5] + i.x), (e[6] = e[6] + i.y); + else for (var n = 0, r = e.length; n < r; ++n) e[n] = e[n] + (n % 2 ? i.y : i.x); + return a[t](e, i, s); + }; + })(n[r].toUpperCase()); + (i.PathArray = function (t, e) { + i.Array.call(this, t, e || [["M", 0, 0]]); + }), + (i.PathArray.prototype = new i.Array()), + (i.PathArray.prototype.constructor = i.PathArray), + i.extend(i.PathArray, { + toString: function () { + return (function (t) { + for (var e = 0, i = t.length, a = ""; e < i; e++) + (a += t[e][0]), + null != t[e][1] && + ((a += t[e][1]), + null != t[e][2] && + ((a += " "), + (a += t[e][2]), + null != t[e][3] && + ((a += " "), + (a += t[e][3]), + (a += " "), + (a += t[e][4]), + null != t[e][5] && ((a += " "), (a += t[e][5]), (a += " "), (a += t[e][6]), null != t[e][7] && ((a += " "), (a += t[e][7])))))); + return a + " "; + })(this.value); + }, + move: function (t, e) { + var i = this.bbox(); + if (((t -= i.x), (e -= i.y), !isNaN(t) && !isNaN(e))) + for (var a, s = this.value.length - 1; s >= 0; s--) + "M" == (a = this.value[s][0]) || "L" == a || "T" == a + ? ((this.value[s][1] += t), (this.value[s][2] += e)) + : "H" == a + ? (this.value[s][1] += t) + : "V" == a + ? (this.value[s][1] += e) + : "C" == a || "S" == a || "Q" == a + ? ((this.value[s][1] += t), (this.value[s][2] += e), (this.value[s][3] += t), (this.value[s][4] += e), "C" == a && ((this.value[s][5] += t), (this.value[s][6] += e))) + : "A" == a && ((this.value[s][6] += t), (this.value[s][7] += e)); + return this; + }, + size: function (t, e) { + var i, + a, + s = this.bbox(); + for (i = this.value.length - 1; i >= 0; i--) + "M" == (a = this.value[i][0]) || "L" == a || "T" == a + ? ((this.value[i][1] = ((this.value[i][1] - s.x) * t) / s.width + s.x), (this.value[i][2] = ((this.value[i][2] - s.y) * e) / s.height + s.y)) + : "H" == a + ? (this.value[i][1] = ((this.value[i][1] - s.x) * t) / s.width + s.x) + : "V" == a + ? (this.value[i][1] = ((this.value[i][1] - s.y) * e) / s.height + s.y) + : "C" == a || "S" == a || "Q" == a + ? ((this.value[i][1] = ((this.value[i][1] - s.x) * t) / s.width + s.x), + (this.value[i][2] = ((this.value[i][2] - s.y) * e) / s.height + s.y), + (this.value[i][3] = ((this.value[i][3] - s.x) * t) / s.width + s.x), + (this.value[i][4] = ((this.value[i][4] - s.y) * e) / s.height + s.y), + "C" == a && ((this.value[i][5] = ((this.value[i][5] - s.x) * t) / s.width + s.x), (this.value[i][6] = ((this.value[i][6] - s.y) * e) / s.height + s.y))) + : "A" == a && + ((this.value[i][1] = (this.value[i][1] * t) / s.width), + (this.value[i][2] = (this.value[i][2] * e) / s.height), + (this.value[i][6] = ((this.value[i][6] - s.x) * t) / s.width + s.x), + (this.value[i][7] = ((this.value[i][7] - s.y) * e) / s.height + s.y)); + return this; + }, + equalCommands: function (t) { + var e, a, s; + for (t = new i.PathArray(t), s = this.value.length === t.value.length, e = 0, a = this.value.length; s && e < a; e++) s = this.value[e][0] === t.value[e][0]; + return s; + }, + morph: function (t) { + return (t = new i.PathArray(t)), this.equalCommands(t) ? (this.destination = t) : (this.destination = null), this; + }, + at: function (t) { + if (!this.destination) return this; + var e, + a, + s, + n, + r = this.value, + o = this.destination.value, + l = [], + h = new i.PathArray(); + for (e = 0, a = r.length; e < a; e++) { + for (l[e] = [r[e][0]], s = 1, n = r[e].length; s < n; s++) l[e][s] = r[e][s] + (o[e][s] - r[e][s]) * t; + "A" === l[e][0] && ((l[e][4] = +(0 != l[e][4])), (l[e][5] = +(0 != l[e][5]))); + } + return (h.value = l), h; + }, + parse: function (t) { + if (t instanceof i.PathArray) return t.valueOf(); + var e, + s = { M: 2, L: 2, H: 1, V: 1, C: 6, S: 4, Q: 4, T: 2, A: 7, Z: 0 }; + t = + "string" == typeof t + ? t.replace(i.regex.numbersWithDots, h).replace(i.regex.pathLetters, " $& ").replace(i.regex.hyphen, "$1 -").trim().split(i.regex.delimiter) + : t.reduce(function (t, e) { + return [].concat.call(t, e); + }, []); + var n = [], + r = new i.Point(), + o = new i.Point(), + l = 0, + c = t.length; + do { + i.regex.isPathLetter.test(t[l]) ? ((e = t[l]), ++l) : "M" == e ? (e = "L") : "m" == e && (e = "l"), n.push(a[e].call(null, t.slice(l, (l += s[e.toUpperCase()])).map(parseFloat), r, o)); + } while (c > l); + return n; + }, + bbox: function () { + return i.parser.draw || i.prepare(), i.parser.path.setAttribute("d", this.toString()), i.parser.path.getBBox(); + }, + }), + (i.Number = i.invent({ + create: function (t, e) { + (this.value = 0), + (this.unit = e || ""), + "number" == typeof t + ? (this.value = isNaN(t) ? 0 : isFinite(t) ? t : t < 0 ? -3.4e38 : 3.4e38) + : "string" == typeof t + ? (e = t.match(i.regex.numberAndUnit)) && ((this.value = parseFloat(e[1])), "%" == e[5] ? (this.value /= 100) : "s" == e[5] && (this.value *= 1e3), (this.unit = e[5])) + : t instanceof i.Number && ((this.value = t.valueOf()), (this.unit = t.unit)); + }, + extend: { + toString: function () { + return ("%" == this.unit ? ~~(1e8 * this.value) / 1e6 : "s" == this.unit ? this.value / 1e3 : this.value) + this.unit; + }, + toJSON: function () { + return this.toString(); + }, + valueOf: function () { + return this.value; + }, + plus: function (t) { + return (t = new i.Number(t)), new i.Number(this + t, this.unit || t.unit); + }, + minus: function (t) { + return (t = new i.Number(t)), new i.Number(this - t, this.unit || t.unit); + }, + times: function (t) { + return (t = new i.Number(t)), new i.Number(this * t, this.unit || t.unit); + }, + divide: function (t) { + return (t = new i.Number(t)), new i.Number(this / t, this.unit || t.unit); + }, + to: function (t) { + var e = new i.Number(this); + return "string" == typeof t && (e.unit = t), e; + }, + morph: function (t) { + return (this.destination = new i.Number(t)), t.relative && (this.destination.value += this.value), this; + }, + at: function (t) { + return this.destination ? new i.Number(this.destination).minus(this).times(t).plus(this) : this; + }, + }, + })), + (i.Element = i.invent({ + create: function (t) { + (this._stroke = i.defaults.attrs.stroke), + (this._event = null), + (this.dom = {}), + (this.node = t) && ((this.type = t.nodeName), (this.node.instance = this), (this._stroke = t.getAttribute("stroke") || this._stroke)); + }, + extend: { + x: function (t) { + return this.attr("x", t); + }, + y: function (t) { + return this.attr("y", t); + }, + cx: function (t) { + return null == t ? this.x() + this.width() / 2 : this.x(t - this.width() / 2); + }, + cy: function (t) { + return null == t ? this.y() + this.height() / 2 : this.y(t - this.height() / 2); + }, + move: function (t, e) { + return this.x(t).y(e); + }, + center: function (t, e) { + return this.cx(t).cy(e); + }, + width: function (t) { + return this.attr("width", t); + }, + height: function (t) { + return this.attr("height", t); + }, + size: function (t, e) { + var a = f(this, t, e); + return this.width(new i.Number(a.width)).height(new i.Number(a.height)); + }, + clone: function (t) { + this.writeDataToDom(); + var e = v(this.node.cloneNode(!0)); + return t ? t.add(e) : this.after(e), e; + }, + remove: function () { + return this.parent() && this.parent().removeElement(this), this; + }, + replace: function (t) { + return this.after(t).remove(), t; + }, + addTo: function (t) { + return t.put(this); + }, + putIn: function (t) { + return t.add(this); + }, + id: function (t) { + return this.attr("id", t); + }, + inside: function (t, e) { + var i = this.bbox(); + return t > i.x && e > i.y && t < i.x + i.width && e < i.y + i.height; + }, + show: function () { + return this.style("display", ""); + }, + hide: function () { + return this.style("display", "none"); + }, + visible: function () { + return "none" != this.style("display"); + }, + toString: function () { + return this.attr("id"); + }, + classes: function () { + var t = this.attr("class"); + return null == t ? [] : t.trim().split(i.regex.delimiter); + }, + hasClass: function (t) { + return -1 != this.classes().indexOf(t); + }, + addClass: function (t) { + if (!this.hasClass(t)) { + var e = this.classes(); + e.push(t), this.attr("class", e.join(" ")); + } + return this; + }, + removeClass: function (t) { + return ( + this.hasClass(t) && + this.attr( + "class", + this.classes() + .filter(function (e) { + return e != t; + }) + .join(" ") + ), + this + ); + }, + toggleClass: function (t) { + return this.hasClass(t) ? this.removeClass(t) : this.addClass(t); + }, + reference: function (t) { + return i.get(this.attr(t)); + }, + parent: function (e) { + var a = this; + if (!a.node.parentNode) return null; + if (((a = i.adopt(a.node.parentNode)), !e)) return a; + for (; a && a.node instanceof t.SVGElement; ) { + if ("string" == typeof e ? a.matches(e) : a instanceof e) return a; + if (!a.node.parentNode || "#document" == a.node.parentNode.nodeName) return null; + a = i.adopt(a.node.parentNode); + } + }, + doc: function () { + return this instanceof i.Doc ? this : this.parent(i.Doc); + }, + parents: function (t) { + var e = [], + i = this; + do { + if (!(i = i.parent(t)) || !i.node) break; + e.push(i); + } while (i.parent); + return e; + }, + matches: function (t) { + return (function (t, e) { + return (t.matches || t.matchesSelector || t.msMatchesSelector || t.mozMatchesSelector || t.webkitMatchesSelector || t.oMatchesSelector).call(t, e); + })(this.node, t); + }, + native: function () { + return this.node; + }, + svg: function (t) { + var a = e.createElement("svg"); + if (!(t && this instanceof i.Parent)) + return a.appendChild((t = e.createElement("svg"))), this.writeDataToDom(), t.appendChild(this.node.cloneNode(!0)), a.innerHTML.replace(/^<svg>/, "").replace(/<\/svg>$/, ""); + a.innerHTML = "<svg>" + t.replace(/\n/, "").replace(/<([\w:-]+)([^<]+?)\/>/g, "<$1$2></$1>") + "</svg>"; + for (var s = 0, n = a.firstChild.childNodes.length; s < n; s++) this.node.appendChild(a.firstChild.firstChild); + return this; + }, + writeDataToDom: function () { + (this.each || this.lines) && + (this.each ? this : this.lines()).each(function () { + this.writeDataToDom(); + }); + return this.node.removeAttribute("svgjs:data"), Object.keys(this.dom).length && this.node.setAttribute("svgjs:data", JSON.stringify(this.dom)), this; + }, + setData: function (t) { + return (this.dom = t), this; + }, + is: function (t) { + return (function (t, e) { + return t instanceof e; + })(this, t); + }, + }, + })), + (i.easing = { + "-": function (t) { + return t; + }, + "<>": function (t) { + return -Math.cos(t * Math.PI) / 2 + 0.5; + }, + ">": function (t) { + return Math.sin((t * Math.PI) / 2); + }, + "<": function (t) { + return 1 - Math.cos((t * Math.PI) / 2); + }, + }), + (i.morph = function (t) { + return function (e, a) { + return new i.MorphObj(e, a).at(t); + }; + }), + (i.Situation = i.invent({ + create: function (t) { + (this.init = !1), + (this.reversed = !1), + (this.reversing = !1), + (this.duration = new i.Number(t.duration).valueOf()), + (this.delay = new i.Number(t.delay).valueOf()), + (this.start = +new Date() + this.delay), + (this.finish = this.start + this.duration), + (this.ease = t.ease), + (this.loop = 0), + (this.loops = !1), + (this.animations = {}), + (this.attrs = {}), + (this.styles = {}), + (this.transforms = []), + (this.once = {}); + }, + })), + (i.FX = i.invent({ + create: function (t) { + (this._target = t), (this.situations = []), (this.active = !1), (this.situation = null), (this.paused = !1), (this.lastPos = 0), (this.pos = 0), (this.absPos = 0), (this._speed = 1); + }, + extend: { + animate: function (t, e, a) { + "object" === s(t) && ((e = t.ease), (a = t.delay), (t = t.duration)); + var n = new i.Situation({ duration: t || 1e3, delay: a || 0, ease: i.easing[e || "-"] || e }); + return this.queue(n), this; + }, + delay: function (t) { + var e = new i.Situation({ duration: t, delay: 0, ease: i.easing["-"] }); + return this.queue(e); + }, + target: function (t) { + return t && t instanceof i.Element ? ((this._target = t), this) : this._target; + }, + timeToAbsPos: function (t) { + return (t - this.situation.start) / (this.situation.duration / this._speed); + }, + absPosToTime: function (t) { + return (this.situation.duration / this._speed) * t + this.situation.start; + }, + startAnimFrame: function () { + this.stopAnimFrame(), + (this.animationFrame = t.requestAnimationFrame( + function () { + this.step(); + }.bind(this) + )); + }, + stopAnimFrame: function () { + t.cancelAnimationFrame(this.animationFrame); + }, + start: function () { + return !this.active && this.situation && ((this.active = !0), this.startCurrent()), this; + }, + startCurrent: function () { + return (this.situation.start = +new Date() + this.situation.delay / this._speed), (this.situation.finish = this.situation.start + this.situation.duration / this._speed), this.initAnimations().step(); + }, + queue: function (t) { + return ("function" == typeof t || t instanceof i.Situation) && this.situations.push(t), this.situation || (this.situation = this.situations.shift()), this; + }, + dequeue: function () { + return this.stop(), (this.situation = this.situations.shift()), this.situation && (this.situation instanceof i.Situation ? this.start() : this.situation.call(this)), this; + }, + initAnimations: function () { + var t, + e, + a, + s = this.situation; + if (s.init) return this; + for (t in s.animations) + for (a = this.target()[t](), Array.isArray(a) || (a = [a]), Array.isArray(s.animations[t]) || (s.animations[t] = [s.animations[t]]), e = a.length; e--; ) + s.animations[t][e] instanceof i.Number && (a[e] = new i.Number(a[e])), (s.animations[t][e] = a[e].morph(s.animations[t][e])); + for (t in s.attrs) s.attrs[t] = new i.MorphObj(this.target().attr(t), s.attrs[t]); + for (t in s.styles) s.styles[t] = new i.MorphObj(this.target().style(t), s.styles[t]); + return (s.initialTransformation = this.target().matrixify()), (s.init = !0), this; + }, + clearQueue: function () { + return (this.situations = []), this; + }, + clearCurrent: function () { + return (this.situation = null), this; + }, + stop: function (t, e) { + var i = this.active; + return (this.active = !1), e && this.clearQueue(), t && this.situation && (!i && this.startCurrent(), this.atEnd()), this.stopAnimFrame(), this.clearCurrent(); + }, + reset: function () { + if (this.situation) { + var t = this.situation; + this.stop(), (this.situation = t), this.atStart(); + } + return this; + }, + finish: function () { + for (this.stop(!0, !1); this.dequeue().situation && this.stop(!0, !1); ); + return this.clearQueue().clearCurrent(), this; + }, + atStart: function () { + return this.at(0, !0); + }, + atEnd: function () { + return !0 === this.situation.loops && (this.situation.loops = this.situation.loop + 1), "number" == typeof this.situation.loops ? this.at(this.situation.loops, !0) : this.at(1, !0); + }, + at: function (t, e) { + var i = this.situation.duration / this._speed; + return ( + (this.absPos = t), + e || (this.situation.reversed && (this.absPos = 1 - this.absPos), (this.absPos += this.situation.loop)), + (this.situation.start = +new Date() - this.absPos * i), + (this.situation.finish = this.situation.start + i), + this.step(!0) + ); + }, + speed: function (t) { + return 0 === t ? this.pause() : t ? ((this._speed = t), this.at(this.absPos, !0)) : this._speed; + }, + loop: function (t, e) { + var i = this.last(); + return (i.loops = null == t || t), (i.loop = 0), e && (i.reversing = !0), this; + }, + pause: function () { + return (this.paused = !0), this.stopAnimFrame(), this; + }, + play: function () { + return this.paused ? ((this.paused = !1), this.at(this.absPos, !0)) : this; + }, + reverse: function (t) { + var e = this.last(); + return (e.reversed = void 0 === t ? !e.reversed : t), this; + }, + progress: function (t) { + return t ? this.situation.ease(this.pos) : this.pos; + }, + after: function (t) { + var e = this.last(); + return ( + this.target().on("finished.fx", function i(a) { + a.detail.situation == e && (t.call(this, e), this.off("finished.fx", i)); + }), + this._callStart() + ); + }, + during: function (t) { + var e = this.last(), + a = function (a) { + a.detail.situation == e && t.call(this, a.detail.pos, i.morph(a.detail.pos), a.detail.eased, e); + }; + return ( + this.target().off("during.fx", a).on("during.fx", a), + this.after(function () { + this.off("during.fx", a); + }), + this._callStart() + ); + }, + afterAll: function (t) { + var e = function e(i) { + t.call(this), this.off("allfinished.fx", e); + }; + return this.target().off("allfinished.fx", e).on("allfinished.fx", e), this._callStart(); + }, + duringAll: function (t) { + var e = function (e) { + t.call(this, e.detail.pos, i.morph(e.detail.pos), e.detail.eased, e.detail.situation); + }; + return ( + this.target().off("during.fx", e).on("during.fx", e), + this.afterAll(function () { + this.off("during.fx", e); + }), + this._callStart() + ); + }, + last: function () { + return this.situations.length ? this.situations[this.situations.length - 1] : this.situation; + }, + add: function (t, e, i) { + return (this.last()[i || "animations"][t] = e), this._callStart(); + }, + step: function (t) { + var e, i, a; + (t || (this.absPos = this.timeToAbsPos(+new Date())), !1 !== this.situation.loops) + ? ((e = Math.max(this.absPos, 0)), + (i = Math.floor(e)), + !0 === this.situation.loops || i < this.situation.loops + ? ((this.pos = e - i), (a = this.situation.loop), (this.situation.loop = i)) + : ((this.absPos = this.situation.loops), (this.pos = 1), (a = this.situation.loop - 1), (this.situation.loop = this.situation.loops)), + this.situation.reversing && (this.situation.reversed = this.situation.reversed != Boolean((this.situation.loop - a) % 2))) + : ((this.absPos = Math.min(this.absPos, 1)), (this.pos = this.absPos)); + this.pos < 0 && (this.pos = 0), this.situation.reversed && (this.pos = 1 - this.pos); + var s = this.situation.ease(this.pos); + for (var n in this.situation.once) n > this.lastPos && n <= s && (this.situation.once[n].call(this.target(), this.pos, s), delete this.situation.once[n]); + return ( + this.active && this.target().fire("during", { pos: this.pos, eased: s, fx: this, situation: this.situation }), + this.situation + ? (this.eachAt(), + (1 == this.pos && !this.situation.reversed) || (this.situation.reversed && 0 == this.pos) + ? (this.stopAnimFrame(), + this.target().fire("finished", { fx: this, situation: this.situation }), + this.situations.length || (this.target().fire("allfinished"), this.situations.length || (this.target().off(".fx"), (this.active = !1))), + this.active ? this.dequeue() : this.clearCurrent()) + : !this.paused && this.active && this.startAnimFrame(), + (this.lastPos = s), + this) + : this + ); + }, + eachAt: function () { + var t, + e, + a, + s = this, + n = this.target(), + r = this.situation; + for (t in r.animations) + (a = [].concat(r.animations[t]).map(function (t) { + return "string" != typeof t && t.at ? t.at(r.ease(s.pos), s.pos) : t; + })), + n[t].apply(n, a); + for (t in r.attrs) + (a = [t].concat(r.attrs[t]).map(function (t) { + return "string" != typeof t && t.at ? t.at(r.ease(s.pos), s.pos) : t; + })), + n.attr.apply(n, a); + for (t in r.styles) + (a = [t].concat(r.styles[t]).map(function (t) { + return "string" != typeof t && t.at ? t.at(r.ease(s.pos), s.pos) : t; + })), + n.style.apply(n, a); + if (r.transforms.length) { + for (a = r.initialTransformation, t = 0, e = r.transforms.length; t < e; t++) { + var o = r.transforms[t]; + o instanceof i.Matrix + ? (a = o.relative ? a.multiply(new i.Matrix().morph(o).at(r.ease(this.pos))) : a.morph(o).at(r.ease(this.pos))) + : (o.relative || o.undo(a.extract()), (a = a.multiply(o.at(r.ease(this.pos))))); + } + n.matrix(a); + } + return this; + }, + once: function (t, e, i) { + var a = this.last(); + return i || (t = a.ease(t)), (a.once[t] = e), this; + }, + _callStart: function () { + return ( + setTimeout( + function () { + this.start(); + }.bind(this), + 0 + ), + this + ); + }, + }, + parent: i.Element, + construct: { + animate: function (t, e, a) { + return (this.fx || (this.fx = new i.FX(this))).animate(t, e, a); + }, + delay: function (t) { + return (this.fx || (this.fx = new i.FX(this))).delay(t); + }, + stop: function (t, e) { + return this.fx && this.fx.stop(t, e), this; + }, + finish: function () { + return this.fx && this.fx.finish(), this; + }, + pause: function () { + return this.fx && this.fx.pause(), this; + }, + play: function () { + return this.fx && this.fx.play(), this; + }, + speed: function (t) { + if (this.fx) { + if (null == t) return this.fx.speed(); + this.fx.speed(t); + } + return this; + }, + }, + })), + (i.MorphObj = i.invent({ + create: function (t, e) { + return i.Color.isColor(e) + ? new i.Color(t).morph(e) + : i.regex.delimiter.test(t) + ? i.regex.pathLetters.test(t) + ? new i.PathArray(t).morph(e) + : new i.Array(t).morph(e) + : i.regex.numberAndUnit.test(e) + ? new i.Number(t).morph(e) + : ((this.value = t), void (this.destination = e)); + }, + extend: { + at: function (t, e) { + return e < 1 ? this.value : this.destination; + }, + valueOf: function () { + return this.value; + }, + }, + })), + i.extend(i.FX, { + attr: function (t, e, i) { + if ("object" === s(t)) for (var a in t) this.attr(a, t[a]); + else this.add(t, e, "attrs"); + return this; + }, + style: function (t, e) { + if ("object" === s(t)) for (var i in t) this.style(i, t[i]); + else this.add(t, e, "styles"); + return this; + }, + x: function (t, e) { + if (this.target() instanceof i.G) return this.transform({ x: t }, e), this; + var a = new i.Number(t); + return (a.relative = e), this.add("x", a); + }, + y: function (t, e) { + if (this.target() instanceof i.G) return this.transform({ y: t }, e), this; + var a = new i.Number(t); + return (a.relative = e), this.add("y", a); + }, + cx: function (t) { + return this.add("cx", new i.Number(t)); + }, + cy: function (t) { + return this.add("cy", new i.Number(t)); + }, + move: function (t, e) { + return this.x(t).y(e); + }, + center: function (t, e) { + return this.cx(t).cy(e); + }, + size: function (t, e) { + var a; + this.target() instanceof i.Text + ? this.attr("font-size", t) + : ((t && e) || (a = this.target().bbox()), t || (t = (a.width / a.height) * e), e || (e = (a.height / a.width) * t), this.add("width", new i.Number(t)).add("height", new i.Number(e))); + return this; + }, + width: function (t) { + return this.add("width", new i.Number(t)); + }, + height: function (t) { + return this.add("height", new i.Number(t)); + }, + plot: function (t, e, i, a) { + return 4 == arguments.length ? this.plot([t, e, i, a]) : this.add("plot", new (this.target().morphArray)(t)); + }, + leading: function (t) { + return this.target().leading ? this.add("leading", new i.Number(t)) : this; + }, + viewbox: function (t, e, a, s) { + return this.target() instanceof i.Container && this.add("viewbox", new i.ViewBox(t, e, a, s)), this; + }, + update: function (t) { + if (this.target() instanceof i.Stop) { + if ("number" == typeof t || t instanceof i.Number) return this.update({ offset: arguments[0], color: arguments[1], opacity: arguments[2] }); + null != t.opacity && this.attr("stop-opacity", t.opacity), null != t.color && this.attr("stop-color", t.color), null != t.offset && this.attr("offset", t.offset); + } + return this; + }, + }), + (i.Box = i.invent({ + create: function (t, e, a, n) { + if (!("object" !== s(t) || t instanceof i.Element)) return i.Box.call(this, null != t.left ? t.left : t.x, null != t.top ? t.top : t.y, t.width, t.height); + 4 == arguments.length && ((this.x = t), (this.y = e), (this.width = a), (this.height = n)), m(this); + }, + extend: { + merge: function (t) { + var e = new this.constructor(); + return ( + (e.x = Math.min(this.x, t.x)), (e.y = Math.min(this.y, t.y)), (e.width = Math.max(this.x + this.width, t.x + t.width) - e.x), (e.height = Math.max(this.y + this.height, t.y + t.height) - e.y), m(e) + ); + }, + transform: function (t) { + var e, + a = 1 / 0, + s = -1 / 0, + n = 1 / 0, + r = -1 / 0; + return ( + [new i.Point(this.x, this.y), new i.Point(this.x2, this.y), new i.Point(this.x, this.y2), new i.Point(this.x2, this.y2)].forEach(function (e) { + (e = e.transform(t)), (a = Math.min(a, e.x)), (s = Math.max(s, e.x)), (n = Math.min(n, e.y)), (r = Math.max(r, e.y)); + }), + ((e = new this.constructor()).x = a), + (e.width = s - a), + (e.y = n), + (e.height = r - n), + m(e), + e + ); + }, + }, + })), + (i.BBox = i.invent({ + create: function (t) { + if ((i.Box.apply(this, [].slice.call(arguments)), t instanceof i.Element)) { + var a; + try { + if (!e.documentElement.contains) { + for (var s = t.node; s.parentNode; ) s = s.parentNode; + if (s != e) throw new Error("Element not in the dom"); + } + a = t.node.getBBox(); + } catch (e) { + if (t instanceof i.Shape) { + i.parser.draw || i.prepare(); + var n = t.clone(i.parser.draw.instance).show(); + (a = n.node.getBBox()), n.remove(); + } else a = { x: t.node.clientLeft, y: t.node.clientTop, width: t.node.clientWidth, height: t.node.clientHeight }; + } + i.Box.call(this, a); + } + }, + inherit: i.Box, + parent: i.Element, + construct: { + bbox: function () { + return new i.BBox(this); + }, + }, + })), + (i.BBox.prototype.constructor = i.BBox), + i.extend(i.Element, { + tbox: function () { + return console.warn("Use of TBox is deprecated and mapped to RBox. Use .rbox() instead."), this.rbox(this.doc()); + }, + }), + (i.RBox = i.invent({ + create: function (t) { + i.Box.apply(this, [].slice.call(arguments)), t instanceof i.Element && i.Box.call(this, t.node.getBoundingClientRect()); + }, + inherit: i.Box, + parent: i.Element, + extend: { + addOffset: function () { + return (this.x += t.pageXOffset), (this.y += t.pageYOffset), this; + }, + }, + construct: { + rbox: function (t) { + return t ? new i.RBox(this).transform(t.screenCTM().inverse()) : new i.RBox(this).addOffset(); + }, + }, + })), + (i.RBox.prototype.constructor = i.RBox), + (i.Matrix = i.invent({ + create: function (t) { + var e, + a = p([1, 0, 0, 1, 0, 0]); + for ( + t = + t instanceof i.Element + ? t.matrixify() + : "string" == typeof t + ? p(t.split(i.regex.delimiter).map(parseFloat)) + : 6 == arguments.length + ? p([].slice.call(arguments)) + : Array.isArray(t) + ? p(t) + : "object" === s(t) + ? t + : a, + e = y.length - 1; + e >= 0; + --e + ) + this[y[e]] = null != t[y[e]] ? t[y[e]] : a[y[e]]; + }, + extend: { + extract: function () { + var t = g(this, 0, 1), + e = g(this, 1, 0), + a = (180 / Math.PI) * Math.atan2(t.y, t.x) - 90; + return { + x: this.e, + y: this.f, + transformedX: (this.e * Math.cos((a * Math.PI) / 180) + this.f * Math.sin((a * Math.PI) / 180)) / Math.sqrt(this.a * this.a + this.b * this.b), + transformedY: (this.f * Math.cos((a * Math.PI) / 180) + this.e * Math.sin((-a * Math.PI) / 180)) / Math.sqrt(this.c * this.c + this.d * this.d), + skewX: -a, + skewY: (180 / Math.PI) * Math.atan2(e.y, e.x), + scaleX: Math.sqrt(this.a * this.a + this.b * this.b), + scaleY: Math.sqrt(this.c * this.c + this.d * this.d), + rotation: a, + a: this.a, + b: this.b, + c: this.c, + d: this.d, + e: this.e, + f: this.f, + matrix: new i.Matrix(this), + }; + }, + clone: function () { + return new i.Matrix(this); + }, + morph: function (t) { + return (this.destination = new i.Matrix(t)), this; + }, + at: function (t) { + return this.destination + ? new i.Matrix({ + a: this.a + (this.destination.a - this.a) * t, + b: this.b + (this.destination.b - this.b) * t, + c: this.c + (this.destination.c - this.c) * t, + d: this.d + (this.destination.d - this.d) * t, + e: this.e + (this.destination.e - this.e) * t, + f: this.f + (this.destination.f - this.f) * t, + }) + : this; + }, + multiply: function (t) { + return new i.Matrix( + this.native().multiply( + (function (t) { + t instanceof i.Matrix || (t = new i.Matrix(t)); + return t; + })(t).native() + ) + ); + }, + inverse: function () { + return new i.Matrix(this.native().inverse()); + }, + translate: function (t, e) { + return new i.Matrix(this.native().translate(t || 0, e || 0)); + }, + scale: function (t, e, a, s) { + return 1 == arguments.length ? (e = t) : 3 == arguments.length && ((s = a), (a = e), (e = t)), this.around(a, s, new i.Matrix(t, 0, 0, e, 0, 0)); + }, + rotate: function (t, e, a) { + return (t = i.utils.radians(t)), this.around(e, a, new i.Matrix(Math.cos(t), Math.sin(t), -Math.sin(t), Math.cos(t), 0, 0)); + }, + flip: function (t, e) { + return "x" == t ? this.scale(-1, 1, e, 0) : "y" == t ? this.scale(1, -1, 0, e) : this.scale(-1, -1, t, null != e ? e : t); + }, + skew: function (t, e, a, s) { + return ( + 1 == arguments.length ? (e = t) : 3 == arguments.length && ((s = a), (a = e), (e = t)), + (t = i.utils.radians(t)), + (e = i.utils.radians(e)), + this.around(a, s, new i.Matrix(1, Math.tan(e), Math.tan(t), 1, 0, 0)) + ); + }, + skewX: function (t, e, i) { + return this.skew(t, 0, e, i); + }, + skewY: function (t, e, i) { + return this.skew(0, t, e, i); + }, + around: function (t, e, a) { + return this.multiply(new i.Matrix(1, 0, 0, 1, t || 0, e || 0)) + .multiply(a) + .multiply(new i.Matrix(1, 0, 0, 1, -t || 0, -e || 0)); + }, + native: function () { + for (var t = i.parser.native.createSVGMatrix(), e = y.length - 1; e >= 0; e--) t[y[e]] = this[y[e]]; + return t; + }, + toString: function () { + return "matrix(" + b(this.a) + "," + b(this.b) + "," + b(this.c) + "," + b(this.d) + "," + b(this.e) + "," + b(this.f) + ")"; + }, + }, + parent: i.Element, + construct: { + ctm: function () { + return new i.Matrix(this.node.getCTM()); + }, + screenCTM: function () { + if (this instanceof i.Nested) { + var t = this.rect(1, 1), + e = t.node.getScreenCTM(); + return t.remove(), new i.Matrix(e); + } + return new i.Matrix(this.node.getScreenCTM()); + }, + }, + })), + (i.Point = i.invent({ + create: function (t, e) { + var i; + (i = Array.isArray(t) ? { x: t[0], y: t[1] } : "object" === s(t) ? { x: t.x, y: t.y } : null != t ? { x: t, y: null != e ? e : t } : { x: 0, y: 0 }), (this.x = i.x), (this.y = i.y); + }, + extend: { + clone: function () { + return new i.Point(this); + }, + morph: function (t, e) { + return (this.destination = new i.Point(t, e)), this; + }, + at: function (t) { + return this.destination ? new i.Point({ x: this.x + (this.destination.x - this.x) * t, y: this.y + (this.destination.y - this.y) * t }) : this; + }, + native: function () { + var t = i.parser.native.createSVGPoint(); + return (t.x = this.x), (t.y = this.y), t; + }, + transform: function (t) { + return new i.Point(this.native().matrixTransform(t.native())); + }, + }, + })), + i.extend(i.Element, { + point: function (t, e) { + return new i.Point(t, e).transform(this.screenCTM().inverse()); + }, + }), + i.extend(i.Element, { + attr: function (t, e, a) { + if (null == t) { + for (t = {}, a = (e = this.node.attributes).length - 1; a >= 0; a--) t[e[a].nodeName] = i.regex.isNumber.test(e[a].nodeValue) ? parseFloat(e[a].nodeValue) : e[a].nodeValue; + return t; + } + if ("object" === s(t)) for (e in t) this.attr(e, t[e]); + else if (null === e) this.node.removeAttribute(t); + else { + if (null == e) return null == (e = this.node.getAttribute(t)) ? i.defaults.attrs[t] : i.regex.isNumber.test(e) ? parseFloat(e) : e; + "stroke-width" == t ? this.attr("stroke", parseFloat(e) > 0 ? this._stroke : null) : "stroke" == t && (this._stroke = e), + ("fill" != t && "stroke" != t) || + (i.regex.isImage.test(e) && (e = this.doc().defs().image(e, 0, 0)), + e instanceof i.Image && + (e = this.doc() + .defs() + .pattern(0, 0, function () { + this.add(e); + }))), + "number" == typeof e ? (e = new i.Number(e)) : i.Color.isColor(e) ? (e = new i.Color(e)) : Array.isArray(e) && (e = new i.Array(e)), + "leading" == t ? this.leading && this.leading(e) : "string" == typeof a ? this.node.setAttributeNS(a, t, e.toString()) : this.node.setAttribute(t, e.toString()), + !this.rebuild || ("font-size" != t && "x" != t) || this.rebuild(t, e); + } + return this; + }, + }), + i.extend(i.Element, { + transform: function (t, e) { + var a, n; + if ("object" !== s(t)) return (a = new i.Matrix(this).extract()), "string" == typeof t ? a[t] : a; + if (((a = new i.Matrix(this)), (e = !!e || !!t.relative), null != t.a)) a = e ? a.multiply(new i.Matrix(t)) : new i.Matrix(t); + else if (null != t.rotation) x(t, this), (a = e ? a.rotate(t.rotation, t.cx, t.cy) : a.rotate(t.rotation - a.extract().rotation, t.cx, t.cy)); + else if (null != t.scale || null != t.scaleX || null != t.scaleY) { + if ((x(t, this), (t.scaleX = null != t.scale ? t.scale : null != t.scaleX ? t.scaleX : 1), (t.scaleY = null != t.scale ? t.scale : null != t.scaleY ? t.scaleY : 1), !e)) { + var r = a.extract(); + (t.scaleX = (1 * t.scaleX) / r.scaleX), (t.scaleY = (1 * t.scaleY) / r.scaleY); + } + a = a.scale(t.scaleX, t.scaleY, t.cx, t.cy); + } else if (null != t.skew || null != t.skewX || null != t.skewY) { + if ((x(t, this), (t.skewX = null != t.skew ? t.skew : null != t.skewX ? t.skewX : 0), (t.skewY = null != t.skew ? t.skew : null != t.skewY ? t.skewY : 0), !e)) { + r = a.extract(); + a = a.multiply(new i.Matrix().skew(r.skewX, r.skewY, t.cx, t.cy).inverse()); + } + a = a.skew(t.skewX, t.skewY, t.cx, t.cy); + } else + t.flip + ? ("x" == t.flip || "y" == t.flip + ? (t.offset = null == t.offset ? this.bbox()["c" + t.flip] : t.offset) + : null == t.offset + ? ((n = this.bbox()), (t.flip = n.cx), (t.offset = n.cy)) + : (t.flip = t.offset), + (a = new i.Matrix().flip(t.flip, t.offset))) + : (null == t.x && null == t.y) || (e ? (a = a.translate(t.x, t.y)) : (null != t.x && (a.e = t.x), null != t.y && (a.f = t.y))); + return this.attr("transform", a); + }, + }), + i.extend(i.FX, { + transform: function (t, e) { + var a, + n, + r = this.target(); + return "object" !== s(t) + ? ((a = new i.Matrix(r).extract()), "string" == typeof t ? a[t] : a) + : ((e = !!e || !!t.relative), + null != t.a + ? (a = new i.Matrix(t)) + : null != t.rotation + ? (x(t, r), (a = new i.Rotate(t.rotation, t.cx, t.cy))) + : null != t.scale || null != t.scaleX || null != t.scaleY + ? (x(t, r), + (t.scaleX = null != t.scale ? t.scale : null != t.scaleX ? t.scaleX : 1), + (t.scaleY = null != t.scale ? t.scale : null != t.scaleY ? t.scaleY : 1), + (a = new i.Scale(t.scaleX, t.scaleY, t.cx, t.cy))) + : null != t.skewX || null != t.skewY + ? (x(t, r), (t.skewX = null != t.skewX ? t.skewX : 0), (t.skewY = null != t.skewY ? t.skewY : 0), (a = new i.Skew(t.skewX, t.skewY, t.cx, t.cy))) + : t.flip + ? ("x" == t.flip || "y" == t.flip ? (t.offset = null == t.offset ? r.bbox()["c" + t.flip] : t.offset) : null == t.offset ? ((n = r.bbox()), (t.flip = n.cx), (t.offset = n.cy)) : (t.flip = t.offset), + (a = new i.Matrix().flip(t.flip, t.offset))) + : (null == t.x && null == t.y) || (a = new i.Translate(t.x, t.y)), + a ? ((a.relative = e), this.last().transforms.push(a), this._callStart()) : this); + }, + }), + i.extend(i.Element, { + untransform: function () { + return this.attr("transform", null); + }, + matrixify: function () { + return (this.attr("transform") || "") + .split(i.regex.transforms) + .slice(0, -1) + .map(function (t) { + var e = t.trim().split("("); + return [ + e[0], + e[1].split(i.regex.delimiter).map(function (t) { + return parseFloat(t); + }), + ]; + }) + .reduce(function (t, e) { + return "matrix" == e[0] ? t.multiply(p(e[1])) : t[e[0]].apply(t, e[1]); + }, new i.Matrix()); + }, + toParent: function (t) { + if (this == t) return this; + var e = this.screenCTM(), + i = t.screenCTM().inverse(); + return this.addTo(t).untransform().transform(i.multiply(e)), this; + }, + toDoc: function () { + return this.toParent(this.doc()); + }, + }), + (i.Transformation = i.invent({ + create: function (t, e) { + if (arguments.length > 1 && "boolean" != typeof e) return this.constructor.call(this, [].slice.call(arguments)); + if (Array.isArray(t)) for (var i = 0, a = this.arguments.length; i < a; ++i) this[this.arguments[i]] = t[i]; + else if ("object" === s(t)) for (i = 0, a = this.arguments.length; i < a; ++i) this[this.arguments[i]] = t[this.arguments[i]]; + (this.inversed = !1), !0 === e && (this.inversed = !0); + }, + extend: { + arguments: [], + method: "", + at: function (t) { + for (var e = [], a = 0, s = this.arguments.length; a < s; ++a) e.push(this[this.arguments[a]]); + var n = this._undo || new i.Matrix(); + return (n = new i.Matrix().morph(i.Matrix.prototype[this.method].apply(n, e)).at(t)), this.inversed ? n.inverse() : n; + }, + undo: function (t) { + for (var e = 0, a = this.arguments.length; e < a; ++e) t[this.arguments[e]] = void 0 === this[this.arguments[e]] ? 0 : t[this.arguments[e]]; + return (t.cx = this.cx), (t.cy = this.cy), (this._undo = new i[d(this.method)](t, !0).at(1)), this; + }, + }, + })), + (i.Translate = i.invent({ + parent: i.Matrix, + inherit: i.Transformation, + create: function (t, e) { + this.constructor.apply(this, [].slice.call(arguments)); + }, + extend: { arguments: ["transformedX", "transformedY"], method: "translate" }, + })), + (i.Rotate = i.invent({ + parent: i.Matrix, + inherit: i.Transformation, + create: function (t, e) { + this.constructor.apply(this, [].slice.call(arguments)); + }, + extend: { + arguments: ["rotation", "cx", "cy"], + method: "rotate", + at: function (t) { + var e = new i.Matrix().rotate(new i.Number().morph(this.rotation - (this._undo ? this._undo.rotation : 0)).at(t), this.cx, this.cy); + return this.inversed ? e.inverse() : e; + }, + undo: function (t) { + return (this._undo = t), this; + }, + }, + })), + (i.Scale = i.invent({ + parent: i.Matrix, + inherit: i.Transformation, + create: function (t, e) { + this.constructor.apply(this, [].slice.call(arguments)); + }, + extend: { arguments: ["scaleX", "scaleY", "cx", "cy"], method: "scale" }, + })), + (i.Skew = i.invent({ + parent: i.Matrix, + inherit: i.Transformation, + create: function (t, e) { + this.constructor.apply(this, [].slice.call(arguments)); + }, + extend: { arguments: ["skewX", "skewY", "cx", "cy"], method: "skew" }, + })), + i.extend(i.Element, { + style: function (t, e) { + if (0 == arguments.length) return this.node.style.cssText || ""; + if (arguments.length < 2) + if ("object" === s(t)) for (e in t) this.style(e, t[e]); + else { + if (!i.regex.isCss.test(t)) return this.node.style[c(t)]; + for ( + t = t + .split(/\s*;\s*/) + .filter(function (t) { + return !!t; + }) + .map(function (t) { + return t.split(/\s*:\s*/); + }); + (e = t.pop()); + + ) + this.style(e[0], e[1]); + } + else this.node.style[c(t)] = null === e || i.regex.isBlank.test(e) ? "" : e; + return this; + }, + }), + (i.Parent = i.invent({ + create: function (t) { + this.constructor.call(this, t); + }, + inherit: i.Element, + extend: { + children: function () { + return i.utils.map(i.utils.filterSVGElements(this.node.childNodes), function (t) { + return i.adopt(t); + }); + }, + add: function (t, e) { + return null == e ? this.node.appendChild(t.node) : t.node != this.node.childNodes[e] && this.node.insertBefore(t.node, this.node.childNodes[e]), this; + }, + put: function (t, e) { + return this.add(t, e), t; + }, + has: function (t) { + return this.index(t) >= 0; + }, + index: function (t) { + return [].slice.call(this.node.childNodes).indexOf(t.node); + }, + get: function (t) { + return i.adopt(this.node.childNodes[t]); + }, + first: function () { + return this.get(0); + }, + last: function () { + return this.get(this.node.childNodes.length - 1); + }, + each: function (t, e) { + var a, + s, + n = this.children(); + for (a = 0, s = n.length; a < s; a++) n[a] instanceof i.Element && t.apply(n[a], [a, n]), e && n[a] instanceof i.Container && n[a].each(t, e); + return this; + }, + removeElement: function (t) { + return this.node.removeChild(t.node), this; + }, + clear: function () { + for (; this.node.hasChildNodes(); ) this.node.removeChild(this.node.lastChild); + return delete this._defs, this; + }, + defs: function () { + return this.doc().defs(); + }, + }, + })), + i.extend(i.Parent, { + ungroup: function (t, e) { + return 0 === e || this instanceof i.Defs || this.node == i.parser.draw + ? this + : ((t = t || (this instanceof i.Doc ? this : this.parent(i.Parent))), + (e = e || 1 / 0), + this.each(function () { + return this instanceof i.Defs ? this : this instanceof i.Parent ? this.ungroup(t, e - 1) : this.toParent(t); + }), + this.node.firstChild || this.remove(), + this); + }, + flatten: function (t, e) { + return this.ungroup(t, e); + }, + }), + (i.Container = i.invent({ + create: function (t) { + this.constructor.call(this, t); + }, + inherit: i.Parent, + })), + (i.ViewBox = i.invent({ + create: function (t) { + var e, + a, + n, + r, + o, + l, + h, + c = 1, + d = 1, + u = /[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?/gi; + if (t instanceof i.Element) { + for (l = t, h = t, o = (t.attr("viewBox") || "").match(u), t.bbox, n = new i.Number(t.width()), r = new i.Number(t.height()); "%" == n.unit; ) + (c *= n.value), (n = new i.Number(l instanceof i.Doc ? l.parent().offsetWidth : l.parent().width())), (l = l.parent()); + for (; "%" == r.unit; ) (d *= r.value), (r = new i.Number(h instanceof i.Doc ? h.parent().offsetHeight : h.parent().height())), (h = h.parent()); + (this.x = 0), + (this.y = 0), + (this.width = n * c), + (this.height = r * d), + (this.zoom = 1), + o && + ((e = parseFloat(o[0])), + (a = parseFloat(o[1])), + (n = parseFloat(o[2])), + (r = parseFloat(o[3])), + (this.zoom = this.width / this.height > n / r ? this.height / r : this.width / n), + (this.x = e), + (this.y = a), + (this.width = n), + (this.height = r)); + } else + (t = + "string" == typeof t + ? t.match(u).map(function (t) { + return parseFloat(t); + }) + : Array.isArray(t) + ? t + : "object" === s(t) + ? [t.x, t.y, t.width, t.height] + : 4 == arguments.length + ? [].slice.call(arguments) + : [0, 0, 0, 0]), + (this.x = t[0]), + (this.y = t[1]), + (this.width = t[2]), + (this.height = t[3]); + }, + extend: { + toString: function () { + return this.x + " " + this.y + " " + this.width + " " + this.height; + }, + morph: function (t, e, a, s) { + return (this.destination = new i.ViewBox(t, e, a, s)), this; + }, + at: function (t) { + return this.destination + ? new i.ViewBox([ + this.x + (this.destination.x - this.x) * t, + this.y + (this.destination.y - this.y) * t, + this.width + (this.destination.width - this.width) * t, + this.height + (this.destination.height - this.height) * t, + ]) + : this; + }, + }, + parent: i.Container, + construct: { + viewbox: function (t, e, a, s) { + return 0 == arguments.length ? new i.ViewBox(this) : this.attr("viewBox", new i.ViewBox(t, e, a, s)); + }, + }, + })), + ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "mousemove", "touchstart", "touchmove", "touchleave", "touchend", "touchcancel"].forEach(function (t) { + i.Element.prototype[t] = function (e) { + return i.on(this.node, t, e), this; + }; + }), + (i.listeners = []), + (i.handlerMap = []), + (i.listenerId = 0), + (i.on = function (t, e, a, s, n) { + var r = a.bind(s || t.instance || t), + o = (i.handlerMap.indexOf(t) + 1 || i.handlerMap.push(t)) - 1, + l = e.split(".")[0], + h = e.split(".")[1] || "*"; + (i.listeners[o] = i.listeners[o] || {}), + (i.listeners[o][l] = i.listeners[o][l] || {}), + (i.listeners[o][l][h] = i.listeners[o][l][h] || {}), + a._svgjsListenerId || (a._svgjsListenerId = ++i.listenerId), + (i.listeners[o][l][h][a._svgjsListenerId] = r), + t.addEventListener(l, r, n || !1); + }), + (i.off = function (t, e, a) { + var s = i.handlerMap.indexOf(t), + n = e && e.split(".")[0], + r = e && e.split(".")[1], + o = ""; + if (-1 != s) + if (a) { + if (("function" == typeof a && (a = a._svgjsListenerId), !a)) return; + i.listeners[s][n] && i.listeners[s][n][r || "*"] && (t.removeEventListener(n, i.listeners[s][n][r || "*"][a], !1), delete i.listeners[s][n][r || "*"][a]); + } else if (r && n) { + if (i.listeners[s][n] && i.listeners[s][n][r]) { + for (a in i.listeners[s][n][r]) i.off(t, [n, r].join("."), a); + delete i.listeners[s][n][r]; + } + } else if (r) for (e in i.listeners[s]) for (o in i.listeners[s][e]) r === o && i.off(t, [e, r].join(".")); + else if (n) { + if (i.listeners[s][n]) { + for (o in i.listeners[s][n]) i.off(t, [n, o].join(".")); + delete i.listeners[s][n]; + } + } else { + for (e in i.listeners[s]) i.off(t, e); + delete i.listeners[s], delete i.handlerMap[s]; + } + }), + i.extend(i.Element, { + on: function (t, e, a, s) { + return i.on(this.node, t, e, a, s), this; + }, + off: function (t, e) { + return i.off(this.node, t, e), this; + }, + fire: function (e, a) { + return e instanceof t.Event ? this.node.dispatchEvent(e) : this.node.dispatchEvent((e = new i.CustomEvent(e, { detail: a, cancelable: !0 }))), (this._event = e), this; + }, + event: function () { + return this._event; + }, + }), + (i.Defs = i.invent({ create: "defs", inherit: i.Container })), + (i.G = i.invent({ + create: "g", + inherit: i.Container, + extend: { + x: function (t) { + return null == t ? this.transform("x") : this.transform({ x: t - this.x() }, !0); + }, + y: function (t) { + return null == t ? this.transform("y") : this.transform({ y: t - this.y() }, !0); + }, + cx: function (t) { + return null == t ? this.gbox().cx : this.x(t - this.gbox().width / 2); + }, + cy: function (t) { + return null == t ? this.gbox().cy : this.y(t - this.gbox().height / 2); + }, + gbox: function () { + var t = this.bbox(), + e = this.transform(); + return (t.x += e.x), (t.x2 += e.x), (t.cx += e.x), (t.y += e.y), (t.y2 += e.y), (t.cy += e.y), t; + }, + }, + construct: { + group: function () { + return this.put(new i.G()); + }, + }, + })), + (i.Doc = i.invent({ + create: function (t) { + t && + ("svg" == (t = "string" == typeof t ? e.getElementById(t) : t).nodeName + ? this.constructor.call(this, t) + : (this.constructor.call(this, i.create("svg")), t.appendChild(this.node), this.size("100%", "100%")), + this.namespace().defs()); + }, + inherit: i.Container, + extend: { + namespace: function () { + return this.attr({ xmlns: i.ns, version: "1.1" }).attr("xmlns:xlink", i.xlink, i.xmlns).attr("xmlns:svgjs", i.svgjs, i.xmlns); + }, + defs: function () { + var t; + this._defs || ((t = this.node.getElementsByTagName("defs")[0]) ? (this._defs = i.adopt(t)) : (this._defs = new i.Defs()), this.node.appendChild(this._defs.node)); + return this._defs; + }, + parent: function () { + return this.node.parentNode && "#document" != this.node.parentNode.nodeName ? this.node.parentNode : null; + }, + spof: function () { + var t = this.node.getScreenCTM(); + return t && this.style("left", (-t.e % 1) + "px").style("top", (-t.f % 1) + "px"), this; + }, + remove: function () { + return this.parent() && this.parent().removeChild(this.node), this; + }, + clear: function () { + for (; this.node.hasChildNodes(); ) this.node.removeChild(this.node.lastChild); + return delete this._defs, i.parser.draw && !i.parser.draw.parentNode && this.node.appendChild(i.parser.draw), this; + }, + clone: function (t) { + this.writeDataToDom(); + var e = this.node, + i = v(e.cloneNode(!0)); + return t ? (t.node || t).appendChild(i.node) : e.parentNode.insertBefore(i.node, e.nextSibling), i; + }, + }, + })), + i.extend(i.Element, { + siblings: function () { + return this.parent().children(); + }, + position: function () { + return this.parent().index(this); + }, + next: function () { + return this.siblings()[this.position() + 1]; + }, + previous: function () { + return this.siblings()[this.position() - 1]; + }, + forward: function () { + var t = this.position() + 1, + e = this.parent(); + return e.removeElement(this).add(this, t), e instanceof i.Doc && e.node.appendChild(e.defs().node), this; + }, + backward: function () { + var t = this.position(); + return ( + t > 0 && + this.parent() + .removeElement(this) + .add(this, t - 1), + this + ); + }, + front: function () { + var t = this.parent(); + return t.node.appendChild(this.node), t instanceof i.Doc && t.node.appendChild(t.defs().node), this; + }, + back: function () { + return this.position() > 0 && this.parent().removeElement(this).add(this, 0), this; + }, + before: function (t) { + t.remove(); + var e = this.position(); + return this.parent().add(t, e), this; + }, + after: function (t) { + t.remove(); + var e = this.position(); + return this.parent().add(t, e + 1), this; + }, + }), + (i.Mask = i.invent({ + create: function () { + this.constructor.call(this, i.create("mask")), (this.targets = []); + }, + inherit: i.Container, + extend: { + remove: function () { + for (var t = this.targets.length - 1; t >= 0; t--) this.targets[t] && this.targets[t].unmask(); + return (this.targets = []), i.Element.prototype.remove.call(this), this; + }, + }, + construct: { + mask: function () { + return this.defs().put(new i.Mask()); + }, + }, + })), + i.extend(i.Element, { + maskWith: function (t) { + return (this.masker = t instanceof i.Mask ? t : this.parent().mask().add(t)), this.masker.targets.push(this), this.attr("mask", 'url("#' + this.masker.attr("id") + '")'); + }, + unmask: function () { + return delete this.masker, this.attr("mask", null); + }, + }), + (i.ClipPath = i.invent({ + create: function () { + this.constructor.call(this, i.create("clipPath")), (this.targets = []); + }, + inherit: i.Container, + extend: { + remove: function () { + for (var t = this.targets.length - 1; t >= 0; t--) this.targets[t] && this.targets[t].unclip(); + return (this.targets = []), this.parent().removeElement(this), this; + }, + }, + construct: { + clip: function () { + return this.defs().put(new i.ClipPath()); + }, + }, + })), + i.extend(i.Element, { + clipWith: function (t) { + return (this.clipper = t instanceof i.ClipPath ? t : this.parent().clip().add(t)), this.clipper.targets.push(this), this.attr("clip-path", 'url("#' + this.clipper.attr("id") + '")'); + }, + unclip: function () { + return delete this.clipper, this.attr("clip-path", null); + }, + }), + (i.Gradient = i.invent({ + create: function (t) { + this.constructor.call(this, i.create(t + "Gradient")), (this.type = t); + }, + inherit: i.Container, + extend: { + at: function (t, e, a) { + return this.put(new i.Stop()).update(t, e, a); + }, + update: function (t) { + return this.clear(), "function" == typeof t && t.call(this, this), this; + }, + fill: function () { + return "url(#" + this.id() + ")"; + }, + toString: function () { + return this.fill(); + }, + attr: function (t, e, a) { + return "transform" == t && (t = "gradientTransform"), i.Container.prototype.attr.call(this, t, e, a); + }, + }, + construct: { + gradient: function (t, e) { + return this.defs().gradient(t, e); + }, + }, + })), + i.extend(i.Gradient, i.FX, { + from: function (t, e) { + return "radial" == (this._target || this).type ? this.attr({ fx: new i.Number(t), fy: new i.Number(e) }) : this.attr({ x1: new i.Number(t), y1: new i.Number(e) }); + }, + to: function (t, e) { + return "radial" == (this._target || this).type ? this.attr({ cx: new i.Number(t), cy: new i.Number(e) }) : this.attr({ x2: new i.Number(t), y2: new i.Number(e) }); + }, + }), + i.extend(i.Defs, { + gradient: function (t, e) { + return this.put(new i.Gradient(t)).update(e); + }, + }), + (i.Stop = i.invent({ + create: "stop", + inherit: i.Element, + extend: { + update: function (t) { + return ( + ("number" == typeof t || t instanceof i.Number) && (t = { offset: arguments[0], color: arguments[1], opacity: arguments[2] }), + null != t.opacity && this.attr("stop-opacity", t.opacity), + null != t.color && this.attr("stop-color", t.color), + null != t.offset && this.attr("offset", new i.Number(t.offset)), + this + ); + }, + }, + })), + (i.Pattern = i.invent({ + create: "pattern", + inherit: i.Container, + extend: { + fill: function () { + return "url(#" + this.id() + ")"; + }, + update: function (t) { + return this.clear(), "function" == typeof t && t.call(this, this), this; + }, + toString: function () { + return this.fill(); + }, + attr: function (t, e, a) { + return "transform" == t && (t = "patternTransform"), i.Container.prototype.attr.call(this, t, e, a); + }, + }, + construct: { + pattern: function (t, e, i) { + return this.defs().pattern(t, e, i); + }, + }, + })), + i.extend(i.Defs, { + pattern: function (t, e, a) { + return this.put(new i.Pattern()).update(a).attr({ x: 0, y: 0, width: t, height: e, patternUnits: "userSpaceOnUse" }); + }, + }), + (i.Shape = i.invent({ + create: function (t) { + this.constructor.call(this, t); + }, + inherit: i.Element, + })), + (i.Bare = i.invent({ + create: function (t, e) { + if ((this.constructor.call(this, i.create(t)), e)) for (var a in e.prototype) "function" == typeof e.prototype[a] && (this[a] = e.prototype[a]); + }, + inherit: i.Element, + extend: { + words: function (t) { + for (; this.node.hasChildNodes(); ) this.node.removeChild(this.node.lastChild); + return this.node.appendChild(e.createTextNode(t)), this; + }, + }, + })), + i.extend(i.Parent, { + element: function (t, e) { + return this.put(new i.Bare(t, e)); + }, + }), + (i.Symbol = i.invent({ + create: "symbol", + inherit: i.Container, + construct: { + symbol: function () { + return this.put(new i.Symbol()); + }, + }, + })), + (i.Use = i.invent({ + create: "use", + inherit: i.Shape, + extend: { + element: function (t, e) { + return this.attr("href", (e || "") + "#" + t, i.xlink); + }, + }, + construct: { + use: function (t, e) { + return this.put(new i.Use()).element(t, e); + }, + }, + })), + (i.Rect = i.invent({ + create: "rect", + inherit: i.Shape, + construct: { + rect: function (t, e) { + return this.put(new i.Rect()).size(t, e); + }, + }, + })), + (i.Circle = i.invent({ + create: "circle", + inherit: i.Shape, + construct: { + circle: function (t) { + return this.put(new i.Circle()).rx(new i.Number(t).divide(2)).move(0, 0); + }, + }, + })), + i.extend(i.Circle, i.FX, { + rx: function (t) { + return this.attr("r", t); + }, + ry: function (t) { + return this.rx(t); + }, + }), + (i.Ellipse = i.invent({ + create: "ellipse", + inherit: i.Shape, + construct: { + ellipse: function (t, e) { + return this.put(new i.Ellipse()).size(t, e).move(0, 0); + }, + }, + })), + i.extend(i.Ellipse, i.Rect, i.FX, { + rx: function (t) { + return this.attr("rx", t); + }, + ry: function (t) { + return this.attr("ry", t); + }, + }), + i.extend(i.Circle, i.Ellipse, { + x: function (t) { + return null == t ? this.cx() - this.rx() : this.cx(t + this.rx()); + }, + y: function (t) { + return null == t ? this.cy() - this.ry() : this.cy(t + this.ry()); + }, + cx: function (t) { + return null == t ? this.attr("cx") : this.attr("cx", t); + }, + cy: function (t) { + return null == t ? this.attr("cy") : this.attr("cy", t); + }, + width: function (t) { + return null == t ? 2 * this.rx() : this.rx(new i.Number(t).divide(2)); + }, + height: function (t) { + return null == t ? 2 * this.ry() : this.ry(new i.Number(t).divide(2)); + }, + size: function (t, e) { + var a = f(this, t, e); + return this.rx(new i.Number(a.width).divide(2)).ry(new i.Number(a.height).divide(2)); + }, + }), + (i.Line = i.invent({ + create: "line", + inherit: i.Shape, + extend: { + array: function () { + return new i.PointArray([ + [this.attr("x1"), this.attr("y1")], + [this.attr("x2"), this.attr("y2")], + ]); + }, + plot: function (t, e, a, s) { + return null == t ? this.array() : ((t = void 0 !== e ? { x1: t, y1: e, x2: a, y2: s } : new i.PointArray(t).toLine()), this.attr(t)); + }, + move: function (t, e) { + return this.attr(this.array().move(t, e).toLine()); + }, + size: function (t, e) { + var i = f(this, t, e); + return this.attr(this.array().size(i.width, i.height).toLine()); + }, + }, + construct: { + line: function (t, e, a, s) { + return i.Line.prototype.plot.apply(this.put(new i.Line()), null != t ? [t, e, a, s] : [0, 0, 0, 0]); + }, + }, + })), + (i.Polyline = i.invent({ + create: "polyline", + inherit: i.Shape, + construct: { + polyline: function (t) { + return this.put(new i.Polyline()).plot(t || new i.PointArray()); + }, + }, + })), + (i.Polygon = i.invent({ + create: "polygon", + inherit: i.Shape, + construct: { + polygon: function (t) { + return this.put(new i.Polygon()).plot(t || new i.PointArray()); + }, + }, + })), + i.extend(i.Polyline, i.Polygon, { + array: function () { + return this._array || (this._array = new i.PointArray(this.attr("points"))); + }, + plot: function (t) { + return null == t ? this.array() : this.clear().attr("points", "string" == typeof t ? t : (this._array = new i.PointArray(t))); + }, + clear: function () { + return delete this._array, this; + }, + move: function (t, e) { + return this.attr("points", this.array().move(t, e)); + }, + size: function (t, e) { + var i = f(this, t, e); + return this.attr("points", this.array().size(i.width, i.height)); + }, + }), + i.extend(i.Line, i.Polyline, i.Polygon, { + morphArray: i.PointArray, + x: function (t) { + return null == t ? this.bbox().x : this.move(t, this.bbox().y); + }, + y: function (t) { + return null == t ? this.bbox().y : this.move(this.bbox().x, t); + }, + width: function (t) { + var e = this.bbox(); + return null == t ? e.width : this.size(t, e.height); + }, + height: function (t) { + var e = this.bbox(); + return null == t ? e.height : this.size(e.width, t); + }, + }), + (i.Path = i.invent({ + create: "path", + inherit: i.Shape, + extend: { + morphArray: i.PathArray, + array: function () { + return this._array || (this._array = new i.PathArray(this.attr("d"))); + }, + plot: function (t) { + return null == t ? this.array() : this.clear().attr("d", "string" == typeof t ? t : (this._array = new i.PathArray(t))); + }, + clear: function () { + return delete this._array, this; + }, + move: function (t, e) { + return this.attr("d", this.array().move(t, e)); + }, + x: function (t) { + return null == t ? this.bbox().x : this.move(t, this.bbox().y); + }, + y: function (t) { + return null == t ? this.bbox().y : this.move(this.bbox().x, t); + }, + size: function (t, e) { + var i = f(this, t, e); + return this.attr("d", this.array().size(i.width, i.height)); + }, + width: function (t) { + return null == t ? this.bbox().width : this.size(t, this.bbox().height); + }, + height: function (t) { + return null == t ? this.bbox().height : this.size(this.bbox().width, t); + }, + }, + construct: { + path: function (t) { + return this.put(new i.Path()).plot(t || new i.PathArray()); + }, + }, + })), + (i.Image = i.invent({ + create: "image", + inherit: i.Shape, + extend: { + load: function (e) { + if (!e) return this; + var a = this, + s = new t.Image(); + return ( + i.on(s, "load", function () { + i.off(s); + var t = a.parent(i.Pattern); + null !== t && + (0 == a.width() && 0 == a.height() && a.size(s.width, s.height), + t && 0 == t.width() && 0 == t.height() && t.size(a.width(), a.height()), + "function" == typeof a._loaded && a._loaded.call(a, { width: s.width, height: s.height, ratio: s.width / s.height, url: e })); + }), + i.on(s, "error", function (t) { + i.off(s), "function" == typeof a._error && a._error.call(a, t); + }), + this.attr("href", (s.src = this.src = e), i.xlink) + ); + }, + loaded: function (t) { + return (this._loaded = t), this; + }, + error: function (t) { + return (this._error = t), this; + }, + }, + construct: { + image: function (t, e, a) { + return this.put(new i.Image()) + .load(t) + .size(e || 0, a || e || 0); + }, + }, + })), + (i.Text = i.invent({ + create: function () { + this.constructor.call(this, i.create("text")), (this.dom.leading = new i.Number(1.3)), (this._rebuild = !0), (this._build = !1), this.attr("font-family", i.defaults.attrs["font-family"]); + }, + inherit: i.Shape, + extend: { + x: function (t) { + return null == t ? this.attr("x") : this.attr("x", t); + }, + y: function (t) { + var e = this.attr("y"), + i = "number" == typeof e ? e - this.bbox().y : 0; + return null == t ? ("number" == typeof e ? e - i : e) : this.attr("y", "number" == typeof t.valueOf() ? t + i : t); + }, + cx: function (t) { + return null == t ? this.bbox().cx : this.x(t - this.bbox().width / 2); + }, + cy: function (t) { + return null == t ? this.bbox().cy : this.y(t - this.bbox().height / 2); + }, + text: function (t) { + if (void 0 === t) { + t = ""; + for (var e = this.node.childNodes, a = 0, s = e.length; a < s; ++a) 0 != a && 3 != e[a].nodeType && 1 == i.adopt(e[a]).dom.newLined && (t += "\n"), (t += e[a].textContent); + return t; + } + if ((this.clear().build(!0), "function" == typeof t)) t.call(this, this); + else { + a = 0; + for (var n = (t = t.split("\n")).length; a < n; a++) this.tspan(t[a]).newLine(); + } + return this.build(!1).rebuild(); + }, + size: function (t) { + return this.attr("font-size", t).rebuild(); + }, + leading: function (t) { + return null == t ? this.dom.leading : ((this.dom.leading = new i.Number(t)), this.rebuild()); + }, + lines: function () { + var t = ((this.textPath && this.textPath()) || this).node, + e = i.utils.map(i.utils.filterSVGElements(t.childNodes), function (t) { + return i.adopt(t); + }); + return new i.Set(e); + }, + rebuild: function (t) { + if (("boolean" == typeof t && (this._rebuild = t), this._rebuild)) { + var e = this, + a = 0, + s = this.dom.leading * new i.Number(this.attr("font-size")); + this.lines().each(function () { + this.dom.newLined && (e.textPath() || this.attr("x", e.attr("x")), "\n" == this.text() ? (a += s) : (this.attr("dy", s + a), (a = 0))); + }), + this.fire("rebuild"); + } + return this; + }, + build: function (t) { + return (this._build = !!t), this; + }, + setData: function (t) { + return (this.dom = t), (this.dom.leading = new i.Number(t.leading || 1.3)), this; + }, + }, + construct: { + text: function (t) { + return this.put(new i.Text()).text(t); + }, + plain: function (t) { + return this.put(new i.Text()).plain(t); + }, + }, + })), + (i.Tspan = i.invent({ + create: "tspan", + inherit: i.Shape, + extend: { + text: function (t) { + return null == t ? this.node.textContent + (this.dom.newLined ? "\n" : "") : ("function" == typeof t ? t.call(this, this) : this.plain(t), this); + }, + dx: function (t) { + return this.attr("dx", t); + }, + dy: function (t) { + return this.attr("dy", t); + }, + newLine: function () { + var t = this.parent(i.Text); + return (this.dom.newLined = !0), this.dy(t.dom.leading * t.attr("font-size")).attr("x", t.x()); + }, + }, + })), + i.extend(i.Text, i.Tspan, { + plain: function (t) { + return !1 === this._build && this.clear(), this.node.appendChild(e.createTextNode(t)), this; + }, + tspan: function (t) { + var e = ((this.textPath && this.textPath()) || this).node, + a = new i.Tspan(); + return !1 === this._build && this.clear(), e.appendChild(a.node), a.text(t); + }, + clear: function () { + for (var t = ((this.textPath && this.textPath()) || this).node; t.hasChildNodes(); ) t.removeChild(t.lastChild); + return this; + }, + length: function () { + return this.node.getComputedTextLength(); + }, + }), + (i.TextPath = i.invent({ + create: "textPath", + inherit: i.Parent, + parent: i.Text, + construct: { + morphArray: i.PathArray, + path: function (t) { + for (var e = new i.TextPath(), a = this.doc().defs().path(t); this.node.hasChildNodes(); ) e.node.appendChild(this.node.firstChild); + return this.node.appendChild(e.node), e.attr("href", "#" + a, i.xlink), this; + }, + array: function () { + var t = this.track(); + return t ? t.array() : null; + }, + plot: function (t) { + var e = this.track(), + i = null; + return e && (i = e.plot(t)), null == t ? i : this; + }, + track: function () { + var t = this.textPath(); + if (t) return t.reference("href"); + }, + textPath: function () { + if (this.node.firstChild && "textPath" == this.node.firstChild.nodeName) return i.adopt(this.node.firstChild); + }, + }, + })), + (i.Nested = i.invent({ + create: function () { + this.constructor.call(this, i.create("svg")), this.style("overflow", "visible"); + }, + inherit: i.Container, + construct: { + nested: function () { + return this.put(new i.Nested()); + }, + }, + })), + (i.A = i.invent({ + create: "a", + inherit: i.Container, + extend: { + to: function (t) { + return this.attr("href", t, i.xlink); + }, + show: function (t) { + return this.attr("show", t, i.xlink); + }, + target: function (t) { + return this.attr("target", t); + }, + }, + construct: { + link: function (t) { + return this.put(new i.A()).to(t); + }, + }, + })), + i.extend(i.Element, { + linkTo: function (t) { + var e = new i.A(); + return "function" == typeof t ? t.call(e, e) : e.to(t), this.parent().put(e).put(this); + }, + }), + (i.Marker = i.invent({ + create: "marker", + inherit: i.Container, + extend: { + width: function (t) { + return this.attr("markerWidth", t); + }, + height: function (t) { + return this.attr("markerHeight", t); + }, + ref: function (t, e) { + return this.attr("refX", t).attr("refY", e); + }, + update: function (t) { + return this.clear(), "function" == typeof t && t.call(this, this), this; + }, + toString: function () { + return "url(#" + this.id() + ")"; + }, + }, + construct: { + marker: function (t, e, i) { + return this.defs().marker(t, e, i); + }, + }, + })), + i.extend(i.Defs, { + marker: function (t, e, a) { + return this.put(new i.Marker()) + .size(t, e) + .ref(t / 2, e / 2) + .viewbox(0, 0, t, e) + .attr("orient", "auto") + .update(a); + }, + }), + i.extend(i.Line, i.Polyline, i.Polygon, i.Path, { + marker: function (t, e, a, s) { + var n = ["marker"]; + return "all" != t && n.push(t), (n = n.join("-")), (t = arguments[1] instanceof i.Marker ? arguments[1] : this.doc().marker(e, a, s)), this.attr(n, t); + }, + }); + var l = { + stroke: ["color", "width", "opacity", "linecap", "linejoin", "miterlimit", "dasharray", "dashoffset"], + fill: ["color", "opacity", "rule"], + prefix: function (t, e) { + return "color" == e ? t : t + "-" + e; + }, + }; + function h(t, e, a, s) { + return a + s.replace(i.regex.dots, " ."); + } + function c(t) { + return t.toLowerCase().replace(/-(.)/g, function (t, e) { + return e.toUpperCase(); + }); + } + function d(t) { + return t.charAt(0).toUpperCase() + t.slice(1); + } + function u(t) { + var e = t.toString(16); + return 1 == e.length ? "0" + e : e; + } + function f(t, e, i) { + if (null == e || null == i) { + var a = t.bbox(); + null == e ? (e = (a.width / a.height) * i) : null == i && (i = (a.height / a.width) * e); + } + return { width: e, height: i }; + } + function g(t, e, i) { + return { x: e * t.a + i * t.c + 0, y: e * t.b + i * t.d + 0 }; + } + function p(t) { + return { a: t[0], b: t[1], c: t[2], d: t[3], e: t[4], f: t[5] }; + } + function x(t, e) { + (t.cx = null == t.cx ? e.bbox().cx : t.cx), (t.cy = null == t.cy ? e.bbox().cy : t.cy); + } + function v(e) { + for (var a = e.childNodes.length - 1; a >= 0; a--) e.childNodes[a] instanceof t.SVGElement && v(e.childNodes[a]); + return i.adopt(e).id(i.eid(e.nodeName)); + } + function m(t) { + return ( + null == t.x && ((t.x = 0), (t.y = 0), (t.width = 0), (t.height = 0)), (t.w = t.width), (t.h = t.height), (t.x2 = t.x + t.width), (t.y2 = t.y + t.height), (t.cx = t.x + t.width / 2), (t.cy = t.y + t.height / 2), t + ); + } + function b(t) { + return Math.abs(t) > 1e-37 ? t : 0; + } + ["fill", "stroke"].forEach(function (t) { + var e, + a = {}; + (a[t] = function (a) { + if (void 0 === a) return this; + if ("string" == typeof a || i.Color.isRgb(a) || (a && "function" == typeof a.fill)) this.attr(t, a); + else for (e = l[t].length - 1; e >= 0; e--) null != a[l[t][e]] && this.attr(l.prefix(t, l[t][e]), a[l[t][e]]); + return this; + }), + i.extend(i.Element, i.FX, a); + }), + i.extend(i.Element, i.FX, { + rotate: function (t, e, i) { + return this.transform({ rotation: t, cx: e, cy: i }); + }, + skew: function (t, e, i, a) { + return 1 == arguments.length || 3 == arguments.length ? this.transform({ skew: t, cx: e, cy: i }) : this.transform({ skewX: t, skewY: e, cx: i, cy: a }); + }, + scale: function (t, e, i, a) { + return 1 == arguments.length || 3 == arguments.length ? this.transform({ scale: t, cx: e, cy: i }) : this.transform({ scaleX: t, scaleY: e, cx: i, cy: a }); + }, + translate: function (t, e) { + return this.transform({ x: t, y: e }); + }, + flip: function (t, e) { + return (e = "number" == typeof t ? t : e), this.transform({ flip: t || "both", offset: e }); + }, + matrix: function (t) { + return this.attr("transform", new i.Matrix(6 == arguments.length ? [].slice.call(arguments) : t)); + }, + opacity: function (t) { + return this.attr("opacity", t); + }, + dx: function (t) { + return this.x(new i.Number(t).plus(this instanceof i.FX ? 0 : this.x()), !0); + }, + dy: function (t) { + return this.y(new i.Number(t).plus(this instanceof i.FX ? 0 : this.y()), !0); + }, + dmove: function (t, e) { + return this.dx(t).dy(e); + }, + }), + i.extend(i.Rect, i.Ellipse, i.Circle, i.Gradient, i.FX, { + radius: function (t, e) { + var a = (this._target || this).type; + return "radial" == a || "circle" == a ? this.attr("r", new i.Number(t)) : this.rx(t).ry(null == e ? t : e); + }, + }), + i.extend(i.Path, { + length: function () { + return this.node.getTotalLength(); + }, + pointAt: function (t) { + return this.node.getPointAtLength(t); + }, + }), + i.extend(i.Parent, i.Text, i.Tspan, i.FX, { + font: function (t, e) { + if ("object" === s(t)) for (e in t) this.font(e, t[e]); + return "leading" == t + ? this.leading(e) + : "anchor" == t + ? this.attr("text-anchor", e) + : "size" == t || "family" == t || "weight" == t || "stretch" == t || "variant" == t || "style" == t + ? this.attr("font-" + t, e) + : this.attr(t, e); + }, + }), + (i.Set = i.invent({ + create: function (t) { + Array.isArray(t) ? (this.members = t) : this.clear(); + }, + extend: { + add: function () { + var t, + e, + i = [].slice.call(arguments); + for (t = 0, e = i.length; t < e; t++) this.members.push(i[t]); + return this; + }, + remove: function (t) { + var e = this.index(t); + return e > -1 && this.members.splice(e, 1), this; + }, + each: function (t) { + for (var e = 0, i = this.members.length; e < i; e++) t.apply(this.members[e], [e, this.members]); + return this; + }, + clear: function () { + return (this.members = []), this; + }, + length: function () { + return this.members.length; + }, + has: function (t) { + return this.index(t) >= 0; + }, + index: function (t) { + return this.members.indexOf(t); + }, + get: function (t) { + return this.members[t]; + }, + first: function () { + return this.get(0); + }, + last: function () { + return this.get(this.members.length - 1); + }, + valueOf: function () { + return this.members; + }, + bbox: function () { + if (0 == this.members.length) return new i.RBox(); + var t = this.members[0].rbox(this.members[0].doc()); + return ( + this.each(function () { + t = t.merge(this.rbox(this.doc())); + }), + t + ); + }, + }, + construct: { + set: function (t) { + return new i.Set(t); + }, + }, + })), + (i.FX.Set = i.invent({ + create: function (t) { + this.set = t; + }, + })), + (i.Set.inherit = function () { + var t = []; + for (var e in i.Shape.prototype) "function" == typeof i.Shape.prototype[e] && "function" != typeof i.Set.prototype[e] && t.push(e); + for (var e in (t.forEach(function (t) { + i.Set.prototype[t] = function () { + for (var e = 0, a = this.members.length; e < a; e++) this.members[e] && "function" == typeof this.members[e][t] && this.members[e][t].apply(this.members[e], arguments); + return "animate" == t ? this.fx || (this.fx = new i.FX.Set(this)) : this; + }; + }), + (t = []), + i.FX.prototype)) + "function" == typeof i.FX.prototype[e] && "function" != typeof i.FX.Set.prototype[e] && t.push(e); + t.forEach(function (t) { + i.FX.Set.prototype[t] = function () { + for (var e = 0, i = this.set.members.length; e < i; e++) this.set.members[e].fx[t].apply(this.set.members[e].fx, arguments); + return this; + }; + }); + }), + i.extend(i.Element, { + data: function (t, e, i) { + if ("object" === s(t)) for (e in t) this.data(e, t[e]); + else if (arguments.length < 2) + try { + return JSON.parse(this.attr("data-" + t)); + } catch (e) { + return this.attr("data-" + t); + } + else this.attr("data-" + t, null === e ? null : !0 === i || "string" == typeof e || "number" == typeof e ? e : JSON.stringify(e)); + return this; + }, + }), + i.extend(i.Element, { + remember: function (t, e) { + if ("object" === s(arguments[0])) for (var e in t) this.remember(e, t[e]); + else { + if (1 == arguments.length) return this.memory()[t]; + this.memory()[t] = e; + } + return this; + }, + forget: function () { + if (0 == arguments.length) this._memory = {}; + else for (var t = arguments.length - 1; t >= 0; t--) delete this.memory()[arguments[t]]; + return this; + }, + memory: function () { + return this._memory || (this._memory = {}); + }, + }), + (i.get = function (t) { + var a = e.getElementById( + (function (t) { + var e = (t || "").toString().match(i.regex.reference); + if (e) return e[1]; + })(t) || t + ); + return i.adopt(a); + }), + (i.select = function (t, a) { + return new i.Set( + i.utils.map((a || e).querySelectorAll(t), function (t) { + return i.adopt(t); + }) + ); + }), + i.extend(i.Parent, { + select: function (t) { + return i.select(t, this.node); + }, + }); + var y = "abcdef".split(""); + if ("function" != typeof t.CustomEvent) { + var w = function (t, i) { + i = i || { bubbles: !1, cancelable: !1, detail: void 0 }; + var a = e.createEvent("CustomEvent"); + return a.initCustomEvent(t, i.bubbles, i.cancelable, i.detail), a; + }; + (w.prototype = t.Event.prototype), (i.CustomEvent = w); + } else i.CustomEvent = t.CustomEvent; + return ( + (function (e) { + for (var i = 0, a = ["moz", "webkit"], s = 0; s < a.length && !t.requestAnimationFrame; ++s) + (e.requestAnimationFrame = e[a[s] + "RequestAnimationFrame"]), (e.cancelAnimationFrame = e[a[s] + "CancelAnimationFrame"] || e[a[s] + "CancelRequestAnimationFrame"]); + (e.requestAnimationFrame = + e.requestAnimationFrame || + function (t) { + var a = new Date().getTime(), + s = Math.max(0, 16 - (a - i)), + n = e.setTimeout(function () { + t(a + s); + }, s); + return (i = a + s), n; + }), + (e.cancelAnimationFrame = e.cancelAnimationFrame || e.clearTimeout); + })(t), + i + ); + }), + "function" == typeof define && i(105) + ? define(function () { + return ht(lt, lt.document); + }) + : "object" === ("undefined" == typeof exports ? "undefined" : s(exports)) && void 0 !== a + ? (a.exports = lt.document + ? ht(lt, lt.document) + : function (t) { + return ht(t, t.document); + }) + : (lt.SVG = ht(lt, lt.document)), + /*! svg.filter.js - v2.0.2 - 2016-02-24 + * https://github.com/wout/svg.filter.js + * Copyright (c) 2016 Wout Fierens; Licensed MIT */ + function () { + (SVG.Filter = SVG.invent({ + create: "filter", + inherit: SVG.Parent, + extend: { + source: "SourceGraphic", + sourceAlpha: "SourceAlpha", + background: "BackgroundImage", + backgroundAlpha: "BackgroundAlpha", + fill: "FillPaint", + stroke: "StrokePaint", + autoSetIn: !0, + put: function (t, e) { + return this.add(t, e), !t.attr("in") && this.autoSetIn && t.attr("in", this.source), t.attr("result") || t.attr("result", t), t; + }, + blend: function (t, e, i) { + return this.put(new SVG.BlendEffect(t, e, i)); + }, + colorMatrix: function (t, e) { + return this.put(new SVG.ColorMatrixEffect(t, e)); + }, + convolveMatrix: function (t) { + return this.put(new SVG.ConvolveMatrixEffect(t)); + }, + componentTransfer: function (t) { + return this.put(new SVG.ComponentTransferEffect(t)); + }, + composite: function (t, e, i) { + return this.put(new SVG.CompositeEffect(t, e, i)); + }, + flood: function (t, e) { + return this.put(new SVG.FloodEffect(t, e)); + }, + offset: function (t, e) { + return this.put(new SVG.OffsetEffect(t, e)); + }, + image: function (t) { + return this.put(new SVG.ImageEffect(t)); + }, + merge: function () { + var t = [void 0]; + for (var e in arguments) t.push(arguments[e]); + return this.put(new (SVG.MergeEffect.bind.apply(SVG.MergeEffect, t))()); + }, + gaussianBlur: function (t, e) { + return this.put(new SVG.GaussianBlurEffect(t, e)); + }, + morphology: function (t, e) { + return this.put(new SVG.MorphologyEffect(t, e)); + }, + diffuseLighting: function (t, e, i) { + return this.put(new SVG.DiffuseLightingEffect(t, e, i)); + }, + displacementMap: function (t, e, i, a, s) { + return this.put(new SVG.DisplacementMapEffect(t, e, i, a, s)); + }, + specularLighting: function (t, e, i, a) { + return this.put(new SVG.SpecularLightingEffect(t, e, i, a)); + }, + tile: function () { + return this.put(new SVG.TileEffect()); + }, + turbulence: function (t, e, i, a, s) { + return this.put(new SVG.TurbulenceEffect(t, e, i, a, s)); + }, + toString: function () { + return "url(#" + this.attr("id") + ")"; + }, + }, + })), + SVG.extend(SVG.Defs, { + filter: function (t) { + var e = this.put(new SVG.Filter()); + return "function" == typeof t && t.call(e, e), e; + }, + }), + SVG.extend(SVG.Container, { + filter: function (t) { + return this.defs().filter(t); + }, + }), + SVG.extend(SVG.Element, SVG.G, SVG.Nested, { + filter: function (t) { + return ( + (this.filterer = t instanceof SVG.Element ? t : this.doc().filter(t)), + this.doc() && this.filterer.doc() !== this.doc() && this.doc().defs().add(this.filterer), + this.attr("filter", this.filterer), + this.filterer + ); + }, + unfilter: function (t) { + return this.filterer && !0 === t && this.filterer.remove(), delete this.filterer, this.attr("filter", null); + }, + }), + (SVG.Effect = SVG.invent({ + create: function () { + this.constructor.call(this); + }, + inherit: SVG.Element, + extend: { + in: function (t) { + return null == t + ? (this.parent() && + this.parent() + .select('[result="' + this.attr("in") + '"]') + .get(0)) || + this.attr("in") + : this.attr("in", t); + }, + result: function (t) { + return null == t ? this.attr("result") : this.attr("result", t); + }, + toString: function () { + return this.result(); + }, + }, + })), + (SVG.ParentEffect = SVG.invent({ + create: function () { + this.constructor.call(this); + }, + inherit: SVG.Parent, + extend: { + in: function (t) { + return null == t + ? (this.parent() && + this.parent() + .select('[result="' + this.attr("in") + '"]') + .get(0)) || + this.attr("in") + : this.attr("in", t); + }, + result: function (t) { + return null == t ? this.attr("result") : this.attr("result", t); + }, + toString: function () { + return this.result(); + }, + }, + })); + var t = { + blend: function (t, e) { + return this.parent() && this.parent().blend(this, t, e); + }, + colorMatrix: function (t, e) { + return this.parent() && this.parent().colorMatrix(t, e).in(this); + }, + convolveMatrix: function (t) { + return this.parent() && this.parent().convolveMatrix(t).in(this); + }, + componentTransfer: function (t) { + return this.parent() && this.parent().componentTransfer(t).in(this); + }, + composite: function (t, e) { + return this.parent() && this.parent().composite(this, t, e); + }, + flood: function (t, e) { + return this.parent() && this.parent().flood(t, e); + }, + offset: function (t, e) { + return this.parent() && this.parent().offset(t, e).in(this); + }, + image: function (t) { + return this.parent() && this.parent().image(t); + }, + merge: function () { + return this.parent() && this.parent().merge.apply(this.parent(), [this].concat(arguments)); + }, + gaussianBlur: function (t, e) { + return this.parent() && this.parent().gaussianBlur(t, e).in(this); + }, + morphology: function (t, e) { + return this.parent() && this.parent().morphology(t, e).in(this); + }, + diffuseLighting: function (t, e, i) { + return this.parent() && this.parent().diffuseLighting(t, e, i).in(this); + }, + displacementMap: function (t, e, i, a) { + return this.parent() && this.parent().displacementMap(this, t, e, i, a); + }, + specularLighting: function (t, e, i, a) { + return this.parent() && this.parent().specularLighting(t, e, i, a).in(this); + }, + tile: function () { + return this.parent() && this.parent().tile().in(this); + }, + turbulence: function (t, e, i, a, s) { + return this.parent() && this.parent().turbulence(t, e, i, a, s).in(this); + }, + }; + SVG.extend(SVG.Effect, t), + SVG.extend(SVG.ParentEffect, t), + (SVG.ChildEffect = SVG.invent({ + create: function () { + this.constructor.call(this); + }, + inherit: SVG.Element, + extend: { + in: function (t) { + this.attr("in", t); + }, + }, + })); + var e = { + blend: function (t, e, i) { + this.attr({ in: t, in2: e, mode: i || "normal" }); + }, + colorMatrix: function (t, e) { + "matrix" == t && (e = s(e)), this.attr({ type: t, values: void 0 === e ? null : e }); + }, + convolveMatrix: function (t) { + (t = s(t)), this.attr({ order: Math.sqrt(t.split(" ").length), kernelMatrix: t }); + }, + composite: function (t, e, i) { + this.attr({ in: t, in2: e, operator: i }); + }, + flood: function (t, e) { + this.attr("flood-color", t), null != e && this.attr("flood-opacity", e); + }, + offset: function (t, e) { + this.attr({ dx: t, dy: e }); + }, + image: function (t) { + this.attr("href", t, SVG.xlink); + }, + displacementMap: function (t, e, i, a, s) { + this.attr({ in: t, in2: e, scale: i, xChannelSelector: a, yChannelSelector: s }); + }, + gaussianBlur: function (t, e) { + null != t || null != e + ? this.attr( + "stdDeviation", + (function (t) { + if (!Array.isArray(t)) return t; + for (var e = 0, i = t.length, a = []; e < i; e++) a.push(t[e]); + return a.join(" "); + })(Array.prototype.slice.call(arguments)) + ) + : this.attr("stdDeviation", "0 0"); + }, + morphology: function (t, e) { + this.attr({ operator: t, radius: e }); + }, + tile: function () {}, + turbulence: function (t, e, i, a, s) { + this.attr({ numOctaves: e, seed: i, stitchTiles: a, baseFrequency: t, type: s }); + }, + }, + i = { + merge: function () { + var t; + if (arguments[0] instanceof SVG.Set) { + var e = this; + arguments[0].each(function (t) { + this instanceof SVG.MergeNode ? e.put(this) : (this instanceof SVG.Effect || this instanceof SVG.ParentEffect) && e.put(new SVG.MergeNode(this)); + }); + } else { + t = Array.isArray(arguments[0]) ? arguments[0] : arguments; + for (var i = 0; i < t.length; i++) t[i] instanceof SVG.MergeNode ? this.put(t[i]) : this.put(new SVG.MergeNode(t[i])); + } + }, + componentTransfer: function (t) { + if ( + ((this.rgb = new SVG.Set()), + ["r", "g", "b", "a"].forEach( + function (t) { + (this[t] = new SVG["Func" + t.toUpperCase()]("identity")), this.rgb.add(this[t]), this.node.appendChild(this[t].node); + }.bind(this) + ), + t) + ) + for (var e in (t.rgb && + (["r", "g", "b"].forEach( + function (e) { + this[e].attr(t.rgb); + }.bind(this) + ), + delete t.rgb), + t)) + this[e].attr(t[e]); + }, + diffuseLighting: function (t, e, i) { + this.attr({ surfaceScale: t, diffuseConstant: e, kernelUnitLength: i }); + }, + specularLighting: function (t, e, i, a) { + this.attr({ surfaceScale: t, diffuseConstant: e, specularExponent: i, kernelUnitLength: a }); + }, + }, + a = { + distantLight: function (t, e) { + this.attr({ azimuth: t, elevation: e }); + }, + pointLight: function (t, e, i) { + this.attr({ x: t, y: e, z: i }); + }, + spotLight: function (t, e, i, a, s, n) { + this.attr({ x: t, y: e, z: i, pointsAtX: a, pointsAtY: s, pointsAtZ: n }); + }, + mergeNode: function (t) { + this.attr("in", t); + }, + }; + function s(t) { + return Array.isArray(t) && (t = new SVG.Array(t)), t.toString().replace(/^\s+/, "").replace(/\s+$/, "").replace(/\s+/g, " "); + } + function n() { + var t = function () {}; + for (var e in ("function" == typeof arguments[arguments.length - 1] && ((t = arguments[arguments.length - 1]), Array.prototype.splice.call(arguments, arguments.length - 1, 1)), arguments)) + for (var i in arguments[e]) t(arguments[e][i], i, arguments[e]); + } + ["r", "g", "b", "a"].forEach(function (t) { + a["Func" + t.toUpperCase()] = function (t) { + switch ((this.attr("type", t), t)) { + case "table": + this.attr("tableValues", arguments[1]); + break; + case "linear": + this.attr("slope", arguments[1]), this.attr("intercept", arguments[2]); + break; + case "gamma": + this.attr("amplitude", arguments[1]), this.attr("exponent", arguments[2]), this.attr("offset", arguments[2]); + } + }; + }), + n(e, function (t, e) { + var i = e.charAt(0).toUpperCase() + e.slice(1); + SVG[i + "Effect"] = SVG.invent({ + create: function () { + this.constructor.call(this, SVG.create("fe" + i)), t.apply(this, arguments), this.result(this.attr("id") + "Out"); + }, + inherit: SVG.Effect, + extend: {}, + }); + }), + n(i, function (t, e) { + var i = e.charAt(0).toUpperCase() + e.slice(1); + SVG[i + "Effect"] = SVG.invent({ + create: function () { + this.constructor.call(this, SVG.create("fe" + i)), t.apply(this, arguments), this.result(this.attr("id") + "Out"); + }, + inherit: SVG.ParentEffect, + extend: {}, + }); + }), + n(a, function (t, e) { + var i = e.charAt(0).toUpperCase() + e.slice(1); + SVG[i] = SVG.invent({ + create: function () { + this.constructor.call(this, SVG.create("fe" + i)), t.apply(this, arguments); + }, + inherit: SVG.ChildEffect, + extend: {}, + }); + }), + SVG.extend(SVG.MergeEffect, { + in: function (t) { + return t instanceof SVG.MergeNode ? this.add(t, 0) : this.add(new SVG.MergeNode(t), 0), this; + }, + }), + SVG.extend(SVG.CompositeEffect, SVG.BlendEffect, SVG.DisplacementMapEffect, { + in2: function (t) { + return null == t + ? (this.parent() && + this.parent() + .select('[result="' + this.attr("in2") + '"]') + .get(0)) || + this.attr("in2") + : this.attr("in2", t); + }, + }), + (SVG.filter = { sepiatone: [0.343, 0.669, 0.119, 0, 0, 0.249, 0.626, 0.13, 0, 0, 0.172, 0.334, 0.111, 0, 0, 0, 0, 0, 1, 0] }); + }.call(void 0), + (function () { + function t(t, s, n, r, o, l, h) { + for (var c = t.slice(s, n || h), d = r.slice(o, l || h), u = 0, f = { pos: [0, 0], start: [0, 0] }, g = { pos: [0, 0], start: [0, 0] }; ; ) { + if ( + ((c[u] = e.call(f, c[u])), + (d[u] = e.call(g, d[u])), + c[u][0] != d[u][0] || "M" == c[u][0] || ("A" == c[u][0] && (c[u][4] != d[u][4] || c[u][5] != d[u][5])) + ? (Array.prototype.splice.apply(c, [u, 1].concat(a.call(f, c[u]))), Array.prototype.splice.apply(d, [u, 1].concat(a.call(g, d[u])))) + : ((c[u] = i.call(f, c[u])), (d[u] = i.call(g, d[u]))), + ++u == c.length && u == d.length) + ) + break; + u == c.length && c.push(["C", f.pos[0], f.pos[1], f.pos[0], f.pos[1], f.pos[0], f.pos[1]]), u == d.length && d.push(["C", g.pos[0], g.pos[1], g.pos[0], g.pos[1], g.pos[0], g.pos[1]]); + } + return { start: c, dest: d }; + } + function e(t) { + switch (t[0]) { + case "z": + case "Z": + (t[0] = "L"), (t[1] = this.start[0]), (t[2] = this.start[1]); + break; + case "H": + (t[0] = "L"), (t[2] = this.pos[1]); + break; + case "V": + (t[0] = "L"), (t[2] = t[1]), (t[1] = this.pos[0]); + break; + case "T": + (t[0] = "Q"), (t[3] = t[1]), (t[4] = t[2]), (t[1] = this.reflection[1]), (t[2] = this.reflection[0]); + break; + case "S": + (t[0] = "C"), (t[6] = t[4]), (t[5] = t[3]), (t[4] = t[2]), (t[3] = t[1]), (t[2] = this.reflection[1]), (t[1] = this.reflection[0]); + } + return t; + } + function i(t) { + var e = t.length; + return (this.pos = [t[e - 2], t[e - 1]]), -1 != "SCQT".indexOf(t[0]) && (this.reflection = [2 * this.pos[0] - t[e - 4], 2 * this.pos[1] - t[e - 3]]), t; + } + function a(t) { + var e = [t]; + switch (t[0]) { + case "M": + return (this.pos = this.start = [t[1], t[2]]), e; + case "L": + (t[5] = t[3] = t[1]), (t[6] = t[4] = t[2]), (t[1] = this.pos[0]), (t[2] = this.pos[1]); + break; + case "Q": + (t[6] = t[4]), + (t[5] = t[3]), + (t[4] = (1 * t[4]) / 3 + (2 * t[2]) / 3), + (t[3] = (1 * t[3]) / 3 + (2 * t[1]) / 3), + (t[2] = (1 * this.pos[1]) / 3 + (2 * t[2]) / 3), + (t[1] = (1 * this.pos[0]) / 3 + (2 * t[1]) / 3); + break; + case "A": + t = (e = (function (t, e) { + var i, + a, + s, + n, + r, + o, + l, + h, + c, + d, + u, + f, + g, + p, + x, + v, + m, + b, + y, + w, + k, + S, + A, + C, + L, + E, + P = Math.abs(e[1]), + T = Math.abs(e[2]), + M = e[3] % 360, + z = e[4], + I = e[5], + X = e[6], + F = e[7], + Y = new SVG.Point(t), + O = new SVG.Point(X, F), + R = []; + if (0 === P || 0 === T || (Y.x === O.x && Y.y === O.y)) return [["C", Y.x, Y.y, O.x, O.y, O.x, O.y]]; + (i = new SVG.Point((Y.x - O.x) / 2, (Y.y - O.y) / 2).transform(new SVG.Matrix().rotate(M))), (a = (i.x * i.x) / (P * P) + (i.y * i.y) / (T * T)) > 1 && ((a = Math.sqrt(a)), (P *= a), (T *= a)); + (s = new SVG.Matrix() + .rotate(M) + .scale(1 / P, 1 / T) + .rotate(-M)), + (Y = Y.transform(s)), + (O = O.transform(s)), + (n = [O.x - Y.x, O.y - Y.y]), + (o = n[0] * n[0] + n[1] * n[1]), + (r = Math.sqrt(o)), + (n[0] /= r), + (n[1] /= r), + (l = o < 4 ? Math.sqrt(1 - o / 4) : 0), + z === I && (l *= -1); + (h = new SVG.Point((O.x + Y.x) / 2 + l * -n[1], (O.y + Y.y) / 2 + l * n[0])), + (c = new SVG.Point(Y.x - h.x, Y.y - h.y)), + (d = new SVG.Point(O.x - h.x, O.y - h.y)), + (u = Math.acos(c.x / Math.sqrt(c.x * c.x + c.y * c.y))), + c.y < 0 && (u *= -1); + (f = Math.acos(d.x / Math.sqrt(d.x * d.x + d.y * d.y))), d.y < 0 && (f *= -1); + I && u > f && (f += 2 * Math.PI); + !I && u < f && (f -= 2 * Math.PI); + for (p = Math.ceil((2 * Math.abs(u - f)) / Math.PI), v = [], m = u, g = (f - u) / p, x = (4 * Math.tan(g / 4)) / 3, k = 0; k <= p; k++) + (y = Math.cos(m)), (b = Math.sin(m)), (w = new SVG.Point(h.x + y, h.y + b)), (v[k] = [new SVG.Point(w.x + x * b, w.y - x * y), w, new SVG.Point(w.x - x * b, w.y + x * y)]), (m += g); + for (v[0][0] = v[0][1].clone(), v[v.length - 1][2] = v[v.length - 1][1].clone(), s = new SVG.Matrix().rotate(M).scale(P, T).rotate(-M), k = 0, S = v.length; k < S; k++) + (v[k][0] = v[k][0].transform(s)), (v[k][1] = v[k][1].transform(s)), (v[k][2] = v[k][2].transform(s)); + for (k = 1, S = v.length; k < S; k++) (w = v[k - 1][2]), (A = w.x), (C = w.y), (w = v[k][0]), (L = w.x), (E = w.y), (w = v[k][1]), (X = w.x), (F = w.y), R.push(["C", A, C, L, E, X, F]); + return R; + })(this.pos, t))[0]; + } + return (t[0] = "C"), (this.pos = [t[5], t[6]]), (this.reflection = [2 * t[5] - t[3], 2 * t[6] - t[4]]), e; + } + function s(t, e) { + if (!1 === e) return !1; + for (var i = e, a = t.length; i < a; ++i) if ("M" == t[i][0]) return i; + return !1; + } + SVG.extend(SVG.PathArray, { + morph: function (e) { + for (var i = this.value, a = this.parse(e), n = 0, r = 0, o = !1, l = !1; !1 !== n || !1 !== r; ) { + var h; + (o = s(i, !1 !== n && n + 1)), + (l = s(a, !1 !== r && r + 1)), + !1 === n && (n = 0 == (h = new SVG.PathArray(c.start).bbox()).height || 0 == h.width ? i.push(i[0]) - 1 : i.push(["M", h.x + h.width / 2, h.y + h.height / 2]) - 1), + !1 === r && (r = 0 == (h = new SVG.PathArray(c.dest).bbox()).height || 0 == h.width ? a.push(a[0]) - 1 : a.push(["M", h.x + h.width / 2, h.y + h.height / 2]) - 1); + var c = t(i, n, o, a, r, l); + (i = i.slice(0, n).concat(c.start, !1 === o ? [] : i.slice(o))), (a = a.slice(0, r).concat(c.dest, !1 === l ? [] : a.slice(l))), (n = !1 !== o && n + c.start.length), (r = !1 !== l && r + c.dest.length); + } + return (this.value = i), (this.destination = new SVG.PathArray()), (this.destination.value = a), this; + }, + }); + })(), + /*! svg.draggable.js - v2.2.2 - 2019-01-08 + * https://github.com/svgdotjs/svg.draggable.js + * Copyright (c) 2019 Wout Fierens; Licensed MIT */ + function () { + function t(t) { + t.remember("_draggable", this), (this.el = t); + } + (t.prototype.init = function (t, e) { + var i = this; + (this.constraint = t), + (this.value = e), + this.el.on("mousedown.drag", function (t) { + i.start(t); + }), + this.el.on("touchstart.drag", function (t) { + i.start(t); + }); + }), + (t.prototype.transformPoint = function (t, e) { + var i = ((t = t || window.event).changedTouches && t.changedTouches[0]) || t; + return (this.p.x = i.clientX - (e || 0)), (this.p.y = i.clientY), this.p.matrixTransform(this.m); + }), + (t.prototype.getBBox = function () { + var t = this.el.bbox(); + return this.el instanceof SVG.Nested && (t = this.el.rbox()), (this.el instanceof SVG.G || this.el instanceof SVG.Use || this.el instanceof SVG.Nested) && ((t.x = this.el.x()), (t.y = this.el.y())), t; + }), + (t.prototype.start = function (t) { + if (("click" != t.type && "mousedown" != t.type && "mousemove" != t.type) || 1 == (t.which || t.buttons)) { + var e = this; + if ((this.el.fire("beforedrag", { event: t, handler: this }), !this.el.event().defaultPrevented)) { + t.preventDefault(), + t.stopPropagation(), + (this.parent = this.parent || this.el.parent(SVG.Nested) || this.el.parent(SVG.Doc)), + (this.p = this.parent.node.createSVGPoint()), + (this.m = this.el.node.getScreenCTM().inverse()); + var i, + a = this.getBBox(); + if (this.el instanceof SVG.Text) + switch (((i = this.el.node.getComputedTextLength()), this.el.attr("text-anchor"))) { + case "middle": + i /= 2; + break; + case "start": + i = 0; + } + (this.startPoints = { point: this.transformPoint(t, i), box: a, transform: this.el.transform() }), + SVG.on(window, "mousemove.drag", function (t) { + e.drag(t); + }), + SVG.on(window, "touchmove.drag", function (t) { + e.drag(t); + }), + SVG.on(window, "mouseup.drag", function (t) { + e.end(t); + }), + SVG.on(window, "touchend.drag", function (t) { + e.end(t); + }), + this.el.fire("dragstart", { event: t, p: this.startPoints.point, m: this.m, handler: this }); + } + } + }), + (t.prototype.drag = function (t) { + var e = this.getBBox(), + i = this.transformPoint(t), + a = this.startPoints.box.x + i.x - this.startPoints.point.x, + s = this.startPoints.box.y + i.y - this.startPoints.point.y, + n = this.constraint, + r = i.x - this.startPoints.point.x, + o = i.y - this.startPoints.point.y; + if ((this.el.fire("dragmove", { event: t, p: i, m: this.m, handler: this }), this.el.event().defaultPrevented)) return i; + if ("function" == typeof n) { + var l = n.call(this.el, a, s, this.m); + "boolean" == typeof l && (l = { x: l, y: l }), !0 === l.x ? this.el.x(a) : !1 !== l.x && this.el.x(l.x), !0 === l.y ? this.el.y(s) : !1 !== l.y && this.el.y(l.y); + } else + "object" == typeof n && + (null != n.minX && a < n.minX ? (r = (a = n.minX) - this.startPoints.box.x) : null != n.maxX && a > n.maxX - e.width && (r = (a = n.maxX - e.width) - this.startPoints.box.x), + null != n.minY && s < n.minY ? (o = (s = n.minY) - this.startPoints.box.y) : null != n.maxY && s > n.maxY - e.height && (o = (s = n.maxY - e.height) - this.startPoints.box.y), + null != n.snapToGrid && ((a -= a % n.snapToGrid), (s -= s % n.snapToGrid), (r -= r % n.snapToGrid), (o -= o % n.snapToGrid)), + this.el instanceof SVG.G ? this.el.matrix(this.startPoints.transform).transform({ x: r, y: o }, !0) : this.el.move(a, s)); + return i; + }), + (t.prototype.end = function (t) { + var e = this.drag(t); + this.el.fire("dragend", { event: t, p: e, m: this.m, handler: this }), SVG.off(window, "mousemove.drag"), SVG.off(window, "touchmove.drag"), SVG.off(window, "mouseup.drag"), SVG.off(window, "touchend.drag"); + }), + SVG.extend(SVG.Element, { + draggable: function (e, i) { + ("function" != typeof e && "object" != typeof e) || ((i = e), (e = !0)); + var a = this.remember("_draggable") || new t(this); + return (e = void 0 === e || e) ? a.init(i || {}, e) : (this.off("mousedown.drag"), this.off("touchstart.drag")), this; + }, + }); + }.call(void 0), + (function () { + function t(t) { + (this.el = t), t.remember("_selectHandler", this), (this.pointSelection = { isSelected: !1 }), (this.rectSelection = { isSelected: !1 }); + } + (t.prototype.init = function (t, e) { + var i = this.el.bbox(); + for (var a in ((this.options = {}), this.el.selectize.defaults)) (this.options[a] = this.el.selectize.defaults[a]), void 0 !== e[a] && (this.options[a] = e[a]); + (this.parent = this.el.parent()), + (this.nested = this.nested || this.parent.group()), + this.nested.matrix(new SVG.Matrix(this.el).translate(i.x, i.y)), + this.options.deepSelect && -1 !== ["line", "polyline", "polygon"].indexOf(this.el.type) ? this.selectPoints(t) : this.selectRect(t), + this.observe(), + this.cleanup(); + }), + (t.prototype.selectPoints = function (t) { + return (this.pointSelection.isSelected = t), this.pointSelection.set ? this : ((this.pointSelection.set = this.parent.set()), this.drawCircles(), this); + }), + (t.prototype.getPointArray = function () { + var t = this.el.bbox(); + return this.el + .array() + .valueOf() + .map(function (e) { + return [e[0] - t.x, e[1] - t.y]; + }); + }), + (t.prototype.drawCircles = function () { + for (var t = this, e = this.getPointArray(), i = 0, a = e.length; i < a; ++i) { + var s = (function (e) { + return function (i) { + (i = i || window.event).preventDefault ? i.preventDefault() : (i.returnValue = !1), i.stopPropagation(); + var a = i.pageX || i.touches[0].pageX, + s = i.pageY || i.touches[0].pageY; + t.el.fire("point", { x: a, y: s, i: e, event: i }); + }; + })(i); + this.pointSelection.set.add( + this.nested + .circle(this.options.radius) + .center(e[i][0], e[i][1]) + .addClass(this.options.classPoints) + .addClass(this.options.classPoints + "_point") + .on("touchstart", s) + .on("mousedown", s) + ); + } + }), + (t.prototype.updatePointSelection = function () { + var t = this.getPointArray(); + this.pointSelection.set.each(function (e) { + (this.cx() === t[e][0] && this.cy() === t[e][1]) || this.center(t[e][0], t[e][1]); + }); + }), + (t.prototype.updateRectSelection = function () { + var t = this.el.bbox(); + this.rectSelection.set.get(0).attr({ width: t.width, height: t.height }), + this.options.points && + (this.rectSelection.set.get(2).center(t.width, 0), + this.rectSelection.set.get(3).center(t.width, t.height), + this.rectSelection.set.get(4).center(0, t.height), + this.rectSelection.set.get(5).center(t.width / 2, 0), + this.rectSelection.set.get(6).center(t.width, t.height / 2), + this.rectSelection.set.get(7).center(t.width / 2, t.height), + this.rectSelection.set.get(8).center(0, t.height / 2)), + this.options.rotationPoint && (this.options.points ? this.rectSelection.set.get(9).center(t.width / 2, 20) : this.rectSelection.set.get(1).center(t.width / 2, 20)); + }), + (t.prototype.selectRect = function (t) { + var e = this, + i = this.el.bbox(); + function a(t) { + return function (i) { + (i = i || window.event).preventDefault ? i.preventDefault() : (i.returnValue = !1), i.stopPropagation(); + var a = i.pageX || i.touches[0].pageX, + s = i.pageY || i.touches[0].pageY; + e.el.fire(t, { x: a, y: s, event: i }); + }; + } + if ( + ((this.rectSelection.isSelected = t), + (this.rectSelection.set = this.rectSelection.set || this.parent.set()), + this.rectSelection.set.get(0) || this.rectSelection.set.add(this.nested.rect(i.width, i.height).addClass(this.options.classRect)), + this.options.points && !this.rectSelection.set.get(1)) + ) { + var s = "touchstart", + n = "mousedown"; + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(0, 0) + .attr("class", this.options.classPoints + "_lt") + .on(n, a("lt")) + .on(s, a("lt")) + ), + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(i.width, 0) + .attr("class", this.options.classPoints + "_rt") + .on(n, a("rt")) + .on(s, a("rt")) + ), + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(i.width, i.height) + .attr("class", this.options.classPoints + "_rb") + .on(n, a("rb")) + .on(s, a("rb")) + ), + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(0, i.height) + .attr("class", this.options.classPoints + "_lb") + .on(n, a("lb")) + .on(s, a("lb")) + ), + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(i.width / 2, 0) + .attr("class", this.options.classPoints + "_t") + .on(n, a("t")) + .on(s, a("t")) + ), + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(i.width, i.height / 2) + .attr("class", this.options.classPoints + "_r") + .on(n, a("r")) + .on(s, a("r")) + ), + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(i.width / 2, i.height) + .attr("class", this.options.classPoints + "_b") + .on(n, a("b")) + .on(s, a("b")) + ), + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(0, i.height / 2) + .attr("class", this.options.classPoints + "_l") + .on(n, a("l")) + .on(s, a("l")) + ), + this.rectSelection.set.each(function () { + this.addClass(e.options.classPoints); + }); + } + if (this.options.rotationPoint && ((this.options.points && !this.rectSelection.set.get(9)) || (!this.options.points && !this.rectSelection.set.get(1)))) { + var r = function (t) { + (t = t || window.event).preventDefault ? t.preventDefault() : (t.returnValue = !1), t.stopPropagation(); + var i = t.pageX || t.touches[0].pageX, + a = t.pageY || t.touches[0].pageY; + e.el.fire("rot", { x: i, y: a, event: t }); + }; + this.rectSelection.set.add( + this.nested + .circle(this.options.radius) + .center(i.width / 2, 20) + .attr("class", this.options.classPoints + "_rot") + .on("touchstart", r) + .on("mousedown", r) + ); + } + }), + (t.prototype.handler = function () { + var t = this.el.bbox(); + this.nested.matrix(new SVG.Matrix(this.el).translate(t.x, t.y)), this.rectSelection.isSelected && this.updateRectSelection(), this.pointSelection.isSelected && this.updatePointSelection(); + }), + (t.prototype.observe = function () { + var t = this; + if (MutationObserver) + if (this.rectSelection.isSelected || this.pointSelection.isSelected) + (this.observerInst = + this.observerInst || + new MutationObserver(function () { + t.handler(); + })), + this.observerInst.observe(this.el.node, { attributes: !0 }); + else + try { + this.observerInst.disconnect(), delete this.observerInst; + } catch (t) {} + else + this.el.off("DOMAttrModified.select"), + (this.rectSelection.isSelected || this.pointSelection.isSelected) && + this.el.on("DOMAttrModified.select", function () { + t.handler(); + }); + }), + (t.prototype.cleanup = function () { + !this.rectSelection.isSelected && + this.rectSelection.set && + (this.rectSelection.set.each(function () { + this.remove(); + }), + this.rectSelection.set.clear(), + delete this.rectSelection.set), + !this.pointSelection.isSelected && + this.pointSelection.set && + (this.pointSelection.set.each(function () { + this.remove(); + }), + this.pointSelection.set.clear(), + delete this.pointSelection.set), + this.pointSelection.isSelected || this.rectSelection.isSelected || (this.nested.remove(), delete this.nested); + }), + SVG.extend(SVG.Element, { + selectize: function (e, i) { + return "object" == typeof e && ((i = e), (e = !0)), (this.remember("_selectHandler") || new t(this)).init(void 0 === e || e, i || {}), this; + }, + }), + (SVG.Element.prototype.selectize.defaults = { points: !0, classRect: "svg_select_boundingRect", classPoints: "svg_select_points", radius: 7, rotationPoint: !0, deepSelect: !1 }); + })(), + (function () { + (function () { + function t(t) { + t.remember("_resizeHandler", this), (this.el = t), (this.parameters = {}), (this.lastUpdateCall = null), (this.p = t.doc().node.createSVGPoint()); + } + (t.prototype.transformPoint = function (t, e, i) { + return (this.p.x = t - (this.offset.x - window.pageXOffset)), (this.p.y = e - (this.offset.y - window.pageYOffset)), this.p.matrixTransform(i || this.m); + }), + (t.prototype._extractPosition = function (t) { + return { x: null != t.clientX ? t.clientX : t.touches[0].clientX, y: null != t.clientY ? t.clientY : t.touches[0].clientY }; + }), + (t.prototype.init = function (t) { + var e = this; + if ((this.stop(), "stop" !== t)) { + for (var i in ((this.options = {}), this.el.resize.defaults)) (this.options[i] = this.el.resize.defaults[i]), void 0 !== t[i] && (this.options[i] = t[i]); + this.el.on("lt.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("rt.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("rb.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("lb.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("t.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("r.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("b.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("l.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("rot.resize", function (t) { + e.resize(t || window.event); + }), + this.el.on("point.resize", function (t) { + e.resize(t || window.event); + }), + this.update(); + } + }), + (t.prototype.stop = function () { + return ( + this.el.off("lt.resize"), + this.el.off("rt.resize"), + this.el.off("rb.resize"), + this.el.off("lb.resize"), + this.el.off("t.resize"), + this.el.off("r.resize"), + this.el.off("b.resize"), + this.el.off("l.resize"), + this.el.off("rot.resize"), + this.el.off("point.resize"), + this + ); + }), + (t.prototype.resize = function (t) { + var e = this; + (this.m = this.el.node.getScreenCTM().inverse()), (this.offset = { x: window.pageXOffset, y: window.pageYOffset }); + var i = this._extractPosition(t.detail.event); + if ( + ((this.parameters = { type: this.el.type, p: this.transformPoint(i.x, i.y), x: t.detail.x, y: t.detail.y, box: this.el.bbox(), rotation: this.el.transform().rotation }), + "text" === this.el.type && (this.parameters.fontSize = this.el.attr()["font-size"]), + void 0 !== t.detail.i) + ) { + var a = this.el.array().valueOf(); + (this.parameters.i = t.detail.i), (this.parameters.pointCoords = [a[t.detail.i][0], a[t.detail.i][1]]); + } + switch (t.type) { + case "lt": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e); + if (this.parameters.box.width - i[0] > 0 && this.parameters.box.height - i[1] > 0) { + if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x + i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize - i[0]); + (i = this.checkAspectRatio(i)), this.el.move(this.parameters.box.x + i[0], this.parameters.box.y + i[1]).size(this.parameters.box.width - i[0], this.parameters.box.height - i[1]); + } + }; + break; + case "rt": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, 2); + if (this.parameters.box.width + i[0] > 0 && this.parameters.box.height - i[1] > 0) { + if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x - i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize + i[0]); + (i = this.checkAspectRatio(i, !0)), this.el.move(this.parameters.box.x, this.parameters.box.y + i[1]).size(this.parameters.box.width + i[0], this.parameters.box.height - i[1]); + } + }; + break; + case "rb": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, 0); + if (this.parameters.box.width + i[0] > 0 && this.parameters.box.height + i[1] > 0) { + if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x - i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize + i[0]); + (i = this.checkAspectRatio(i)), this.el.move(this.parameters.box.x, this.parameters.box.y).size(this.parameters.box.width + i[0], this.parameters.box.height + i[1]); + } + }; + break; + case "lb": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, 1); + if (this.parameters.box.width - i[0] > 0 && this.parameters.box.height + i[1] > 0) { + if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x + i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize - i[0]); + (i = this.checkAspectRatio(i, !0)), this.el.move(this.parameters.box.x + i[0], this.parameters.box.y).size(this.parameters.box.width - i[0], this.parameters.box.height + i[1]); + } + }; + break; + case "t": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, 2); + if (this.parameters.box.height - i[1] > 0) { + if ("text" === this.parameters.type) return; + this.el.move(this.parameters.box.x, this.parameters.box.y + i[1]).height(this.parameters.box.height - i[1]); + } + }; + break; + case "r": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, 0); + if (this.parameters.box.width + i[0] > 0) { + if ("text" === this.parameters.type) return; + this.el.move(this.parameters.box.x, this.parameters.box.y).width(this.parameters.box.width + i[0]); + } + }; + break; + case "b": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, 0); + if (this.parameters.box.height + i[1] > 0) { + if ("text" === this.parameters.type) return; + this.el.move(this.parameters.box.x, this.parameters.box.y).height(this.parameters.box.height + i[1]); + } + }; + break; + case "l": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, 1); + if (this.parameters.box.width - i[0] > 0) { + if ("text" === this.parameters.type) return; + this.el.move(this.parameters.box.x + i[0], this.parameters.box.y).width(this.parameters.box.width - i[0]); + } + }; + break; + case "rot": + this.calc = function (t, e) { + var i = t + this.parameters.p.x, + a = e + this.parameters.p.y, + s = Math.atan2(this.parameters.p.y - this.parameters.box.y - this.parameters.box.height / 2, this.parameters.p.x - this.parameters.box.x - this.parameters.box.width / 2), + n = Math.atan2(a - this.parameters.box.y - this.parameters.box.height / 2, i - this.parameters.box.x - this.parameters.box.width / 2), + r = this.parameters.rotation + (180 * (n - s)) / Math.PI + this.options.snapToAngle / 2; + this.el.center(this.parameters.box.cx, this.parameters.box.cy).rotate(r - (r % this.options.snapToAngle), this.parameters.box.cx, this.parameters.box.cy); + }; + break; + case "point": + this.calc = function (t, e) { + var i = this.snapToGrid(t, e, this.parameters.pointCoords[0], this.parameters.pointCoords[1]), + a = this.el.array().valueOf(); + (a[this.parameters.i][0] = this.parameters.pointCoords[0] + i[0]), (a[this.parameters.i][1] = this.parameters.pointCoords[1] + i[1]), this.el.plot(a); + }; + } + this.el.fire("resizestart", { dx: this.parameters.x, dy: this.parameters.y, event: t }), + SVG.on(window, "touchmove.resize", function (t) { + e.update(t || window.event); + }), + SVG.on(window, "touchend.resize", function () { + e.done(); + }), + SVG.on(window, "mousemove.resize", function (t) { + e.update(t || window.event); + }), + SVG.on(window, "mouseup.resize", function () { + e.done(); + }); + }), + (t.prototype.update = function (t) { + if (t) { + var e = this._extractPosition(t), + i = this.transformPoint(e.x, e.y), + a = i.x - this.parameters.p.x, + s = i.y - this.parameters.p.y; + (this.lastUpdateCall = [a, s]), this.calc(a, s), this.el.fire("resizing", { dx: a, dy: s, event: t }); + } else this.lastUpdateCall && this.calc(this.lastUpdateCall[0], this.lastUpdateCall[1]); + }), + (t.prototype.done = function () { + (this.lastUpdateCall = null), SVG.off(window, "mousemove.resize"), SVG.off(window, "mouseup.resize"), SVG.off(window, "touchmove.resize"), SVG.off(window, "touchend.resize"), this.el.fire("resizedone"); + }), + (t.prototype.snapToGrid = function (t, e, i, a) { + var s; + return ( + void 0 !== a + ? (s = [(i + t) % this.options.snapToGrid, (a + e) % this.options.snapToGrid]) + : ((i = null == i ? 3 : i), + (s = [ + (this.parameters.box.x + t + (1 & i ? 0 : this.parameters.box.width)) % this.options.snapToGrid, + (this.parameters.box.y + e + (2 & i ? 0 : this.parameters.box.height)) % this.options.snapToGrid, + ])), + t < 0 && (s[0] -= this.options.snapToGrid), + e < 0 && (s[1] -= this.options.snapToGrid), + (t -= Math.abs(s[0]) < this.options.snapToGrid / 2 ? s[0] : s[0] - (t < 0 ? -this.options.snapToGrid : this.options.snapToGrid)), + (e -= Math.abs(s[1]) < this.options.snapToGrid / 2 ? s[1] : s[1] - (e < 0 ? -this.options.snapToGrid : this.options.snapToGrid)), + this.constraintToBox(t, e, i, a) + ); + }), + (t.prototype.constraintToBox = function (t, e, i, a) { + var s, + n, + r = this.options.constraint || {}; + return ( + void 0 !== a ? ((s = i), (n = a)) : ((s = this.parameters.box.x + (1 & i ? 0 : this.parameters.box.width)), (n = this.parameters.box.y + (2 & i ? 0 : this.parameters.box.height))), + void 0 !== r.minX && s + t < r.minX && (t = r.minX - s), + void 0 !== r.maxX && s + t > r.maxX && (t = r.maxX - s), + void 0 !== r.minY && n + e < r.minY && (e = r.minY - n), + void 0 !== r.maxY && n + e > r.maxY && (e = r.maxY - n), + [t, e] + ); + }), + (t.prototype.checkAspectRatio = function (t, e) { + if (!this.options.saveAspectRatio) return t; + var i = t.slice(), + a = this.parameters.box.width / this.parameters.box.height, + s = this.parameters.box.width + t[0], + n = this.parameters.box.height - t[1], + r = s / n; + return r < a ? ((i[1] = s / a - this.parameters.box.height), e && (i[1] = -i[1])) : r > a && ((i[0] = this.parameters.box.width - n * a), e && (i[0] = -i[0])), i; + }), + SVG.extend(SVG.Element, { + resize: function (e) { + return (this.remember("_resizeHandler") || new t(this)).init(e || {}), this; + }, + }), + (SVG.Element.prototype.resize.defaults = { snapToAngle: 0.1, snapToGrid: 1, constraint: {}, saveAspectRatio: !1 }); + }.call(this)); + })(); + !(function (t, e) { + void 0 === e && (e = {}); + var i = e.insertAt; + if (t && "undefined" != typeof document) { + var a = document.head || document.getElementsByTagName("head")[0], + s = document.createElement("style"); + (s.type = "text/css"), "top" === i && a.firstChild ? a.insertBefore(s, a.firstChild) : a.appendChild(s), s.styleSheet ? (s.styleSheet.cssText = t) : s.appendChild(document.createTextNode(t)); + } + })( + '.apexcharts-canvas {\n position: relative;\n user-select: none;\n /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */\n}\n\n/* scrollbar is not visible by default for legend, hence forcing the visibility */\n.apexcharts-canvas ::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 6px;\n}\n.apexcharts-canvas ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(0,0,0,.5);\n box-shadow: 0 0 1px rgba(255,255,255,.5);\n -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);\n}\n.apexcharts-canvas.dark {\n background: #343F57;\n}\n\n.apexcharts-inner {\n position: relative;\n}\n\n.legend-mouseover-inactive {\n transition: 0.15s ease all;\n opacity: 0.20;\n}\n\n.apexcharts-series-collapsed {\n opacity: 0;\n}\n\n.apexcharts-gridline, .apexcharts-text {\n pointer-events: none;\n}\n\n.apexcharts-tooltip {\n border-radius: 5px;\n box-shadow: 2px 2px 6px -4px #999;\n cursor: default;\n font-size: 14px;\n left: 62px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 20px;\n overflow: hidden;\n white-space: nowrap;\n z-index: 12;\n transition: 0.15s ease all;\n}\n.apexcharts-tooltip.light {\n border: 1px solid #e3e3e3;\n background: rgba(255, 255, 255, 0.96);\n}\n.apexcharts-tooltip.dark {\n color: #fff;\n background: rgba(30,30,30, 0.8);\n}\n.apexcharts-tooltip * {\n font-family: inherit;\n}\n\n.apexcharts-tooltip .apexcharts-marker,\n.apexcharts-area-series .apexcharts-area,\n.apexcharts-line {\n pointer-events: none;\n}\n\n.apexcharts-tooltip.active {\n opacity: 1;\n transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip-title {\n padding: 6px;\n font-size: 15px;\n margin-bottom: 4px;\n}\n.apexcharts-tooltip.light .apexcharts-tooltip-title {\n background: #ECEFF1;\n border-bottom: 1px solid #ddd;\n}\n.apexcharts-tooltip.dark .apexcharts-tooltip-title {\n background: rgba(0, 0, 0, 0.7);\n border-bottom: 1px solid #333;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n display: inline-block;\n font-weight: 600;\n margin-left: 5px;\n}\n\n.apexcharts-tooltip-text-z-label:empty,\n.apexcharts-tooltip-text-z-value:empty {\n display: none;\n}\n\n.apexcharts-tooltip-text-value, \n.apexcharts-tooltip-text-z-value {\n font-weight: 600;\n}\n\n.apexcharts-tooltip-marker {\n width: 12px;\n height: 12px;\n position: relative;\n top: 0px;\n margin-right: 10px;\n border-radius: 50%;\n}\n\n.apexcharts-tooltip-series-group {\n padding: 0 10px;\n display: none;\n text-align: left;\n justify-content: left;\n align-items: center;\n}\n\n.apexcharts-tooltip-series-group.active .apexcharts-tooltip-marker {\n opacity: 1;\n}\n.apexcharts-tooltip-series-group.active, .apexcharts-tooltip-series-group:last-child {\n padding-bottom: 4px;\n}\n.apexcharts-tooltip-series-group-hidden {\n opacity: 0;\n height: 0;\n line-height: 0;\n padding: 0 !important;\n}\n.apexcharts-tooltip-y-group {\n padding: 6px 0 5px;\n}\n.apexcharts-tooltip-candlestick {\n padding: 4px 8px;\n}\n.apexcharts-tooltip-candlestick > div {\n margin: 4px 0;\n}\n.apexcharts-tooltip-candlestick span.value {\n font-weight: bold;\n}\n\n.apexcharts-tooltip-rangebar {\n padding: 5px 8px;\n}\n\n.apexcharts-tooltip-rangebar .category {\n font-weight: 600;\n color: #777;\n}\n\n.apexcharts-tooltip-rangebar .series-name {\n font-weight: bold;\n display: block;\n margin-bottom: 5px;\n}\n\n.apexcharts-xaxistooltip {\n opacity: 0;\n padding: 9px 10px;\n pointer-events: none;\n color: #373d3f;\n font-size: 13px;\n text-align: center;\n border-radius: 2px;\n position: absolute;\n z-index: 10;\n\tbackground: #ECEFF1;\n border: 1px solid #90A4AE;\n transition: 0.15s ease all;\n}\n\n.apexcharts-xaxistooltip.dark {\n background: rgba(0, 0, 0, 0.7);\n border: 1px solid rgba(0, 0, 0, 0.5);\n color: #fff;\n}\n\n.apexcharts-xaxistooltip:after, .apexcharts-xaxistooltip:before {\n\tleft: 50%;\n\tborder: solid transparent;\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n\n.apexcharts-xaxistooltip:after {\n\tborder-color: rgba(236, 239, 241, 0);\n\tborder-width: 6px;\n\tmargin-left: -6px;\n}\n.apexcharts-xaxistooltip:before {\n\tborder-color: rgba(144, 164, 174, 0);\n\tborder-width: 7px;\n\tmargin-left: -7px;\n}\n\n.apexcharts-xaxistooltip-bottom:after, .apexcharts-xaxistooltip-bottom:before {\n bottom: 100%;\n}\n\n.apexcharts-xaxistooltip-top:after, .apexcharts-xaxistooltip-top:before {\n top: 100%;\n}\n\n.apexcharts-xaxistooltip-bottom:after {\n border-bottom-color: #ECEFF1;\n}\n.apexcharts-xaxistooltip-bottom:before {\n border-bottom-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-bottom.dark:after {\n border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n.apexcharts-xaxistooltip-bottom.dark:before {\n border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top:after {\n border-top-color:#ECEFF1\n}\n.apexcharts-xaxistooltip-top:before {\n border-top-color: #90A4AE;\n}\n.apexcharts-xaxistooltip-top.dark:after {\n border-top-color:rgba(0, 0, 0, 0.5);\n}\n.apexcharts-xaxistooltip-top.dark:before {\n border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n\n.apexcharts-xaxistooltip.active {\n opacity: 1;\n transition: 0.15s ease all;\n}\n\n.apexcharts-yaxistooltip {\n opacity: 0;\n padding: 4px 10px;\n pointer-events: none;\n color: #373d3f;\n font-size: 13px;\n text-align: center;\n border-radius: 2px;\n position: absolute;\n z-index: 10;\n\tbackground: #ECEFF1;\n border: 1px solid #90A4AE;\n}\n\n.apexcharts-yaxistooltip.dark {\n background: rgba(0, 0, 0, 0.7);\n border: 1px solid rgba(0, 0, 0, 0.5);\n color: #fff;\n}\n\n.apexcharts-yaxistooltip:after, .apexcharts-yaxistooltip:before {\n\ttop: 50%;\n\tborder: solid transparent;\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.apexcharts-yaxistooltip:after {\n\tborder-color: rgba(236, 239, 241, 0);\n\tborder-width: 6px;\n\tmargin-top: -6px;\n}\n.apexcharts-yaxistooltip:before {\n\tborder-color: rgba(144, 164, 174, 0);\n\tborder-width: 7px;\n\tmargin-top: -7px;\n}\n\n.apexcharts-yaxistooltip-left:after, .apexcharts-yaxistooltip-left:before {\n left: 100%;\n}\n\n.apexcharts-yaxistooltip-right:after, .apexcharts-yaxistooltip-right:before {\n right: 100%;\n}\n\n.apexcharts-yaxistooltip-left:after {\n border-left-color: #ECEFF1;\n}\n.apexcharts-yaxistooltip-left:before {\n border-left-color: #90A4AE;\n}\n.apexcharts-yaxistooltip-left.dark:after {\n border-left-color: rgba(0, 0, 0, 0.5);\n}\n.apexcharts-yaxistooltip-left.dark:before {\n border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right:after {\n border-right-color: #ECEFF1;\n}\n.apexcharts-yaxistooltip-right:before {\n border-right-color: #90A4AE;\n}\n.apexcharts-yaxistooltip-right.dark:after {\n border-right-color: rgba(0, 0, 0, 0.5);\n}\n.apexcharts-yaxistooltip-right.dark:before {\n border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip.active {\n opacity: 1;\n}\n\n.apexcharts-xcrosshairs, .apexcharts-ycrosshairs {\n pointer-events: none;\n opacity: 0;\n transition: 0.15s ease all;\n}\n\n.apexcharts-xcrosshairs.active, .apexcharts-ycrosshairs.active {\n opacity: 1;\n transition: 0.15s ease all;\n}\n\n.apexcharts-ycrosshairs-hidden {\n opacity: 0;\n}\n\n.apexcharts-zoom-rect {\n pointer-events: none;\n}\n.apexcharts-selection-rect {\n cursor: move;\n}\n\n.svg_select_points, .svg_select_points_rot {\n opacity: 0;\n visibility: hidden;\n}\n.svg_select_points_l, .svg_select_points_r {\n cursor: ew-resize;\n opacity: 1;\n visibility: visible;\n fill: #888;\n}\n.apexcharts-canvas.zoomable .hovering-zoom {\n cursor: crosshair\n}\n.apexcharts-canvas.zoomable .hovering-pan {\n cursor: move\n}\n\n.apexcharts-xaxis,\n.apexcharts-yaxis {\n pointer-events: none;\n}\n\n.apexcharts-zoom-icon, \n.apexcharts-zoom-in-icon,\n.apexcharts-zoom-out-icon,\n.apexcharts-reset-zoom-icon, \n.apexcharts-pan-icon, \n.apexcharts-selection-icon,\n.apexcharts-menu-icon, \n.apexcharts-toolbar-custom-icon {\n cursor: pointer;\n width: 20px;\n height: 20px;\n line-height: 24px;\n color: #6E8192;\n text-align: center;\n}\n\n\n.apexcharts-zoom-icon svg, \n.apexcharts-zoom-in-icon svg,\n.apexcharts-zoom-out-icon svg,\n.apexcharts-reset-zoom-icon svg,\n.apexcharts-menu-icon svg {\n fill: #6E8192;\n}\n.apexcharts-selection-icon svg {\n fill: #444;\n transform: scale(0.76)\n}\n\n.dark .apexcharts-zoom-icon svg, \n.dark .apexcharts-zoom-in-icon svg,\n.dark .apexcharts-zoom-out-icon svg,\n.dark .apexcharts-reset-zoom-icon svg, \n.dark .apexcharts-pan-icon svg, \n.dark .apexcharts-selection-icon svg,\n.dark .apexcharts-menu-icon svg, \n.dark .apexcharts-toolbar-custom-icon svg{\n fill: #f3f4f5;\n}\n\n.apexcharts-canvas .apexcharts-zoom-icon.selected svg, \n.apexcharts-canvas .apexcharts-selection-icon.selected svg, \n.apexcharts-canvas .apexcharts-reset-zoom-icon.selected svg {\n fill: #008FFB;\n}\n.light .apexcharts-selection-icon:not(.selected):hover svg,\n.light .apexcharts-zoom-icon:not(.selected):hover svg, \n.light .apexcharts-zoom-in-icon:hover svg, \n.light .apexcharts-zoom-out-icon:hover svg, \n.light .apexcharts-reset-zoom-icon:hover svg, \n.light .apexcharts-menu-icon:hover svg {\n fill: #333;\n}\n\n.apexcharts-selection-icon, .apexcharts-menu-icon {\n position: relative;\n}\n.apexcharts-reset-zoom-icon {\n margin-left: 5px;\n}\n.apexcharts-zoom-icon, .apexcharts-reset-zoom-icon, .apexcharts-menu-icon {\n transform: scale(0.85);\n}\n\n.apexcharts-zoom-in-icon, .apexcharts-zoom-out-icon {\n transform: scale(0.7)\n}\n\n.apexcharts-zoom-out-icon {\n margin-right: 3px;\n}\n\n.apexcharts-pan-icon {\n transform: scale(0.62);\n position: relative;\n left: 1px;\n top: 0px;\n}\n.apexcharts-pan-icon svg {\n fill: #fff;\n stroke: #6E8192;\n stroke-width: 2;\n}\n.apexcharts-pan-icon.selected svg {\n stroke: #008FFB;\n}\n.apexcharts-pan-icon:not(.selected):hover svg {\n stroke: #333;\n}\n\n.apexcharts-toolbar {\n position: absolute;\n z-index: 11;\n top: 0px;\n right: 3px;\n max-width: 176px;\n text-align: right;\n border-radius: 3px;\n padding: 0px 6px 2px 6px;\n display: flex;\n justify-content: space-between;\n align-items: center; \n}\n\n.apexcharts-toolbar svg {\n pointer-events: none;\n}\n\n.apexcharts-menu {\n background: #fff;\n position: absolute;\n top: 100%;\n border: 1px solid #ddd;\n border-radius: 3px;\n padding: 3px;\n right: 10px;\n opacity: 0;\n min-width: 110px;\n transition: 0.15s ease all;\n pointer-events: none;\n}\n\n.apexcharts-menu.open {\n opacity: 1;\n pointer-events: all;\n transition: 0.15s ease all;\n}\n\n.apexcharts-menu-item {\n padding: 6px 7px;\n font-size: 12px;\n cursor: pointer;\n}\n.light .apexcharts-menu-item:hover {\n background: #eee;\n}\n.dark .apexcharts-menu {\n background: rgba(0, 0, 0, 0.7);\n color: #fff;\n}\n\n@media screen and (min-width: 768px) {\n .apexcharts-toolbar {\n /*opacity: 0;*/\n }\n\n .apexcharts-canvas:hover .apexcharts-toolbar {\n opacity: 1;\n } \n}\n\n.apexcharts-datalabel.hidden {\n opacity: 0;\n}\n\n.apexcharts-pie-label,\n.apexcharts-datalabel, .apexcharts-datalabel-label, .apexcharts-datalabel-value {\n cursor: default;\n pointer-events: none;\n}\n\n.apexcharts-pie-label-delay {\n opacity: 0;\n animation-name: opaque;\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n animation-timing-function: ease;\n}\n\n.apexcharts-canvas .hidden {\n opacity: 0;\n}\n\n.apexcharts-hide .apexcharts-series-points {\n opacity: 0;\n}\n\n.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events, .apexcharts-radar-series path, .apexcharts-radar-series polygon {\n pointer-events: none;\n}\n\n/* markers */\n\n.apexcharts-marker {\n transition: 0.15s ease all;\n}\n\n@keyframes opaque {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}' + ), + /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ + "document" in self && + (("classList" in document.createElement("_") && (!document.createElementNS || "classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) || + (function (t) { + if ("Element" in t) { + var e = t.Element.prototype, + i = Object, + a = + String.prototype.trim || + function () { + return this.replace(/^\s+|\s+$/g, ""); + }, + s = + Array.prototype.indexOf || + function (t) { + for (var e = 0, i = this.length; e < i; e++) if (e in this && this[e] === t) return e; + return -1; + }, + n = function (t, e) { + (this.name = t), (this.code = DOMException[t]), (this.message = e); + }, + r = function (t, e) { + if ("" === e) throw new n("SYNTAX_ERR", "The token must not be empty."); + if (/\s/.test(e)) throw new n("INVALID_CHARACTER_ERR", "The token must not contain space characters."); + return s.call(t, e); + }, + o = function (t) { + for (var e = a.call(t.getAttribute("class") || ""), i = e ? e.split(/\s+/) : [], s = 0, n = i.length; s < n; s++) this.push(i[s]); + this._updateClassName = function () { + t.setAttribute("class", this.toString()); + }; + }, + l = (o.prototype = []), + h = function () { + return new o(this); + }; + if ( + ((n.prototype = Error.prototype), + (l.item = function (t) { + return this[t] || null; + }), + (l.contains = function (t) { + return ~r(this, t + ""); + }), + (l.add = function () { + var t, + e = arguments, + i = 0, + a = e.length, + s = !1; + do { + (t = e[i] + ""), ~r(this, t) || (this.push(t), (s = !0)); + } while (++i < a); + s && this._updateClassName(); + }), + (l.remove = function () { + var t, + e, + i = arguments, + a = 0, + s = i.length, + n = !1; + do { + for (t = i[a] + "", e = r(this, t); ~e; ) this.splice(e, 1), (n = !0), (e = r(this, t)); + } while (++a < s); + n && this._updateClassName(); + }), + (l.toggle = function (t, e) { + var i = this.contains(t), + a = i ? !0 !== e && "remove" : !1 !== e && "add"; + return a && this[a](t), !0 === e || !1 === e ? e : !i; + }), + (l.replace = function (t, e) { + var i = r(t + ""); + ~i && (this.splice(i, 1, e), this._updateClassName()); + }), + (l.toString = function () { + return this.join(" "); + }), + i.defineProperty) + ) { + var c = { get: h, enumerable: !0, configurable: !0 }; + try { + i.defineProperty(e, "classList", c); + } catch (t) { + (void 0 !== t.number && -2146823252 !== t.number) || ((c.enumerable = !1), i.defineProperty(e, "classList", c)); + } + } else i.prototype.__defineGetter__ && e.__defineGetter__("classList", h); + } + })(self), + (function () { + var t = document.createElement("_"); + if ((t.classList.add("c1", "c2"), !t.classList.contains("c2"))) { + var e = function (t) { + var e = DOMTokenList.prototype[t]; + DOMTokenList.prototype[t] = function (t) { + var i, + a = arguments.length; + for (i = 0; i < a; i++) (t = arguments[i]), e.call(this, t); + }; + }; + e("add"), e("remove"); + } + if ((t.classList.toggle("c3", !1), t.classList.contains("c3"))) { + var i = DOMTokenList.prototype.toggle; + DOMTokenList.prototype.toggle = function (t, e) { + return 1 in arguments && !this.contains(t) == !e ? e : i.call(this, t); + }; + } + "replace" in document.createElement("_").classList || + (DOMTokenList.prototype.replace = function (t, e) { + var i = this.toString().split(" "), + a = i.indexOf(t + ""); + ~a && ((i = i.slice(a)), this.remove.apply(this, i), this.add(e), this.add.apply(this, i.slice(1))); + }), + (t = null); + })()), + (function () { + var t = !1; + function e(t) { + var e = t.__resizeTriggers__, + i = e.firstElementChild, + a = e.lastElementChild, + s = i.firstElementChild; + (a.scrollLeft = a.scrollWidth), + (a.scrollTop = a.scrollHeight), + (s.style.width = i.offsetWidth + 1 + "px"), + (s.style.height = i.offsetHeight + 1 + "px"), + (i.scrollLeft = i.scrollWidth), + (i.scrollTop = i.scrollHeight); + } + function i(t) { + var i = this; + e(this), + this.__resizeRAF__ && r(this.__resizeRAF__), + (this.__resizeRAF__ = n(function () { + (function (t) { + return t.offsetWidth != t.__resizeLast__.width || t.offsetHeight != t.__resizeLast__.height; + })(i) && + ((i.__resizeLast__.width = i.offsetWidth), + (i.__resizeLast__.height = i.offsetHeight), + i.__resizeListeners__.forEach(function (e) { + e.call(t); + })); + })); + } + var a, + s, + n = + ((a = + window.requestAnimationFrame || + window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame || + function (t) { + return window.setTimeout(t, 20); + }), + function (t) { + return a(t); + }), + r = + ((s = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout), + function (t) { + return s(t); + }), + o = !1, + l = "", + h = "animationstart", + c = "Webkit Moz O ms".split(" "), + d = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "), + u = document.createElement("fakeelement"); + if ((void 0 !== u.style.animationName && (o = !0), !1 === o)) + for (var f = 0; f < c.length; f++) + if (void 0 !== u.style[c[f] + "AnimationName"]) { + (l = "-" + c[f].toLowerCase() + "-"), (h = d[f]); + break; + } + var g = "@" + l + "keyframes resizeanim { from { opacity: 0; } to { opacity: 0; } } ", + p = l + "animation: 1ms resizeanim; "; + (window.addResizeListener = function (a, s) { + a.__resizeTriggers__ || + ("static" == getComputedStyle(a).position && (a.style.position = "relative"), + (function () { + if (!t) { + var e = + (g || "") + + ".resize-triggers { " + + (p || "") + + 'visibility: hidden; opacity: 0; } .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', + i = document.head || document.getElementsByTagName("head")[0], + a = document.createElement("style"); + (a.type = "text/css"), a.styleSheet ? (a.styleSheet.cssText = e) : a.appendChild(document.createTextNode(e)), i.appendChild(a), (t = !0); + } + })(), + (a.__resizeLast__ = {}), + (a.__resizeListeners__ = []), + ((a.__resizeTriggers__ = document.createElement("div")).className = "resize-triggers"), + (a.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>'), + a.appendChild(a.__resizeTriggers__), + e(a), + a.addEventListener("scroll", i, !0), + h && + a.__resizeTriggers__.addEventListener(h, function (t) { + "resizeanim" == t.animationName && e(a); + })), + a.__resizeListeners__.push(s); + }), + (window.removeResizeListener = function (t, e) { + t && (t.__resizeListeners__.splice(t.__resizeListeners__.indexOf(e), 1), t.__resizeListeners__.length || (t.removeEventListener("scroll", i), (t.__resizeTriggers__ = !t.removeChild(t.__resizeTriggers__)))); + }); + })(), + (window.Apex = {}); + var At = (function () { + function t(e, i) { + n(this, t), + (this.opts = i), + (this.ctx = this), + (this.w = new E(i).init()), + (this.el = e), + (this.w.globals.cuid = (Math.random() + 1).toString(36).substring(4)), + (this.w.globals.chartID = this.w.config.chart.id ? this.w.config.chart.id : this.w.globals.cuid), + (this.eventList = ["mousedown", "mousemove", "touchstart", "touchmove", "mouseup", "touchend"]), + this.initModules(), + (this.create = p.bind(this.create, this)), + (this.documentEvent = p.bind(this.documentEvent, this)), + (this.windowResizeHandler = this.windowResize.bind(this)); + } + return ( + o( + t, + [ + { + key: "render", + value: function () { + var t = this; + return new et(function (e, i) { + if (null !== t.el) { + void 0 === Apex._chartInstances && (Apex._chartInstances = []), + t.w.config.chart.id && Apex._chartInstances.push({ id: t.w.globals.chartID, group: t.w.config.chart.group, chart: t }), + t.setLocale(t.w.config.chart.defaultLocale); + var a = t.w.config.chart.events.beforeMount; + "function" == typeof a && a(t, t.w), + t.fireEvent("beforeMount", [t, t.w]), + window.addEventListener("resize", t.windowResizeHandler), + window.addResizeListener(t.el.parentNode, t.parentResizeCallback.bind(t)); + var s = t.create(t.w.config.series, {}); + if (!s) return e(t); + t.mount(s) + .then(function () { + e(s), "function" == typeof t.w.config.chart.events.mounted && t.w.config.chart.events.mounted(t, t.w), t.fireEvent("mounted", [t, t.w]); + }) + .catch(function (t) { + i(t); + }); + } else i(new Error("Element not found")); + }); + }, + }, + { + key: "initModules", + value: function () { + (this.animations = new v(this)), + (this.core = new Q(this.el, this)), + (this.grid = new dt(this)), + (this.coreUtils = new A(this)), + (this.config = new C({})), + (this.crosshairs = new Y(this)), + (this.options = new y()), + (this.responsive = new ut(this)), + (this.series = new G(this)), + (this.theme = new ft(this)), + (this.formatters = new _(this)), + (this.titleSubtitle = new St(this)), + (this.legend = new j(this)), + (this.toolbar = new wt(this)), + (this.dimensions = new V(this)), + (this.zoomPanSelection = new kt(this)), + (this.w.globals.tooltip = new yt(this)); + }, + }, + { + key: "addEventListener", + value: function (t, e) { + var i = this.w; + i.globals.events.hasOwnProperty(t) ? i.globals.events[t].push(e) : (i.globals.events[t] = [e]); + }, + }, + { + key: "removeEventListener", + value: function (t, e) { + var i = this.w; + if (i.globals.events.hasOwnProperty(t)) { + var a = i.globals.events[t].indexOf(e); + -1 !== a && i.globals.events[t].splice(a, 1); + } + }, + }, + { + key: "fireEvent", + value: function (t, e) { + var i = this.w; + if (i.globals.events.hasOwnProperty(t)) { + (e && e.length) || (e = []); + for (var a = i.globals.events[t], s = a.length, n = 0; n < s; n++) a[n].apply(null, e); + } + }, + }, + { + key: "create", + value: function (t, e) { + var i = this.w; + this.initModules(); + var a = this.w.globals; + if (((a.noData = !1), (a.animationEnded = !1), this.responsive.checkResponsiveConfig(e), null === this.el)) return (a.animationEnded = !0), null; + if ((this.core.setupElements(), 0 === a.svgWidth)) return (a.animationEnded = !0), null; + var s = A.checkComboSeries(t); + (a.comboCharts = s.comboCharts), + (a.comboChartsHasBars = s.comboChartsHasBars), + (0 === t.length || (1 === t.length && t[0].data && 0 === t[0].data.length)) && this.series.handleNoData(), + this.setupEventHandlers(), + this.core.parseData(t), + this.theme.init(), + new T(this).setGlobalMarkerSize(), + this.formatters.setLabelFormatters(), + this.titleSubtitle.draw(), + i.globals.noData || this.legend.init(), + this.series.hasAllSeriesEqualX(), + a.axisCharts && (this.core.coreCalculations(), "category" !== i.config.xaxis.type && this.formatters.setLabelFormatters()), + this.formatters.heatmapLabelFormatters(), + this.dimensions.plotCoords(); + var n = this.core.xySettings(); + this.grid.createGridMask(); + var r = this.core.plotChartType(t, n); + this.core.shiftGraphPosition(); + var o = { plot: { left: i.globals.translateX, top: i.globals.translateY, width: i.globals.gridWidth, height: i.globals.gridHeight } }; + return { elGraph: r, xyRatios: n, elInner: i.globals.dom.elGraphical, dimensions: o }; + }, + }, + { + key: "mount", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null, + e = this, + i = e.w; + return new et(function (a, s) { + if (null === e.el) return s(new Error("Not enough data to display or target element not found")); + if ( + ((null === t || i.globals.allSeriesCollapsed) && e.series.handleNoData(), + (e.annotations = new w(e)), + e.core.drawAxis(i.config.chart.type, t.xyRatios), + (e.grid = new dt(e)), + "back" === i.config.grid.position && e.grid.drawGrid(), + "back" === i.config.annotations.position && e.annotations.drawAnnotations(), + t.elGraph instanceof Array) + ) + for (var n = 0; n < t.elGraph.length; n++) i.globals.dom.elGraphical.add(t.elGraph[n]); + else i.globals.dom.elGraphical.add(t.elGraph); + if ( + ("front" === i.config.grid.position && e.grid.drawGrid(), + "front" === i.config.xaxis.crosshairs.position && e.crosshairs.drawXCrosshairs(), + "front" === i.config.yaxis[0].crosshairs.position && e.crosshairs.drawYCrosshairs(), + "front" === i.config.annotations.position && e.annotations.drawAnnotations(), + !i.globals.noData) + ) { + if ((i.config.tooltip.enabled && !i.globals.noData && e.w.globals.tooltip.drawTooltip(t.xyRatios), i.globals.axisCharts && i.globals.isXNumeric)) + (i.config.chart.zoom.enabled || (i.config.chart.selection && i.config.chart.selection.enabled) || (i.config.chart.pan && i.config.chart.pan.enabled)) && + e.zoomPanSelection.init({ xyRatios: t.xyRatios }); + else { + var r = i.config.chart.toolbar.tools; + (r.zoom = !1), (r.zoomin = !1), (r.zoomout = !1), (r.selection = !1), (r.pan = !1), (r.reset = !1); + } + i.config.chart.toolbar.show && !i.globals.allSeriesCollapsed && e.toolbar.createToolbar(); + } + i.globals.memory.methodsToExec.length > 0 && + i.globals.memory.methodsToExec.forEach(function (t) { + t.method(t.params, !1, t.context); + }), + i.globals.axisCharts || i.globals.noData || e.core.resizeNonAxisCharts(), + a(e); + }); + }, + }, + { + key: "clearPreviousPaths", + value: function () { + var t = this.w; + (t.globals.previousPaths = []), (t.globals.allSeriesCollapsed = !1), (t.globals.collapsedSeries = []), (t.globals.collapsedSeriesIndices = []); + }, + }, + { + key: "updateOptions", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] && arguments[1], + i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2], + a = !(arguments.length > 3 && void 0 !== arguments[3]) || arguments[3], + s = this.w; + return ( + t.series && + (this.resetSeries(!1), + t.series[0].data && + (t.series = t.series.map(function (t, e) { + return h({}, s.config.series[e], { + name: t.name ? t.name : s.config.series[e] && s.config.series[e].name, + type: t.type ? t.type : s.config.series[e] && s.config.series[e].type, + data: t.data ? t.data : s.config.series[e] && s.config.series[e].data, + }); + })), + this.revertDefaultAxisMinMax()), + t.xaxis && ((t.xaxis.min || t.xaxis.max) && this.forceXAxisUpdate(t), t.xaxis.categories && t.xaxis.categories.length && s.config.xaxis.convertedCatToNumeric && (t = S.convertCatToNumeric(t))), + s.globals.collapsedSeriesIndices.length > 0 && this.clearPreviousPaths(), + t.theme && (t = this.theme.updateThemeOptions(t)), + this._updateOptions(t, e, i, a) + ); + }, + }, + { + key: "_updateOptions", + value: function (t) { + var e = arguments.length > 1 && void 0 !== arguments[1] && arguments[1], + i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2], + a = arguments.length > 3 && void 0 !== arguments[3] && arguments[3], + n = this.getSyncedCharts(); + this.w.globals.isExecCalled && ((n = [this]), (this.w.globals.isExecCalled = !1)), + n.forEach(function (n) { + var r = n.w; + return ( + (r.globals.shouldAnimate = i), + e || ((r.globals.resized = !0), (r.globals.dataChanged = !0), i && n.series.getPreviousPaths()), + t && + "object" === s(t) && + ((n.config = new C(t)), + (t = A.extendArrayProps(n.config, t)), + (r.config = p.extend(r.config, t)), + a && ((r.globals.lastXAxis = []), (r.globals.lastYAxis = []), (r.globals.initialConfig = p.extend({}, r.config)), (r.globals.initialSeries = JSON.parse(JSON.stringify(r.config.series))))), + n.update(t) + ); + }); + }, + }, + { + key: "updateSeries", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [], + e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2]; + return this.resetSeries(!1), this.revertDefaultAxisMinMax(), this._updateSeries(t, e, i); + }, + }, + { + key: "appendSeries", + value: function (t) { + var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2], + a = this.w.config.series.slice(); + return a.push(t), this.resetSeries(!1), this.revertDefaultAxisMinMax(), this._updateSeries(a, e, i); + }, + }, + { + key: "_updateSeries", + value: function (t, e) { + var i, + a = arguments.length > 2 && void 0 !== arguments[2] && arguments[2], + s = this.w; + return ( + (this.w.globals.shouldAnimate = e), + (s.globals.dataChanged = !0), + s.globals.allSeriesCollapsed && (s.globals.allSeriesCollapsed = !1), + e && this.series.getPreviousPaths(), + s.globals.axisCharts + ? (0 === + (i = t.map(function (t, e) { + return h({}, s.config.series[e], { + name: t.name ? t.name : s.config.series[e] && s.config.series[e].name, + type: t.type ? t.type : s.config.series[e] && s.config.series[e].type, + data: t.data ? t.data : s.config.series[e] && s.config.series[e].data, + }); + })).length && (i = [{ data: [] }]), + (s.config.series = i)) + : (s.config.series = t.slice()), + a && ((s.globals.initialConfig.series = JSON.parse(JSON.stringify(s.config.series))), (s.globals.initialSeries = JSON.parse(JSON.stringify(s.config.series)))), + this.update() + ); + }, + }, + { + key: "getSyncedCharts", + value: function () { + var t = this.getGroupedCharts(), + e = [this]; + return ( + t.length && + ((e = []), + t.forEach(function (t) { + e.push(t); + })), + e + ); + }, + }, + { + key: "getGroupedCharts", + value: function () { + var t = this; + return Apex._chartInstances + .filter(function (t) { + if (t.group) return !0; + }) + .map(function (e) { + return t.w.config.chart.group === e.group ? e.chart : t; + }); + }, + }, + { + key: "appendData", + value: function (t) { + var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = this; + (i.w.globals.dataChanged = !0), i.series.getPreviousPaths(); + for (var a = i.w.config.series.slice(), s = 0; s < a.length; s++) if (void 0 !== t[s]) for (var n = 0; n < t[s].data.length; n++) a[s].data.push(t[s].data[n]); + return (i.w.config.series = a), e && (i.w.globals.initialSeries = JSON.parse(JSON.stringify(i.w.config.series))), this.update(); + }, + }, + { + key: "update", + value: function (t) { + var e = this; + return new et(function (i, a) { + e.clear(); + var s = e.create(e.w.config.series, t); + if (!s) return i(e); + e.mount(s) + .then(function () { + "function" == typeof e.w.config.chart.events.updated && e.w.config.chart.events.updated(e, e.w), e.fireEvent("updated", [e, e.w]), (e.w.globals.isDirty = !0), i(e); + }) + .catch(function (t) { + a(t); + }); + }); + }, + }, + { + key: "forceXAxisUpdate", + value: function (t) { + var e = this.w; + void 0 !== t.xaxis.min && ((e.config.xaxis.min = t.xaxis.min), (e.globals.lastXAxis.min = t.xaxis.min)), + void 0 !== t.xaxis.max && ((e.config.xaxis.max = t.xaxis.max), (e.globals.lastXAxis.max = t.xaxis.max)); + }, + }, + { + key: "revertDefaultAxisMinMax", + value: function () { + var t = this.w; + (t.config.xaxis.min = t.globals.lastXAxis.min), + (t.config.xaxis.max = t.globals.lastXAxis.max), + t.config.yaxis.map(function (e, i) { + t.globals.zoomed && void 0 !== t.globals.lastYAxis[i] && ((e.min = t.globals.lastYAxis[i].min), (e.max = t.globals.lastYAxis[i].max)); + }); + }, + }, + { + key: "clear", + value: function () { + this.zoomPanSelection && this.zoomPanSelection.destroy(), + this.toolbar && this.toolbar.destroy(), + (this.animations = null), + (this.annotations = null), + (this.core = null), + (this.grid = null), + (this.series = null), + (this.responsive = null), + (this.theme = null), + (this.formatters = null), + (this.titleSubtitle = null), + (this.legend = null), + (this.dimensions = null), + (this.options = null), + (this.crosshairs = null), + (this.zoomPanSelection = null), + (this.toolbar = null), + (this.w.globals.tooltip = null), + this.clearDomElements(); + }, + }, + { + key: "killSVG", + value: function (t) { + return new et(function (e, i) { + t.each(function (t, e) { + this.removeClass("*"), this.off(), this.stop(); + }, !0), + t.ungroup(), + t.clear(), + e("done"); + }); + }, + }, + { + key: "clearDomElements", + value: function () { + var t = this; + this.eventList.forEach(function (e) { + document.removeEventListener(e, t.documentEvent); + }); + var e = this.w.globals.dom; + if (null !== this.el) for (; this.el.firstChild; ) this.el.removeChild(this.el.firstChild); + this.killSVG(e.Paper), + e.Paper.remove(), + (e.elWrap = null), + (e.elGraphical = null), + (e.elLegendWrap = null), + (e.baseEl = null), + (e.elGridRect = null), + (e.elGridRectMask = null), + (e.elGridRectMarkerMask = null), + (e.elDefs = null); + }, + }, + { + key: "destroy", + value: function () { + this.clear(); + var t = this.w.config.chart.id; + t && + Apex._chartInstances.forEach(function (e, i) { + e.id === t && Apex._chartInstances.splice(i, 1); + }), + window.removeEventListener("resize", this.windowResizeHandler), + window.removeResizeListener(this.el.parentNode, this.parentResizeCallback.bind(this)); + }, + }, + { + key: "toggleSeries", + value: function (t) { + var e = this.series.getSeriesByName(t), + i = parseInt(e.getAttribute("data:realIndex")), + a = e.classList.contains("apexcharts-series-collapsed"); + this.legend.toggleDataSeries(i, a); + }, + }, + { + key: "resetSeries", + value: function () { + var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0]; + this.series.resetSeries(t); + }, + }, + { + key: "setupEventHandlers", + value: function () { + var t = this, + e = this.w, + i = this, + a = e.globals.dom.baseEl.querySelector(e.globals.chartClass); + (this.eventListHandlers = []), + this.eventList.forEach(function (t) { + a.addEventListener( + t, + function (t) { + ("mousedown" === t.type && 1 === t.which) || + ((("mouseup" === t.type && 1 === t.which) || "touchend" === t.type) && + ("function" == typeof e.config.chart.events.click && e.config.chart.events.click(t, i, e), i.fireEvent("click", [t, i, e]))); + }, + { capture: !1, passive: !0 } + ); + }), + this.eventList.forEach(function (e) { + document.addEventListener(e, t.documentEvent); + }), + this.core.setupBrushHandler(); + }, + }, + { + key: "documentEvent", + value: function (t) { + var e = this.w; + (e.globals.clientX = "touchmove" === t.type ? t.touches[0].clientX : t.clientX), (e.globals.clientY = "touchmove" === t.type ? t.touches[0].clientY : t.clientY); + }, + }, + { + key: "addXaxisAnnotation", + value: function (t) { + var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0, + a = this; + i && (a = i), a.annotations.addXaxisAnnotationExternal(t, e, a); + }, + }, + { + key: "addYaxisAnnotation", + value: function (t) { + var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0, + a = this; + i && (a = i), a.annotations.addYaxisAnnotationExternal(t, e, a); + }, + }, + { + key: "addPointAnnotation", + value: function (t) { + var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0, + a = this; + i && (a = i), a.annotations.addPointAnnotationExternal(t, e, a); + }, + }, + { + key: "clearAnnotations", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : void 0, + e = this; + t && (e = t), e.annotations.clearAnnotations(e); + }, + }, + { + key: "addText", + value: function (t) { + var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0, + a = this; + i && (a = i), a.annotations.addText(t, e, a); + }, + }, + { + key: "getChartArea", + value: function () { + return this.w.globals.dom.baseEl.querySelector(".apexcharts-inner"); + }, + }, + { + key: "getSeriesTotalXRange", + value: function (t, e) { + return this.coreUtils.getSeriesTotalsXRange(t, e); + }, + }, + { + key: "getHighestValueInSeries", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0; + return new $(this.ctx).getMinYMaxY(t).highestY; + }, + }, + { + key: "getLowestValueInSeries", + value: function () { + var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0; + return new $(this.ctx).getMinYMaxY(t).lowestY; + }, + }, + { + key: "getSeriesTotal", + value: function () { + return this.w.globals.seriesTotals; + }, + }, + { + key: "setLocale", + value: function (t) { + this.setCurrentLocaleValues(t); + }, + }, + { + key: "toggleDataPointSelection", + value: function (t, e) { + var i = this.w, + a = null; + (a = i.globals.axisCharts + ? i.globals.dom.Paper.select( + ".apexcharts-series[data\\:realIndex='" + .concat(t, "'] path[j='") + .concat(e, "'], .apexcharts-series[data\\:realIndex='") + .concat(t, "'] circle[j='") + .concat(e, "'], .apexcharts-series[data\\:realIndex='") + .concat(t, "'] rect[j='") + .concat(e, "']") + ).members[0] + : i.globals.dom.Paper.select(".apexcharts-series[data\\:realIndex='".concat(t, "']")).members[0]) + ? new m(this.ctx).pathMouseDown(a, null) + : console.warn("toggleDataPointSelection: Element not found"); + return a.node ? a.node : null; + }, + }, + { + key: "setCurrentLocaleValues", + value: function (t) { + var e = this.w.config.chart.locales; + window.Apex.chart && window.Apex.chart.locales && window.Apex.chart.locales.length > 0 && (e = this.w.config.chart.locales.concat(window.Apex.chart.locales)); + var i = e.filter(function (e) { + return e.name === t; + })[0]; + if (!i) throw new Error("Wrong locale name provided. Please make sure you set the correct locale name in options"); + var a = p.extend(b, i); + this.w.globals.locale = a.options; + }, + }, + { + key: "dataURI", + value: function () { + return new ct(this.ctx).dataURI(); + }, + }, + { + key: "paper", + value: function () { + return this.w.globals.dom.Paper; + }, + }, + { + key: "parentResizeCallback", + value: function () { + this.w.globals.animationEnded && this.windowResize(); + }, + }, + { + key: "windowResize", + value: function () { + var t = this; + clearTimeout(this.w.globals.resizeTimer), + (this.w.globals.resizeTimer = window.setTimeout(function () { + (t.w.globals.resized = !0), (t.w.globals.dataChanged = !1), t.update(); + }, 150)); + }, + }, + ], + [ + { + key: "initOnLoad", + value: function () { + for (var e = document.querySelectorAll("[data-apexcharts]"), i = 0; i < e.length; i++) { + new t(e[i], JSON.parse(e[i].getAttribute("data-options"))).render(); + } + }, + }, + { + key: "exec", + value: function (t, e) { + var i = this.getChartByID(t); + if (i) { + i.w.globals.isExecCalled = !0; + for (var a = arguments.length, s = new Array(a > 2 ? a - 2 : 0), n = 2; n < a; n++) s[n - 2] = arguments[n]; + switch (e) { + case "updateOptions": + return i.updateOptions.apply(i, s); + case "updateSeries": + return i.updateSeries.apply(i, s); + case "appendData": + return i.appendData.apply(i, s); + case "appendSeries": + return i.appendSeries.apply(i, s); + case "toggleSeries": + return i.toggleSeries.apply(i, s); + case "dataURI": + return i.dataURI.apply(i, s); + case "addXaxisAnnotation": + return i.addXaxisAnnotation.apply(i, s); + case "addYaxisAnnotation": + return i.addYaxisAnnotation.apply(i, s); + case "addPointAnnotation": + return i.addPointAnnotation.apply(i, s); + case "addText": + return i.addText.apply(i, s); + case "clearAnnotations": + return i.clearAnnotations.apply(i, s); + case "paper": + return i.paper.apply(i, s); + case "destroy": + return i.destroy(); + } + } + }, + }, + { + key: "merge", + value: function (t, e) { + return p.extend(t, e); + }, + }, + { + key: "getChartByID", + value: function (t) { + return Apex._chartInstances.filter(function (e) { + return e.id === t; + })[0].chart; + }, + }, + ] + ), + t + ); + })(); + e.a = At; + }.call(this, i(101).setImmediate, i(104)(t))); + }, + function (t, e, i) { + var a = i(9), + s = i(11), + n = i(17); + t.exports = a + ? function (t, e, i) { + return s.f(t, e, n(1, i)); + } + : function (t, e, i) { + return (t[e] = i), t; + }; + }, + function (t, e, i) { + var a = i(7); + t.exports = function (t) { + if (!a(t)) throw TypeError(String(t) + " is not an object"); + return t; + }; + }, + function (t, e) { + var i = {}.hasOwnProperty; + t.exports = function (t, e) { + return i.call(t, e); + }; + }, + function (t, e) { + t.exports = function (t) { + try { + return !!t(); + } catch (t) { + return !0; + } + }; + }, + function (t, e) { + t.exports = function (t) { + return "object" == typeof t ? null !== t : "function" == typeof t; + }; + }, + function (t, e, i) { + var a = i(0), + s = i(30).f, + n = i(3), + r = i(15), + o = i(24), + l = i(64), + h = i(45); + t.exports = function (t, e) { + var i, + c, + d, + u, + f, + g = t.target, + p = t.global, + x = t.stat; + if ((i = p ? a : x ? a[g] || o(g, {}) : (a[g] || {}).prototype)) + for (c in e) { + if (((u = e[c]), (d = t.noTargetGet ? (f = s(i, c)) && f.value : i[c]), !h(p ? c : g + (x ? "." : "#") + c, t.forced) && void 0 !== d)) { + if (typeof u == typeof d) continue; + l(u, d); + } + (t.sham || (d && d.sham)) && n(u, "sham", !0), r(i, c, u, t); + } + }; + }, + function (t, e, i) { + var a = i(6); + t.exports = !a(function () { + return ( + 7 != + Object.defineProperty({}, "a", { + get: function () { + return 7; + }, + }).a + ); + }); + }, + function (t, e) { + t.exports = function (t) { + if ("function" != typeof t) throw TypeError(String(t) + " is not a function"); + return t; + }; + }, + function (t, e, i) { + var a = i(9), + s = i(37), + n = i(4), + r = i(38), + o = Object.defineProperty; + e.f = a + ? o + : function (t, e, i) { + if ((n(t), (e = r(e, !0)), n(i), s)) + try { + return o(t, e, i); + } catch (t) {} + if ("get" in i || "set" in i) throw TypeError("Accessors not supported"); + return "value" in i && (t[e] = i.value), t; + }; + }, + function (t, e) { + var i = {}.toString; + t.exports = function (t) { + return i.call(t).slice(8, -1); + }; + }, + function (t, e) { + t.exports = {}; + }, + function (t, e, i) { + "use strict"; + var a = i(10), + s = function (t) { + var e, i; + (this.promise = new t(function (t, a) { + if (void 0 !== e || void 0 !== i) throw TypeError("Bad Promise constructor"); + (e = t), (i = a); + })), + (this.resolve = a(e)), + (this.reject = a(i)); + }; + t.exports.f = function (t) { + return new s(t); + }; + }, + function (t, e, i) { + var a = i(0), + s = i(16), + n = i(3), + r = i(5), + o = i(24), + l = i(39), + h = i(19), + c = h.get, + d = h.enforce, + u = String(l).split("toString"); + s("inspectSource", function (t) { + return l.call(t); + }), + (t.exports = function (t, e, i, s) { + var l = !!s && !!s.unsafe, + h = !!s && !!s.enumerable, + c = !!s && !!s.noTargetGet; + "function" == typeof i && ("string" != typeof e || r(i, "name") || n(i, "name", e), (d(i).source = u.join("string" == typeof e ? e : ""))), + t !== a ? (l ? !c && t[e] && (h = !0) : delete t[e], h ? (t[e] = i) : n(t, e, i)) : h ? (t[e] = i) : o(e, i); + })(Function.prototype, "toString", function () { + return ("function" == typeof this && c(this).source) || l.call(this); + }); + }, + function (t, e, i) { + var a = i(0), + s = i(24), + n = i(18), + r = a["__core-js_shared__"] || s("__core-js_shared__", {}); + (t.exports = function (t, e) { + return r[t] || (r[t] = void 0 !== e ? e : {}); + })("versions", []).push({ version: "3.1.3", mode: n ? "pure" : "global", copyright: "© 2019 Denis Pushkarev (zloirock.ru)" }); + }, + function (t, e) { + t.exports = function (t, e) { + return { enumerable: !(1 & t), configurable: !(2 & t), writable: !(4 & t), value: e }; + }; + }, + function (t, e) { + t.exports = !1; + }, + function (t, e, i) { + var a, + s, + n, + r = i(57), + o = i(0), + l = i(7), + h = i(3), + c = i(5), + d = i(26), + u = i(27), + f = o.WeakMap; + if (r) { + var g = new f(), + p = g.get, + x = g.has, + v = g.set; + (a = function (t, e) { + return v.call(g, t, e), e; + }), + (s = function (t) { + return p.call(g, t) || {}; + }), + (n = function (t) { + return x.call(g, t); + }); + } else { + var m = d("state"); + (u[m] = !0), + (a = function (t, e) { + return h(t, m, e), e; + }), + (s = function (t) { + return c(t, m) ? t[m] : {}; + }), + (n = function (t) { + return c(t, m); + }); + } + t.exports = { + set: a, + get: s, + has: n, + enforce: function (t) { + return n(t) ? s(t) : a(t, {}); + }, + getterFor: function (t) { + return function (e) { + var i; + if (!l(e) || (i = s(e)).type !== t) throw TypeError("Incompatible receiver, " + t + " required"); + return i; + }; + }, + }; + }, + function (t, e, i) { + var a = i(63), + s = i(29); + t.exports = function (t) { + return a(s(t)); + }; + }, + function (t, e, i) { + var a = i(4), + s = i(84), + n = i(44), + r = i(49), + o = i(85), + l = i(86), + h = {}; + (t.exports = function (t, e, i, c, d) { + var u, + f, + g, + p, + x, + v = r(e, i, c ? 2 : 1); + if (d) u = t; + else { + if ("function" != typeof (f = o(t))) throw TypeError("Target is not iterable"); + if (s(f)) { + for (g = 0, p = n(t.length); p > g; g++) if ((c ? v(a((x = t[g]))[0], x[1]) : v(t[g])) === h) return h; + return; + } + u = f.call(t); + } + for (; !(x = u.next()).done; ) if (l(u, v, x.value, c) === h) return h; + }).BREAK = h; + }, + function (t, e) { + t.exports = function (t) { + try { + return { error: !1, value: t() }; + } catch (t) { + return { error: !0, value: t }; + } + }; + }, + function (t, e) { + var i; + i = (function () { + return this; + })(); + try { + i = i || new Function("return this")(); + } catch (t) { + "object" == typeof window && (i = window); + } + t.exports = i; + }, + function (t, e, i) { + var a = i(0), + s = i(3); + t.exports = function (t, e) { + try { + s(a, t, e); + } catch (i) { + a[t] = e; + } + return e; + }; + }, + function (t, e, i) { + var a = i(0), + s = i(7), + n = a.document, + r = s(n) && s(n.createElement); + t.exports = function (t) { + return r ? n.createElement(t) : {}; + }; + }, + function (t, e, i) { + var a = i(16), + s = i(40), + n = a("keys"); + t.exports = function (t) { + return n[t] || (n[t] = s(t)); + }; + }, + function (t, e) { + t.exports = {}; + }, + function (t, e) { + var i = Math.ceil, + a = Math.floor; + t.exports = function (t) { + return isNaN((t = +t)) ? 0 : (t > 0 ? a : i)(t); + }; + }, + function (t, e) { + t.exports = function (t) { + if (null == t) throw TypeError("Can't call method on " + t); + return t; + }; + }, + function (t, e, i) { + var a = i(9), + s = i(62), + n = i(17), + r = i(20), + o = i(38), + l = i(5), + h = i(37), + c = Object.getOwnPropertyDescriptor; + e.f = a + ? c + : function (t, e) { + if (((t = r(t)), (e = o(e, !0)), h)) + try { + return c(t, e); + } catch (t) {} + if (l(t, e)) return n(!s.f.call(t, e), t[e]); + }; + }, + function (t, e) { + t.exports = ["constructor", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "toLocaleString", "toString", "valueOf"]; + }, + function (t, e, i) { + var a = i(5), + s = i(71), + n = i(26), + r = i(72), + o = n("IE_PROTO"), + l = Object.prototype; + t.exports = r + ? Object.getPrototypeOf + : function (t) { + return (t = s(t)), a(t, o) ? t[o] : "function" == typeof t.constructor && t instanceof t.constructor ? t.constructor.prototype : t instanceof Object ? l : null; + }; + }, + function (t, e, i) { + var a = i(4), + s = i(73), + n = i(31), + r = i(27), + o = i(47), + l = i(25), + h = i(26)("IE_PROTO"), + c = function () {}, + d = function () { + var t, + e = l("iframe"), + i = n.length; + for (e.style.display = "none", o.appendChild(e), e.src = String("javascript:"), (t = e.contentWindow.document).open(), t.write("<script>document.F=Object</script>"), t.close(), d = t.F; i--; ) delete d.prototype[n[i]]; + return d(); + }; + (t.exports = + Object.create || + function (t, e) { + var i; + return null !== t ? ((c.prototype = a(t)), (i = new c()), (c.prototype = null), (i[h] = t)) : (i = d()), void 0 === e ? i : s(i, e); + }), + (r[h] = !0); + }, + function (t, e, i) { + var a = i(11).f, + s = i(5), + n = i(1)("toStringTag"); + t.exports = function (t, e, i) { + t && !s((t = i ? t : t.prototype), n) && a(t, n, { configurable: !0, value: e }); + }; + }, + function (t, e, i) { + t.exports = i(0); + }, + function (t, e, i) { + var a = i(35), + s = i(0), + n = function (t) { + return "function" == typeof t ? t : void 0; + }; + t.exports = function (t, e) { + return arguments.length < 2 ? n(a[t]) || n(s[t]) : (a[t] && a[t][e]) || (s[t] && s[t][e]); + }; + }, + function (t, e, i) { + var a = i(9), + s = i(6), + n = i(25); + t.exports = + !a && + !s(function () { + return ( + 7 != + Object.defineProperty(n("div"), "a", { + get: function () { + return 7; + }, + }).a + ); + }); + }, + function (t, e, i) { + var a = i(7); + t.exports = function (t, e) { + if (!a(t)) return t; + var i, s; + if (e && "function" == typeof (i = t.toString) && !a((s = i.call(t)))) return s; + if ("function" == typeof (i = t.valueOf) && !a((s = i.call(t)))) return s; + if (!e && "function" == typeof (i = t.toString) && !a((s = i.call(t)))) return s; + throw TypeError("Can't convert object to primitive value"); + }; + }, + function (t, e, i) { + var a = i(16); + t.exports = a("native-function-to-string", Function.toString); + }, + function (t, e) { + var i = 0, + a = Math.random(); + t.exports = function (t) { + return "Symbol(".concat(void 0 === t ? "" : t, ")_", (++i + a).toString(36)); + }; + }, + function (t, e, i) { + var a = i(12), + s = i(1)("toStringTag"), + n = + "Arguments" == + a( + (function () { + return arguments; + })() + ); + t.exports = function (t) { + var e, i, r; + return void 0 === t + ? "Undefined" + : null === t + ? "Null" + : "string" == + typeof (i = (function (t, e) { + try { + return t[e]; + } catch (t) {} + })((e = Object(t)), s)) + ? i + : n + ? a(e) + : "Object" == (r = a(e)) && "function" == typeof e.callee + ? "Arguments" + : r; + }; + }, + function (t, e, i) { + "use strict"; + var a = i(8), + s = i(70), + n = i(32), + r = i(48), + o = i(34), + l = i(3), + h = i(15), + c = i(1), + d = i(18), + u = i(13), + f = i(46), + g = f.IteratorPrototype, + p = f.BUGGY_SAFARI_ITERATORS, + x = c("iterator"), + v = function () { + return this; + }; + t.exports = function (t, e, i, c, f, m, b) { + s(i, e, c); + var y, + w, + k, + S = function (t) { + if (t === f && P) return P; + if (!p && t in L) return L[t]; + switch (t) { + case "keys": + case "values": + case "entries": + return function () { + return new i(this, t); + }; + } + return function () { + return new i(this); + }; + }, + A = e + " Iterator", + C = !1, + L = t.prototype, + E = L[x] || L["@@iterator"] || (f && L[f]), + P = (!p && E) || S(f), + T = ("Array" == e && L.entries) || E; + if ( + (T && ((y = n(T.call(new t()))), g !== Object.prototype && y.next && (d || n(y) === g || (r ? r(y, g) : "function" != typeof y[x] && l(y, x, v)), o(y, A, !0, !0), d && (u[A] = v))), + "values" == f && + E && + "values" !== E.name && + ((C = !0), + (P = function () { + return E.call(this); + })), + (d && !b) || L[x] === P || l(L, x, P), + (u[e] = P), + f) + ) + if (((w = { values: S("values"), keys: m ? P : S("keys"), entries: S("entries") }), b)) for (k in w) (!p && !C && k in L) || h(L, k, w[k]); + else a({ target: e, proto: !0, forced: p || C }, w); + return w; + }; + }, + function (t, e, i) { + var a = i(5), + s = i(20), + n = i(67), + r = i(27), + o = n(!1); + t.exports = function (t, e) { + var i, + n = s(t), + l = 0, + h = []; + for (i in n) !a(r, i) && a(n, i) && h.push(i); + for (; e.length > l; ) a(n, (i = e[l++])) && (~o(h, i) || h.push(i)); + return h; + }; + }, + function (t, e, i) { + var a = i(28), + s = Math.min; + t.exports = function (t) { + return t > 0 ? s(a(t), 9007199254740991) : 0; + }; + }, + function (t, e, i) { + var a = i(6), + s = /#|\.prototype\./, + n = function (t, e) { + var i = o[r(t)]; + return i == h || (i != l && ("function" == typeof e ? a(e) : !!e)); + }, + r = (n.normalize = function (t) { + return String(t).replace(s, ".").toLowerCase(); + }), + o = (n.data = {}), + l = (n.NATIVE = "N"), + h = (n.POLYFILL = "P"); + t.exports = n; + }, + function (t, e, i) { + "use strict"; + var a, + s, + n, + r = i(32), + o = i(3), + l = i(5), + h = i(1), + c = i(18), + d = h("iterator"), + u = !1; + [].keys && ("next" in (n = [].keys()) ? (s = r(r(n))) !== Object.prototype && (a = s) : (u = !0)), + null == a && (a = {}), + c || + l(a, d) || + o(a, d, function () { + return this; + }), + (t.exports = { IteratorPrototype: a, BUGGY_SAFARI_ITERATORS: u }); + }, + function (t, e, i) { + var a = i(0).document; + t.exports = a && a.documentElement; + }, + function (t, e, i) { + var a = i(75); + t.exports = + Object.setPrototypeOf || + ("__proto__" in {} + ? (function () { + var t, + e = !1, + i = {}; + try { + (t = Object.getOwnPropertyDescriptor(Object.prototype, "__proto__").set).call(i, []), (e = i instanceof Array); + } catch (t) {} + return function (i, s) { + return a(i, s), e ? t.call(i, s) : (i.__proto__ = s), i; + }; + })() + : void 0); + }, + function (t, e, i) { + var a = i(10); + t.exports = function (t, e, i) { + if ((a(t), void 0 === e)) return t; + switch (i) { + case 0: + return function () { + return t.call(e); + }; + case 1: + return function (i) { + return t.call(e, i); + }; + case 2: + return function (i, a) { + return t.call(e, i, a); + }; + case 3: + return function (i, a, s) { + return t.call(e, i, a, s); + }; + } + return function () { + return t.apply(e, arguments); + }; + }; + }, + function (t, e, i) { + var a = i(4), + s = i(10), + n = i(1)("species"); + t.exports = function (t, e) { + var i, + r = a(t).constructor; + return void 0 === r || null == (i = a(r)[n]) ? e : s(i); + }; + }, + function (t, e, i) { + var a, + s, + n, + r = i(0), + o = i(6), + l = i(12), + h = i(49), + c = i(47), + d = i(25), + u = r.location, + f = r.setImmediate, + g = r.clearImmediate, + p = r.process, + x = r.MessageChannel, + v = r.Dispatch, + m = 0, + b = {}, + y = function (t) { + if (b.hasOwnProperty(t)) { + var e = b[t]; + delete b[t], e(); + } + }, + w = function (t) { + return function () { + y(t); + }; + }, + k = function (t) { + y(t.data); + }, + S = function (t) { + r.postMessage(t + "", u.protocol + "//" + u.host); + }; + (f && g) || + ((f = function (t) { + for (var e = [], i = 1; arguments.length > i; ) e.push(arguments[i++]); + return ( + (b[++m] = function () { + ("function" == typeof t ? t : Function(t)).apply(void 0, e); + }), + a(m), + m + ); + }), + (g = function (t) { + delete b[t]; + }), + "process" == l(p) + ? (a = function (t) { + p.nextTick(w(t)); + }) + : v && v.now + ? (a = function (t) { + v.now(w(t)); + }) + : x + ? ((n = (s = new x()).port2), (s.port1.onmessage = k), (a = h(n.postMessage, n, 1))) + : !r.addEventListener || "function" != typeof postMessage || r.importScripts || o(S) + ? (a = + "onreadystatechange" in d("script") + ? function (t) { + c.appendChild(d("script")).onreadystatechange = function () { + c.removeChild(this), y(t); + }; + } + : function (t) { + setTimeout(w(t), 0); + }) + : ((a = S), r.addEventListener("message", k, !1))), + (t.exports = { set: f, clear: g }); + }, + function (t, e, i) { + var a = i(0).navigator; + t.exports = (a && a.userAgent) || ""; + }, + function (t, e, i) { + var a = i(4), + s = i(7), + n = i(14); + t.exports = function (t, e) { + if ((a(t), s(e) && e.constructor === t)) return e; + var i = n.f(t); + return (0, i.resolve)(e), i.promise; + }; + }, + function (t, e, i) { + (t.exports = i(55)), i(91), i(92), i(93), i(94); + }, + function (t, e, i) { + i(56), i(60), i(76), i(80), i(90); + var a = i(35); + t.exports = a.Promise; + }, + function (t, e, i) { + var a = i(15), + s = i(58), + n = Object.prototype; + s !== n.toString && a(n, "toString", s, { unsafe: !0 }); + }, + function (t, e, i) { + var a = i(0), + s = i(39), + n = a.WeakMap; + t.exports = "function" == typeof n && /native code/.test(s.call(n)); + }, + function (t, e, i) { + "use strict"; + var a = i(41), + s = {}; + (s[i(1)("toStringTag")] = "z"), + (t.exports = + "[object z]" !== String(s) + ? function () { + return "[object " + a(this) + "]"; + } + : s.toString); + }, + function (t, e, i) { + var a = i(6); + t.exports = + !!Object.getOwnPropertySymbols && + !a(function () { + return !String(Symbol()); + }); + }, + function (t, e, i) { + "use strict"; + var a = i(61), + s = i(19), + n = i(42), + r = s.set, + o = s.getterFor("String Iterator"); + n( + String, + "String", + function (t) { + r(this, { type: "String Iterator", string: String(t), index: 0 }); + }, + function () { + var t, + e = o(this), + i = e.string, + s = e.index; + return s >= i.length ? { value: void 0, done: !0 } : ((t = a(i, s, !0)), (e.index += t.length), { value: t, done: !1 }); + } + ); + }, + function (t, e, i) { + var a = i(28), + s = i(29); + t.exports = function (t, e, i) { + var n, + r, + o = String(s(t)), + l = a(e), + h = o.length; + return l < 0 || l >= h + ? i + ? "" + : void 0 + : (n = o.charCodeAt(l)) < 55296 || n > 56319 || l + 1 === h || (r = o.charCodeAt(l + 1)) < 56320 || r > 57343 + ? i + ? o.charAt(l) + : n + : i + ? o.slice(l, l + 2) + : r - 56320 + ((n - 55296) << 10) + 65536; + }; + }, + function (t, e, i) { + "use strict"; + var a = {}.propertyIsEnumerable, + s = Object.getOwnPropertyDescriptor, + n = s && !a.call({ 1: 2 }, 1); + e.f = n + ? function (t) { + var e = s(this, t); + return !!e && e.enumerable; + } + : a; + }, + function (t, e, i) { + var a = i(6), + s = i(12), + n = "".split; + t.exports = a(function () { + return !Object("z").propertyIsEnumerable(0); + }) + ? function (t) { + return "String" == s(t) ? n.call(t, "") : Object(t); + } + : Object; + }, + function (t, e, i) { + var a = i(5), + s = i(65), + n = i(30), + r = i(11); + t.exports = function (t, e) { + for (var i = s(e), o = r.f, l = n.f, h = 0; h < i.length; h++) { + var c = i[h]; + a(t, c) || o(t, c, l(e, c)); + } + }; + }, + function (t, e, i) { + var a = i(0), + s = i(66), + n = i(69), + r = i(4), + o = a.Reflect; + t.exports = + (o && o.ownKeys) || + function (t) { + var e = s.f(r(t)), + i = n.f; + return i ? e.concat(i(t)) : e; + }; + }, + function (t, e, i) { + var a = i(43), + s = i(31).concat("length", "prototype"); + e.f = + Object.getOwnPropertyNames || + function (t) { + return a(t, s); + }; + }, + function (t, e, i) { + var a = i(20), + s = i(44), + n = i(68); + t.exports = function (t) { + return function (e, i, r) { + var o, + l = a(e), + h = s(l.length), + c = n(r, h); + if (t && i != i) { + for (; h > c; ) if ((o = l[c++]) != o) return !0; + } else for (; h > c; c++) if ((t || c in l) && l[c] === i) return t || c || 0; + return !t && -1; + }; + }; + }, + function (t, e, i) { + var a = i(28), + s = Math.max, + n = Math.min; + t.exports = function (t, e) { + var i = a(t); + return i < 0 ? s(i + e, 0) : n(i, e); + }; + }, + function (t, e) { + e.f = Object.getOwnPropertySymbols; + }, + function (t, e, i) { + "use strict"; + var a = i(46).IteratorPrototype, + s = i(33), + n = i(17), + r = i(34), + o = i(13), + l = function () { + return this; + }; + t.exports = function (t, e, i) { + var h = e + " Iterator"; + return (t.prototype = s(a, { next: n(1, i) })), r(t, h, !1, !0), (o[h] = l), t; + }; + }, + function (t, e, i) { + var a = i(29); + t.exports = function (t) { + return Object(a(t)); + }; + }, + function (t, e, i) { + var a = i(6); + t.exports = !a(function () { + function t() {} + return (t.prototype.constructor = null), Object.getPrototypeOf(new t()) !== t.prototype; + }); + }, + function (t, e, i) { + var a = i(9), + s = i(11), + n = i(4), + r = i(74); + t.exports = a + ? Object.defineProperties + : function (t, e) { + n(t); + for (var i, a = r(e), o = a.length, l = 0; o > l; ) s.f(t, (i = a[l++]), e[i]); + return t; + }; + }, + function (t, e, i) { + var a = i(43), + s = i(31); + t.exports = + Object.keys || + function (t) { + return a(t, s); + }; + }, + function (t, e, i) { + var a = i(7), + s = i(4); + t.exports = function (t, e) { + if ((s(t), !a(e) && null !== e)) throw TypeError("Can't set " + String(e) + " as a prototype"); + }; + }, + function (t, e, i) { + var a = i(0), + s = i(77), + n = i(78), + r = i(3), + o = i(1), + l = o("iterator"), + h = o("toStringTag"), + c = n.values; + for (var d in s) { + var u = a[d], + f = u && u.prototype; + if (f) { + if (f[l] !== c) + try { + r(f, l, c); + } catch (t) { + f[l] = c; + } + if ((f[h] || r(f, h, d), s[d])) + for (var g in n) + if (f[g] !== n[g]) + try { + r(f, g, n[g]); + } catch (t) { + f[g] = n[g]; + } + } + } + }, + function (t, e) { + t.exports = { + CSSRuleList: 0, + CSSStyleDeclaration: 0, + CSSValueList: 0, + ClientRectList: 0, + DOMRectList: 0, + DOMStringList: 0, + DOMTokenList: 1, + DataTransferItemList: 0, + FileList: 0, + HTMLAllCollection: 0, + HTMLCollection: 0, + HTMLFormElement: 0, + HTMLSelectElement: 0, + MediaList: 0, + MimeTypeArray: 0, + NamedNodeMap: 0, + NodeList: 1, + PaintRequestList: 0, + Plugin: 0, + PluginArray: 0, + SVGLengthList: 0, + SVGNumberList: 0, + SVGPathSegList: 0, + SVGPointList: 0, + SVGStringList: 0, + SVGTransformList: 0, + SourceBufferList: 0, + StyleSheetList: 0, + TextTrackCueList: 0, + TextTrackList: 0, + TouchList: 0, + }; + }, + function (t, e, i) { + "use strict"; + var a = i(20), + s = i(79), + n = i(13), + r = i(19), + o = i(42), + l = r.set, + h = r.getterFor("Array Iterator"); + (t.exports = o( + Array, + "Array", + function (t, e) { + l(this, { type: "Array Iterator", target: a(t), index: 0, kind: e }); + }, + function () { + var t = h(this), + e = t.target, + i = t.kind, + a = t.index++; + return !e || a >= e.length ? ((t.target = void 0), { value: void 0, done: !0 }) : "keys" == i ? { value: a, done: !1 } : "values" == i ? { value: e[a], done: !1 } : { value: [a, e[a]], done: !1 }; + }, + "values" + )), + (n.Arguments = n.Array), + s("keys"), + s("values"), + s("entries"); + }, + function (t, e, i) { + var a = i(1), + s = i(33), + n = i(3), + r = a("unscopables"), + o = Array.prototype; + null == o[r] && n(o, r, s(null)), + (t.exports = function (t) { + o[r][t] = !0; + }); + }, + function (t, e, i) { + "use strict"; + var a, + s, + n, + r = i(8), + o = i(18), + l = i(0), + h = i(35), + c = i(81), + d = i(34), + u = i(82), + f = i(7), + g = i(10), + p = i(83), + x = i(12), + v = i(21), + m = i(87), + b = i(50), + y = i(51).set, + w = i(88), + k = i(53), + S = i(89), + A = i(14), + C = i(22), + L = i(52), + E = i(19), + P = i(45), + T = i(1)("species"), + M = "Promise", + z = E.get, + I = E.set, + X = E.getterFor(M), + F = l.Promise, + Y = l.TypeError, + O = l.document, + R = l.process, + D = l.fetch, + N = R && R.versions, + H = (N && N.v8) || "", + _ = A.f, + W = _, + B = "process" == x(R), + V = !!(O && O.createEvent && l.dispatchEvent), + G = P(M, function () { + var t = F.resolve(1), + e = function () {}, + i = ((t.constructor = {})[T] = function (t) { + t(e, e); + }); + return !((B || "function" == typeof PromiseRejectionEvent) && (!o || t.finally) && t.then(e) instanceof i && 0 !== H.indexOf("6.6") && -1 === L.indexOf("Chrome/66")); + }), + j = + G || + !m(function (t) { + F.all(t).catch(function () {}); + }), + U = function (t) { + var e; + return !(!f(t) || "function" != typeof (e = t.then)) && e; + }, + q = function (t, e, i) { + if (!e.notified) { + e.notified = !0; + var a = e.reactions; + w(function () { + for ( + var s = e.value, + n = 1 == e.state, + r = 0, + o = function (i) { + var a, + r, + o, + l = n ? i.ok : i.fail, + h = i.resolve, + c = i.reject, + d = i.domain; + try { + l + ? (n || (2 === e.rejection && Q(t, e), (e.rejection = 1)), + !0 === l ? (a = s) : (d && d.enter(), (a = l(s)), d && (d.exit(), (o = !0))), + a === i.promise ? c(Y("Promise-chain cycle")) : (r = U(a)) ? r.call(a, h, c) : h(a)) + : c(s); + } catch (t) { + d && !o && d.exit(), c(t); + } + }; + a.length > r; + + ) + o(a[r++]); + (e.reactions = []), (e.notified = !1), i && !e.rejection && $(t, e); + }); + } + }, + Z = function (t, e, i) { + var a, s; + V ? (((a = O.createEvent("Event")).promise = e), (a.reason = i), a.initEvent(t, !1, !0), l.dispatchEvent(a)) : (a = { promise: e, reason: i }), + (s = l["on" + t]) ? s(a) : "unhandledrejection" === t && S("Unhandled promise rejection", i); + }, + $ = function (t, e) { + y.call(l, function () { + var i, + a = e.value; + if ( + J(e) && + ((i = C(function () { + B ? R.emit("unhandledRejection", a, t) : Z("unhandledrejection", t, a); + })), + (e.rejection = B || J(e) ? 2 : 1), + i.error) + ) + throw i.value; + }); + }, + J = function (t) { + return 1 !== t.rejection && !t.parent; + }, + Q = function (t, e) { + y.call(l, function () { + B ? R.emit("rejectionHandled", t) : Z("rejectionhandled", t, e.value); + }); + }, + K = function (t, e, i, a) { + return function (s) { + t(e, i, s, a); + }; + }, + tt = function (t, e, i, a) { + e.done || ((e.done = !0), a && (e = a), (e.value = i), (e.state = 2), q(t, e, !0)); + }, + et = function (t, e, i, a) { + if (!e.done) { + (e.done = !0), a && (e = a); + try { + if (t === i) throw Y("Promise can't be resolved itself"); + var s = U(i); + s + ? w(function () { + var a = { done: !1 }; + try { + s.call(i, K(et, t, a, e), K(tt, t, a, e)); + } catch (i) { + tt(t, a, i, e); + } + }) + : ((e.value = i), (e.state = 1), q(t, e, !1)); + } catch (i) { + tt(t, { done: !1 }, i, e); + } + } + }; + G && + ((F = function (t) { + p(this, F, M), g(t), a.call(this); + var e = z(this); + try { + t(K(et, this, e), K(tt, this, e)); + } catch (t) { + tt(this, e, t); + } + }), + ((a = function (t) { + I(this, { type: M, done: !1, notified: !1, parent: !1, reactions: [], rejection: !1, state: 0, value: void 0 }); + }).prototype = c(F.prototype, { + then: function (t, e) { + var i = X(this), + a = _(b(this, F)); + return (a.ok = "function" != typeof t || t), (a.fail = "function" == typeof e && e), (a.domain = B ? R.domain : void 0), (i.parent = !0), i.reactions.push(a), 0 != i.state && q(this, i, !1), a.promise; + }, + catch: function (t) { + return this.then(void 0, t); + }, + })), + (s = function () { + var t = new a(), + e = z(t); + (this.promise = t), (this.resolve = K(et, t, e)), (this.reject = K(tt, t, e)); + }), + (A.f = _ = function (t) { + return t === F || t === n ? new s(t) : W(t); + }), + o || + "function" != typeof D || + r( + { global: !0, enumerable: !0, forced: !0 }, + { + fetch: function (t) { + return k(F, D.apply(l, arguments)); + }, + } + )), + r({ global: !0, wrap: !0, forced: G }, { Promise: F }), + d(F, M, !1, !0), + u(M), + (n = h.Promise), + r( + { target: M, stat: !0, forced: G }, + { + reject: function (t) { + var e = _(this); + return e.reject.call(void 0, t), e.promise; + }, + } + ), + r( + { target: M, stat: !0, forced: o || G }, + { + resolve: function (t) { + return k(o && this === n ? F : this, t); + }, + } + ), + r( + { target: M, stat: !0, forced: j }, + { + all: function (t) { + var e = this, + i = _(e), + a = i.resolve, + s = i.reject, + n = C(function () { + var i = g(e.resolve), + n = [], + r = 0, + o = 1; + v(t, function (t) { + var l = r++, + h = !1; + n.push(void 0), + o++, + i.call(e, t).then(function (t) { + h || ((h = !0), (n[l] = t), --o || a(n)); + }, s); + }), + --o || a(n); + }); + return n.error && s(n.value), i.promise; + }, + race: function (t) { + var e = this, + i = _(e), + a = i.reject, + s = C(function () { + var s = g(e.resolve); + v(t, function (t) { + s.call(e, t).then(i.resolve, a); + }); + }); + return s.error && a(s.value), i.promise; + }, + } + ); + }, + function (t, e, i) { + var a = i(15); + t.exports = function (t, e, i) { + for (var s in e) a(t, s, e[s], i); + return t; + }; + }, + function (t, e, i) { + "use strict"; + var a = i(36), + s = i(11), + n = i(1), + r = i(9), + o = n("species"); + t.exports = function (t) { + var e = a(t), + i = s.f; + r && + e && + !e[o] && + i(e, o, { + configurable: !0, + get: function () { + return this; + }, + }); + }; + }, + function (t, e) { + t.exports = function (t, e, i) { + if (!(t instanceof e)) throw TypeError("Incorrect " + (i ? i + " " : "") + "invocation"); + return t; + }; + }, + function (t, e, i) { + var a = i(1), + s = i(13), + n = a("iterator"), + r = Array.prototype; + t.exports = function (t) { + return void 0 !== t && (s.Array === t || r[n] === t); + }; + }, + function (t, e, i) { + var a = i(41), + s = i(13), + n = i(1)("iterator"); + t.exports = function (t) { + if (null != t) return t[n] || t["@@iterator"] || s[a(t)]; + }; + }, + function (t, e, i) { + var a = i(4); + t.exports = function (t, e, i, s) { + try { + return s ? e(a(i)[0], i[1]) : e(i); + } catch (e) { + var n = t.return; + throw (void 0 !== n && a(n.call(t)), e); + } + }; + }, + function (t, e, i) { + var a = i(1)("iterator"), + s = !1; + try { + var n = 0, + r = { + next: function () { + return { done: !!n++ }; + }, + return: function () { + s = !0; + }, + }; + (r[a] = function () { + return this; + }), + Array.from(r, function () { + throw 2; + }); + } catch (t) {} + t.exports = function (t, e) { + if (!e && !s) return !1; + var i = !1; + try { + var n = {}; + (n[a] = function () { + return { + next: function () { + return { done: (i = !0) }; + }, + }; + }), + t(n); + } catch (t) {} + return i; + }; + }, + function (t, e, i) { + var a, + s, + n, + r, + o, + l, + h, + c = i(0), + d = i(30).f, + u = i(12), + f = i(51).set, + g = i(52), + p = c.MutationObserver || c.WebKitMutationObserver, + x = c.process, + v = c.Promise, + m = "process" == u(x), + b = d(c, "queueMicrotask"), + y = b && b.value; + y || + ((a = function () { + var t, e; + for (m && (t = x.domain) && t.exit(); s; ) { + (e = s.fn), (s = s.next); + try { + e(); + } catch (t) { + throw (s ? r() : (n = void 0), t); + } + } + (n = void 0), t && t.enter(); + }), + m + ? (r = function () { + x.nextTick(a); + }) + : p && !/(iphone|ipod|ipad).*applewebkit/i.test(g) + ? ((o = !0), + (l = document.createTextNode("")), + new p(a).observe(l, { characterData: !0 }), + (r = function () { + l.data = o = !o; + })) + : v && v.resolve + ? ((h = v.resolve(void 0)), + (r = function () { + h.then(a); + })) + : (r = function () { + f.call(c, a); + })), + (t.exports = + y || + function (t) { + var e = { fn: t, next: void 0 }; + n && (n.next = e), s || ((s = e), r()), (n = e); + }); + }, + function (t, e, i) { + var a = i(0); + t.exports = function (t, e) { + var i = a.console; + i && i.error && (1 === arguments.length ? i.error(t) : i.error(t, e)); + }; + }, + function (t, e, i) { + "use strict"; + var a = i(8), + s = i(36), + n = i(50), + r = i(53); + a( + { target: "Promise", proto: !0, real: !0 }, + { + finally: function (t) { + var e = n(this, s("Promise")), + i = "function" == typeof t; + return this.then( + i + ? function (i) { + return r(e, t()).then(function () { + return i; + }); + } + : t, + i + ? function (i) { + return r(e, t()).then(function () { + throw i; + }); + } + : t + ); + }, + } + ); + }, + function (t, e, i) { + var a = i(8), + s = i(32), + n = i(48), + r = i(33), + o = i(17), + l = i(21), + h = i(3), + c = function (t, e) { + var i = this; + if (!(i instanceof c)) return new c(t, e); + n && (i = n(new Error(e), s(i))); + var a = []; + return l(t, a.push, a), (i.errors = a), void 0 !== e && h(i, "message", String(e)), i; + }; + (c.prototype = r(Error.prototype, { constructor: o(5, c), name: o(5, "AggregateError") })), a({ global: !0 }, { AggregateError: c }); + }, + function (t, e, i) { + "use strict"; + var a = i(8), + s = i(10), + n = i(14), + r = i(22), + o = i(21); + a( + { target: "Promise", stat: !0 }, + { + allSettled: function (t) { + var e = this, + i = n.f(e), + a = i.resolve, + l = i.reject, + h = r(function () { + var i = s(e.resolve), + n = [], + r = 0, + l = 1; + o(t, function (t) { + var s = r++, + o = !1; + n.push(void 0), + l++, + i.call(e, t).then( + function (t) { + o || ((o = !0), (n[s] = { status: "fulfilled", value: t }), --l || a(n)); + }, + function (t) { + o || ((o = !0), (n[s] = { status: "rejected", reason: t }), --l || a(n)); + } + ); + }), + --l || a(n); + }); + return h.error && l(h.value), i.promise; + }, + } + ); + }, + function (t, e, i) { + "use strict"; + var a = i(8), + s = i(14), + n = i(22); + a( + { target: "Promise", stat: !0 }, + { + try: function (t) { + var e = s.f(this), + i = n(t); + return (i.error ? e.reject : e.resolve)(i.value), e.promise; + }, + } + ); + }, + function (t, e, i) { + "use strict"; + var a = i(8), + s = i(10), + n = i(36), + r = i(14), + o = i(22), + l = i(21); + a( + { target: "Promise", stat: !0 }, + { + any: function (t) { + var e = this, + i = r.f(e), + a = i.resolve, + h = i.reject, + c = o(function () { + var i = s(e.resolve), + r = [], + o = 0, + c = 1, + d = !1; + l(t, function (t) { + var s = o++, + l = !1; + r.push(void 0), + c++, + i.call(e, t).then( + function (t) { + l || d || ((d = !0), a(t)); + }, + function (t) { + l || d || ((l = !0), (r[s] = t), --c || h(new (n("AggregateError"))(r, "No one promise resolved"))); + } + ); + }), + --c || h(new (n("AggregateError"))(r, "No one promise resolved")); + }); + return c.error && h(c.value), i.promise; + }, + } + ); + }, + function (t, e, i) { + var a = (function (t) { + "use strict"; + var e, + i = Object.prototype, + a = i.hasOwnProperty, + s = "function" == typeof Symbol ? Symbol : {}, + n = s.iterator || "@@iterator", + r = s.asyncIterator || "@@asyncIterator", + o = s.toStringTag || "@@toStringTag"; + function l(t, e, i, a) { + var s = e && e.prototype instanceof p ? e : p, + n = Object.create(s.prototype), + r = new E(a || []); + return ( + (n._invoke = (function (t, e, i) { + var a = c; + return function (s, n) { + if (a === u) throw new Error("Generator is already running"); + if (a === f) { + if ("throw" === s) throw n; + return T(); + } + for (i.method = s, i.arg = n; ; ) { + var r = i.delegate; + if (r) { + var o = A(r, i); + if (o) { + if (o === g) continue; + return o; + } + } + if ("next" === i.method) i.sent = i._sent = i.arg; + else if ("throw" === i.method) { + if (a === c) throw ((a = f), i.arg); + i.dispatchException(i.arg); + } else "return" === i.method && i.abrupt("return", i.arg); + a = u; + var l = h(t, e, i); + if ("normal" === l.type) { + if (((a = i.done ? f : d), l.arg === g)) continue; + return { value: l.arg, done: i.done }; + } + "throw" === l.type && ((a = f), (i.method = "throw"), (i.arg = l.arg)); + } + }; + })(t, i, r)), + n + ); + } + function h(t, e, i) { + try { + return { type: "normal", arg: t.call(e, i) }; + } catch (t) { + return { type: "throw", arg: t }; + } + } + t.wrap = l; + var c = "suspendedStart", + d = "suspendedYield", + u = "executing", + f = "completed", + g = {}; + function p() {} + function x() {} + function v() {} + var m = {}; + m[n] = function () { + return this; + }; + var b = Object.getPrototypeOf, + y = b && b(b(P([]))); + y && y !== i && a.call(y, n) && (m = y); + var w = (v.prototype = p.prototype = Object.create(m)); + function k(t) { + ["next", "throw", "return"].forEach(function (e) { + t[e] = function (t) { + return this._invoke(e, t); + }; + }); + } + function S(t) { + var e; + this._invoke = function (i, s) { + function n() { + return new Promise(function (e, n) { + !(function e(i, s, n, r) { + var o = h(t[i], t, s); + if ("throw" !== o.type) { + var l = o.arg, + c = l.value; + return c && "object" == typeof c && a.call(c, "__await") + ? Promise.resolve(c.__await).then( + function (t) { + e("next", t, n, r); + }, + function (t) { + e("throw", t, n, r); + } + ) + : Promise.resolve(c).then( + function (t) { + (l.value = t), n(l); + }, + function (t) { + return e("throw", t, n, r); + } + ); + } + r(o.arg); + })(i, s, e, n); + }); + } + return (e = e ? e.then(n, n) : n()); + }; + } + function A(t, i) { + var a = t.iterator[i.method]; + if (a === e) { + if (((i.delegate = null), "throw" === i.method)) { + if (t.iterator.return && ((i.method = "return"), (i.arg = e), A(t, i), "throw" === i.method)) return g; + (i.method = "throw"), (i.arg = new TypeError("The iterator does not provide a 'throw' method")); + } + return g; + } + var s = h(a, t.iterator, i.arg); + if ("throw" === s.type) return (i.method = "throw"), (i.arg = s.arg), (i.delegate = null), g; + var n = s.arg; + return n + ? n.done + ? ((i[t.resultName] = n.value), (i.next = t.nextLoc), "return" !== i.method && ((i.method = "next"), (i.arg = e)), (i.delegate = null), g) + : n + : ((i.method = "throw"), (i.arg = new TypeError("iterator result is not an object")), (i.delegate = null), g); + } + function C(t) { + var e = { tryLoc: t[0] }; + 1 in t && (e.catchLoc = t[1]), 2 in t && ((e.finallyLoc = t[2]), (e.afterLoc = t[3])), this.tryEntries.push(e); + } + function L(t) { + var e = t.completion || {}; + (e.type = "normal"), delete e.arg, (t.completion = e); + } + function E(t) { + (this.tryEntries = [{ tryLoc: "root" }]), t.forEach(C, this), this.reset(!0); + } + function P(t) { + if (t) { + var i = t[n]; + if (i) return i.call(t); + if ("function" == typeof t.next) return t; + if (!isNaN(t.length)) { + var s = -1, + r = function i() { + for (; ++s < t.length; ) if (a.call(t, s)) return (i.value = t[s]), (i.done = !1), i; + return (i.value = e), (i.done = !0), i; + }; + return (r.next = r); + } + } + return { next: T }; + } + function T() { + return { value: e, done: !0 }; + } + return ( + (x.prototype = w.constructor = v), + (v.constructor = x), + (v[o] = x.displayName = "GeneratorFunction"), + (t.isGeneratorFunction = function (t) { + var e = "function" == typeof t && t.constructor; + return !!e && (e === x || "GeneratorFunction" === (e.displayName || e.name)); + }), + (t.mark = function (t) { + return Object.setPrototypeOf ? Object.setPrototypeOf(t, v) : ((t.__proto__ = v), o in t || (t[o] = "GeneratorFunction")), (t.prototype = Object.create(w)), t; + }), + (t.awrap = function (t) { + return { __await: t }; + }), + k(S.prototype), + (S.prototype[r] = function () { + return this; + }), + (t.AsyncIterator = S), + (t.async = function (e, i, a, s) { + var n = new S(l(e, i, a, s)); + return t.isGeneratorFunction(i) + ? n + : n.next().then(function (t) { + return t.done ? t.value : n.next(); + }); + }), + k(w), + (w[o] = "Generator"), + (w[n] = function () { + return this; + }), + (w.toString = function () { + return "[object Generator]"; + }), + (t.keys = function (t) { + var e = []; + for (var i in t) e.push(i); + return ( + e.reverse(), + function i() { + for (; e.length; ) { + var a = e.pop(); + if (a in t) return (i.value = a), (i.done = !1), i; + } + return (i.done = !0), i; + } + ); + }), + (t.values = P), + (E.prototype = { + constructor: E, + reset: function (t) { + if (((this.prev = 0), (this.next = 0), (this.sent = this._sent = e), (this.done = !1), (this.delegate = null), (this.method = "next"), (this.arg = e), this.tryEntries.forEach(L), !t)) + for (var i in this) "t" === i.charAt(0) && a.call(this, i) && !isNaN(+i.slice(1)) && (this[i] = e); + }, + stop: function () { + this.done = !0; + var t = this.tryEntries[0].completion; + if ("throw" === t.type) throw t.arg; + return this.rval; + }, + dispatchException: function (t) { + if (this.done) throw t; + var i = this; + function s(a, s) { + return (o.type = "throw"), (o.arg = t), (i.next = a), s && ((i.method = "next"), (i.arg = e)), !!s; + } + for (var n = this.tryEntries.length - 1; n >= 0; --n) { + var r = this.tryEntries[n], + o = r.completion; + if ("root" === r.tryLoc) return s("end"); + if (r.tryLoc <= this.prev) { + var l = a.call(r, "catchLoc"), + h = a.call(r, "finallyLoc"); + if (l && h) { + if (this.prev < r.catchLoc) return s(r.catchLoc, !0); + if (this.prev < r.finallyLoc) return s(r.finallyLoc); + } else if (l) { + if (this.prev < r.catchLoc) return s(r.catchLoc, !0); + } else { + if (!h) throw new Error("try statement without catch or finally"); + if (this.prev < r.finallyLoc) return s(r.finallyLoc); + } + } + } + }, + abrupt: function (t, e) { + for (var i = this.tryEntries.length - 1; i >= 0; --i) { + var s = this.tryEntries[i]; + if (s.tryLoc <= this.prev && a.call(s, "finallyLoc") && this.prev < s.finallyLoc) { + var n = s; + break; + } + } + n && ("break" === t || "continue" === t) && n.tryLoc <= e && e <= n.finallyLoc && (n = null); + var r = n ? n.completion : {}; + return (r.type = t), (r.arg = e), n ? ((this.method = "next"), (this.next = n.finallyLoc), g) : this.complete(r); + }, + complete: function (t, e) { + if ("throw" === t.type) throw t.arg; + return ( + "break" === t.type || "continue" === t.type + ? (this.next = t.arg) + : "return" === t.type + ? ((this.rval = this.arg = t.arg), (this.method = "return"), (this.next = "end")) + : "normal" === t.type && e && (this.next = e), + g + ); + }, + finish: function (t) { + for (var e = this.tryEntries.length - 1; e >= 0; --e) { + var i = this.tryEntries[e]; + if (i.finallyLoc === t) return this.complete(i.completion, i.afterLoc), L(i), g; + } + }, + catch: function (t) { + for (var e = this.tryEntries.length - 1; e >= 0; --e) { + var i = this.tryEntries[e]; + if (i.tryLoc === t) { + var a = i.completion; + if ("throw" === a.type) { + var s = a.arg; + L(i); + } + return s; + } + } + throw new Error("illegal catch attempt"); + }, + delegateYield: function (t, i, a) { + return (this.delegate = { iterator: P(t), resultName: i, nextLoc: a }), "next" === this.method && (this.arg = e), g; + }, + }), + t + ); + })(t.exports); + try { + regeneratorRuntime = a; + } catch (t) { + Function("r", "regeneratorRuntime = r")(a); + } + }, + function (t, e, i) { + var a = i(97); + "string" == typeof a && (a = [[t.i, a, ""]]); + var s = { hmr: !0, transform: void 0, insertInto: void 0 }; + i(99)(a, s); + a.locals && (t.exports = a.locals); + }, + function (t, e, i) { + (t.exports = i(98)(!1)).push([ + t.i, + ".apexcharts-zoom-icon {\r\n display: none;\r\n}\r\n.footer {\r\n margin-top: -20px;\r\n font-size: 12px;\r\n padding-right: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n font-family: monospace;\r\n}\r\n.image {\r\n width: 30px;\r\n}\r\n.arrow_box {\r\n padding: 10px;\r\n text-align: center;\r\n font-family: Helvetica, Arial, sans-serif;\r\n}\r\n.tooltip-weights {\r\n border-top: 1px solid rgba(255, 255, 255, 0.2);\r\n padding: 5px;\r\n display: block;\r\n font-size: 12px;\r\n}\r\n.pc_negative {\r\n color: red;\r\n font-weight: bold;\r\n}\r\n.pc_positive {\r\n color: green;\r\n font-weight: bold;\r\n}\r\n.tooltip-heatmap-date {\r\n font-size: 11px;\r\n color: #777;\r\n}\r\n.tooltip-heatmap-price {\r\n color: #000;\r\n margin-right: 5px;\r\n}\r\n.cryptochart-container {\r\n position: relative;\r\n min-height: 300px;\r\n transition: min-height 0.3s ease-in-out;\r\n}\r\n.cryptochart_loading {\r\n margin: 0;\r\n position: absolute;\r\n top: 50%;\r\n -ms-transform: translateY(-50%);\r\n transform: translateY(-50%);\r\n text-align: center;\r\n width: 100%;\r\n}\r\n.cryptochart_loading svg {\r\n width: 7%;\r\n min-width: 40px;\r\n margin: auto;\r\n height: auto;\r\n}\r\n", + "", + ]); + }, + function (t, e, i) { + "use strict"; + t.exports = function (t) { + var e = []; + return ( + (e.toString = function () { + return this.map(function (e) { + var i = (function (t, e) { + var i = t[1] || "", + a = t[3]; + if (!a) return i; + if (e && "function" == typeof btoa) { + var s = ((r = a), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(r)))) + " */"), + n = a.sources.map(function (t) { + return "/*# sourceURL=" + a.sourceRoot + t + " */"; + }); + return [i].concat(n).concat([s]).join("\n"); + } + var r; + return [i].join("\n"); + })(e, t); + return e[2] ? "@media " + e[2] + "{" + i + "}" : i; + }).join(""); + }), + (e.i = function (t, i) { + "string" == typeof t && (t = [[null, t, ""]]); + for (var a = {}, s = 0; s < this.length; s++) { + var n = this[s][0]; + null != n && (a[n] = !0); + } + for (s = 0; s < t.length; s++) { + var r = t[s]; + (null != r[0] && a[r[0]]) || (i && !r[2] ? (r[2] = i) : i && (r[2] = "(" + r[2] + ") and (" + i + ")"), e.push(r)); + } + }), + e + ); + }; + }, + function (t, e, i) { + var a, + s, + n = {}, + r = + ((a = function () { + return window && document && document.all && !window.atob; + }), + function () { + return void 0 === s && (s = a.apply(this, arguments)), s; + }), + o = (function (t) { + var e = {}; + return function (t, i) { + if ("function" == typeof t) return t(); + if (void 0 === e[t]) { + var a = function (t, e) { + return e ? e.querySelector(t) : document.querySelector(t); + }.call(this, t, i); + if (window.HTMLIFrameElement && a instanceof window.HTMLIFrameElement) + try { + a = a.contentDocument.head; + } catch (t) { + a = null; + } + e[t] = a; + } + return e[t]; + }; + })(), + l = null, + h = 0, + c = [], + d = i(100); + function u(t, e) { + for (var i = 0; i < t.length; i++) { + var a = t[i], + s = n[a.id]; + if (s) { + s.refs++; + for (var r = 0; r < s.parts.length; r++) s.parts[r](a.parts[r]); + for (; r < a.parts.length; r++) s.parts.push(m(a.parts[r], e)); + } else { + var o = []; + for (r = 0; r < a.parts.length; r++) o.push(m(a.parts[r], e)); + n[a.id] = { id: a.id, refs: 1, parts: o }; + } + } + } + function f(t, e) { + for (var i = [], a = {}, s = 0; s < t.length; s++) { + var n = t[s], + r = e.base ? n[0] + e.base : n[0], + o = { css: n[1], media: n[2], sourceMap: n[3] }; + a[r] ? a[r].parts.push(o) : i.push((a[r] = { id: r, parts: [o] })); + } + return i; + } + function g(t, e) { + var i = o(t.insertInto); + if (!i) throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid."); + var a = c[c.length - 1]; + if ("top" === t.insertAt) a ? (a.nextSibling ? i.insertBefore(e, a.nextSibling) : i.appendChild(e)) : i.insertBefore(e, i.firstChild), c.push(e); + else if ("bottom" === t.insertAt) i.appendChild(e); + else { + if ("object" != typeof t.insertAt || !t.insertAt.before) + throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n"); + var s = o(t.insertAt.before, i); + i.insertBefore(e, s); + } + } + function p(t) { + if (null === t.parentNode) return !1; + t.parentNode.removeChild(t); + var e = c.indexOf(t); + e >= 0 && c.splice(e, 1); + } + function x(t) { + var e = document.createElement("style"); + if ((void 0 === t.attrs.type && (t.attrs.type = "text/css"), void 0 === t.attrs.nonce)) { + var a = (function () { + 0; + return i.nc; + })(); + a && (t.attrs.nonce = a); + } + return v(e, t.attrs), g(t, e), e; + } + function v(t, e) { + Object.keys(e).forEach(function (i) { + t.setAttribute(i, e[i]); + }); + } + function m(t, e) { + var i, a, s, n; + if (e.transform && t.css) { + if (!(n = "function" == typeof e.transform ? e.transform(t.css) : e.transform.default(t.css))) return function () {}; + t.css = n; + } + if (e.singleton) { + var r = h++; + (i = l || (l = x(e))), (a = w.bind(null, i, r, !1)), (s = w.bind(null, i, r, !0)); + } else + t.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa + ? ((i = (function (t) { + var e = document.createElement("link"); + return void 0 === t.attrs.type && (t.attrs.type = "text/css"), (t.attrs.rel = "stylesheet"), v(e, t.attrs), g(t, e), e; + })(e)), + (a = function (t, e, i) { + var a = i.css, + s = i.sourceMap, + n = void 0 === e.convertToAbsoluteUrls && s; + (e.convertToAbsoluteUrls || n) && (a = d(a)); + s && (a += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(s)))) + " */"); + var r = new Blob([a], { type: "text/css" }), + o = t.href; + (t.href = URL.createObjectURL(r)), o && URL.revokeObjectURL(o); + }.bind(null, i, e)), + (s = function () { + p(i), i.href && URL.revokeObjectURL(i.href); + })) + : ((i = x(e)), + (a = function (t, e) { + var i = e.css, + a = e.media; + a && t.setAttribute("media", a); + if (t.styleSheet) t.styleSheet.cssText = i; + else { + for (; t.firstChild; ) t.removeChild(t.firstChild); + t.appendChild(document.createTextNode(i)); + } + }.bind(null, i)), + (s = function () { + p(i); + })); + return ( + a(t), + function (e) { + if (e) { + if (e.css === t.css && e.media === t.media && e.sourceMap === t.sourceMap) return; + a((t = e)); + } else s(); + } + ); + } + t.exports = function (t, e) { + if ("undefined" != typeof DEBUG && DEBUG && "object" != typeof document) throw new Error("The style-loader cannot be used in a non-browser environment"); + ((e = e || {}).attrs = "object" == typeof e.attrs ? e.attrs : {}), e.singleton || "boolean" == typeof e.singleton || (e.singleton = r()), e.insertInto || (e.insertInto = "head"), e.insertAt || (e.insertAt = "bottom"); + var i = f(t, e); + return ( + u(i, e), + function (t) { + for (var a = [], s = 0; s < i.length; s++) { + var r = i[s]; + (o = n[r.id]).refs--, a.push(o); + } + t && u(f(t, e), e); + for (s = 0; s < a.length; s++) { + var o; + if (0 === (o = a[s]).refs) { + for (var l = 0; l < o.parts.length; l++) o.parts[l](); + delete n[o.id]; + } + } + } + ); + }; + var b, + y = + ((b = []), + function (t, e) { + return (b[t] = e), b.filter(Boolean).join("\n"); + }); + function w(t, e, i, a) { + var s = i ? "" : a.css; + if (t.styleSheet) t.styleSheet.cssText = y(e, s); + else { + var n = document.createTextNode(s), + r = t.childNodes; + r[e] && t.removeChild(r[e]), r.length ? t.insertBefore(n, r[e]) : t.appendChild(n); + } + } + }, + function (t, e) { + t.exports = function (t) { + var e = "undefined" != typeof window && window.location; + if (!e) throw new Error("fixUrls requires window.location"); + if (!t || "string" != typeof t) return t; + var i = e.protocol + "//" + e.host, + a = i + e.pathname.replace(/\/[^\/]*$/, "/"); + return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function (t, e) { + var s, + n = e + .trim() + .replace(/^"(.*)"$/, function (t, e) { + return e; + }) + .replace(/^'(.*)'$/, function (t, e) { + return e; + }); + return /^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(n) ? t : ((s = 0 === n.indexOf("//") ? n : 0 === n.indexOf("/") ? i + n : a + n.replace(/^\.\//, "")), "url(" + JSON.stringify(s) + ")"); + }); + }; + }, + function (t, e, i) { + (function (t) { + var a = (void 0 !== t && t) || ("undefined" != typeof self && self) || window, + s = Function.prototype.apply; + function n(t, e) { + (this._id = t), (this._clearFn = e); + } + (e.setTimeout = function () { + return new n(s.call(setTimeout, a, arguments), clearTimeout); + }), + (e.setInterval = function () { + return new n(s.call(setInterval, a, arguments), clearInterval); + }), + (e.clearTimeout = e.clearInterval = function (t) { + t && t.close(); + }), + (n.prototype.unref = n.prototype.ref = function () {}), + (n.prototype.close = function () { + this._clearFn.call(a, this._id); + }), + (e.enroll = function (t, e) { + clearTimeout(t._idleTimeoutId), (t._idleTimeout = e); + }), + (e.unenroll = function (t) { + clearTimeout(t._idleTimeoutId), (t._idleTimeout = -1); + }), + (e._unrefActive = e.active = function (t) { + clearTimeout(t._idleTimeoutId); + var e = t._idleTimeout; + e >= 0 && + (t._idleTimeoutId = setTimeout(function () { + t._onTimeout && t._onTimeout(); + }, e)); + }), + i(102), + (e.setImmediate = ("undefined" != typeof self && self.setImmediate) || (void 0 !== t && t.setImmediate) || (this && this.setImmediate)), + (e.clearImmediate = ("undefined" != typeof self && self.clearImmediate) || (void 0 !== t && t.clearImmediate) || (this && this.clearImmediate)); + }.call(this, i(23))); + }, + function (t, e, i) { + (function (t, e) { + !(function (t, i) { + "use strict"; + if (!t.setImmediate) { + var a, + s, + n, + r, + o, + l = 1, + h = {}, + c = !1, + d = t.document, + u = Object.getPrototypeOf && Object.getPrototypeOf(t); + (u = u && u.setTimeout ? u : t), + "[object process]" === {}.toString.call(t.process) + ? (a = function (t) { + e.nextTick(function () { + g(t); + }); + }) + : !(function () { + if (t.postMessage && !t.importScripts) { + var e = !0, + i = t.onmessage; + return ( + (t.onmessage = function () { + e = !1; + }), + t.postMessage("", "*"), + (t.onmessage = i), + e + ); + } + })() + ? t.MessageChannel + ? (((n = new MessageChannel()).port1.onmessage = function (t) { + g(t.data); + }), + (a = function (t) { + n.port2.postMessage(t); + })) + : d && "onreadystatechange" in d.createElement("script") + ? ((s = d.documentElement), + (a = function (t) { + var e = d.createElement("script"); + (e.onreadystatechange = function () { + g(t), (e.onreadystatechange = null), s.removeChild(e), (e = null); + }), + s.appendChild(e); + })) + : (a = function (t) { + setTimeout(g, 0, t); + }) + : ((r = "setImmediate$" + Math.random() + "$"), + (o = function (e) { + e.source === t && "string" == typeof e.data && 0 === e.data.indexOf(r) && g(+e.data.slice(r.length)); + }), + t.addEventListener ? t.addEventListener("message", o, !1) : t.attachEvent("onmessage", o), + (a = function (e) { + t.postMessage(r + e, "*"); + })), + (u.setImmediate = function (t) { + "function" != typeof t && (t = new Function("" + t)); + for (var e = new Array(arguments.length - 1), i = 0; i < e.length; i++) e[i] = arguments[i + 1]; + var s = { callback: t, args: e }; + return (h[l] = s), a(l), l++; + }), + (u.clearImmediate = f); + } + function f(t) { + delete h[t]; + } + function g(t) { + if (c) setTimeout(g, 0, t); + else { + var e = h[t]; + if (e) { + c = !0; + try { + !(function (t) { + var e = t.callback, + a = t.args; + switch (a.length) { + case 0: + e(); + break; + case 1: + e(a[0]); + break; + case 2: + e(a[0], a[1]); + break; + case 3: + e(a[0], a[1], a[2]); + break; + default: + e.apply(i, a); + } + })(e); + } finally { + f(t), (c = !1); + } + } + } + } + })("undefined" == typeof self ? (void 0 === t ? this : t) : self); + }.call(this, i(23), i(103))); + }, + function (t, e) { + var i, + a, + s = (t.exports = {}); + function n() { + throw new Error("setTimeout has not been defined"); + } + function r() { + throw new Error("clearTimeout has not been defined"); + } + function o(t) { + if (i === setTimeout) return setTimeout(t, 0); + if ((i === n || !i) && setTimeout) return (i = setTimeout), setTimeout(t, 0); + try { + return i(t, 0); + } catch (e) { + try { + return i.call(null, t, 0); + } catch (e) { + return i.call(this, t, 0); + } + } + } + !(function () { + try { + i = "function" == typeof setTimeout ? setTimeout : n; + } catch (t) { + i = n; + } + try { + a = "function" == typeof clearTimeout ? clearTimeout : r; + } catch (t) { + a = r; + } + })(); + var l, + h = [], + c = !1, + d = -1; + function u() { + c && l && ((c = !1), l.length ? (h = l.concat(h)) : (d = -1), h.length && f()); + } + function f() { + if (!c) { + var t = o(u); + c = !0; + for (var e = h.length; e; ) { + for (l = h, h = []; ++d < e; ) l && l[d].run(); + (d = -1), (e = h.length); + } + (l = null), + (c = !1), + (function (t) { + if (a === clearTimeout) return clearTimeout(t); + if ((a === r || !a) && clearTimeout) return (a = clearTimeout), clearTimeout(t); + try { + a(t); + } catch (e) { + try { + return a.call(null, t); + } catch (e) { + return a.call(this, t); + } + } + })(t); + } + } + function g(t, e) { + (this.fun = t), (this.array = e); + } + function p() {} + (s.nextTick = function (t) { + var e = new Array(arguments.length - 1); + if (arguments.length > 1) for (var i = 1; i < arguments.length; i++) e[i - 1] = arguments[i]; + h.push(new g(t, e)), 1 !== h.length || c || o(f); + }), + (g.prototype.run = function () { + this.fun.apply(null, this.array); + }), + (s.title = "browser"), + (s.browser = !0), + (s.env = {}), + (s.argv = []), + (s.version = ""), + (s.versions = {}), + (s.on = p), + (s.addListener = p), + (s.once = p), + (s.off = p), + (s.removeListener = p), + (s.removeAllListeners = p), + (s.emit = p), + (s.prependListener = p), + (s.prependOnceListener = p), + (s.listeners = function (t) { + return []; + }), + (s.binding = function (t) { + throw new Error("process.binding is not supported"); + }), + (s.cwd = function () { + return "/"; + }), + (s.chdir = function (t) { + throw new Error("process.chdir is not supported"); + }), + (s.umask = function () { + return 0; + }); + }, + function (t, e) { + t.exports = function (t) { + if (!t.webpackPolyfill) { + var e = Object.create(t); + e.children || (e.children = []), + Object.defineProperty(e, "loaded", { + enumerable: !0, + get: function () { + return e.l; + }, + }), + Object.defineProperty(e, "id", { + enumerable: !0, + get: function () { + return e.i; + }, + }), + Object.defineProperty(e, "exports", { enumerable: !0 }), + (e.webpackPolyfill = 1); + } + return e; + }; + }, + function (t, e) { + (function (e) { + t.exports = e; + }.call(this, {})); + }, + function (t, e, i) { + "use strict"; + i.r(e); + i(54), i(95), i(96); + function a(t, e, i) { + return e in t ? Object.defineProperty(t, e, { value: i, enumerable: !0, configurable: !0, writable: !0 }) : (t[e] = i), t; + } + function s(t) { + return (s = + "function" == typeof Symbol && "symbol" == typeof Symbol.iterator + ? function (t) { + return typeof t; + } + : function (t) { + return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t; + })(t); + } + function n(t) { + return t && "object" === s(t) && !Array.isArray(t); + } + function r(t) { + for (var e = arguments.length, i = new Array(e > 1 ? e - 1 : 0), s = 1; s < e; s++) i[s - 1] = arguments[s]; + if (!i.length) return t; + var o = i.shift(); + if (n(t) && n(o)) for (var l in o) n(o[l]) ? (t[l] || Object.assign(t, a({}, l, {})), r(t[l], o[l])) : Object.assign(t, a({}, l, o[l])); + return r.apply(void 0, [t].concat(i)); + } + function o(t, e, i) { + var a = null; + e && (a = [].concat.apply([], e)); + var s = Math.max.apply( + Math, + i.map(function (t) { + return t.max; + }) + ), + n = Math.min.apply( + Math, + i.map(function (t) { + return t.min; + }) + ), + o = 0, + l = 0; + n < 0 && (o = Math.ceil(n) - 1), s > 0 && (l = Math.ceil(s) + 1); + var h = { + chart: { id: t.chart_id, height: 500, type: "area", toolbar: { show: !1 } }, + colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"], + annotations: { + position: "back", + yaxis: [{ y: 0, y2: o, borderColor: "red", fillColor: "red", opacity: 0.15, label: { borderWidth: 0, style: { fontSize: "1px", color: "#333", background: "transparent", cssClass: "hidden" }, text: "." } }], + }, + legend: { position: "top" }, + dataLabels: { enabled: !1 }, + stroke: { curve: "smooth", width: 2 }, + series: i, + grid: { yaxis: { lines: { show: !1 } }, xaxis: { lines: { show: !1 } } }, + yaxis: { + min: o, + max: l, + labels: { + style: { color: "#555555", fontSize: "12px" }, + formatter: function (t) { + return t.toFixed(2) + "%"; + }, + }, + axisTicks: { show: !0, color: "#ccc" }, + axisBorder: { show: !0, color: "#ccc" }, + }, + xaxis: { + type: "category", + axisTicks: { show: !0, color: "#ccc" }, + axisBorder: { show: !0, color: "#ccc" }, + labels: { + style: { colors: "#555555", fontSize: "12px" }, + formatter: function (t, e, i) { + return new Date(e).toLocaleDateString("en-GB", { month: "short", day: "2-digit" }); + }, + }, + tooltip: { enabled: !1 }, + }, + tooltip: { + shared: !0, + x: { + formatter: function (t, e) { + e.series, e.seriesIndex, e.dataPointIndex, e.w; + return new Date(t).toLocaleDateString("en-GB", { year: "numeric", month: "short", day: "2-digit" }); + }, + }, + y: { + formatter: function (t, e) { + var i = e.seriesIndex, + a = e.dataPointIndex; + if (e.w.config.series[i].data[a]) return e.w.config.series[i].data[a].y.toFixed(2) + "%" + " / $" + e.w.config.series[i].data[a].price.toFixed(2); + }, + }, + }, + }; + return t.options && (t.options.theme && delete h.colors, r(h, t.options), !0 === t.options.title && (h.title = { text: "ROI of " + a + " over time" })), h; + } + var l = i(2); + function h(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function c(t, e, i) { + return d.apply(this, arguments); + } + function d() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i, a) { + var s, n, r, o, l, h, c, d, u; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + (n = function (t) { + var e = []; + return ( + t.forEach(function (t) { + var i = {}; + (i.x = t.time), (i.y = t.close), e.push(i); + }), + e + ); + }), + (s = []), + (r = 30), + a.last_days && (r = a.last_days), + (o = 0); + case 5: + if (!(o < e.length)) { + t.next = 22; + break; + } + return ( + (l = {}), + (h = "https://min-api.cryptocompare.com/data/histoday?fsym=" + e[o] + "&tsym=USD&limit=" + Number(r)), + i && (h = h + "&api_key=" + i), + (t.next = 11), + fetch(h).catch(function (t) { + return console.error("Error:", t); + }) + ); + case 11: + return (c = t.sent), (t.next = 14), c.json(); + case 14: + (d = t.sent), (u = d.Data.slice(1)), (l.name = e[o].toString()), (l.data = n(u)), s.push(l); + case 19: + o++, (t.next = 5); + break; + case 22: + return t.abrupt("return", s); + case 23: + case "end": + return t.stop(); + } + }, t); + })), + (d = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + h(n, a, s, r, o, "next", t); + } + function o(t) { + h(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function u(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function f(t, e) { + return g.apply(this, arguments); + } + function g() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i) { + var a, s, n, r, o, l, h, c, d, u, f, g; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + (g = function (t) { + var e = []; + return ( + t.values.forEach(function (t) { + f(Number(t.x)) && e.push(t); + }), + e + ); + }), + (f = function (t) { + var e = new Date(1e3 * t).toISOString(), + i = new Date(e).setUTCHours(0, 0, 0, 0), + a = !1; + return t === Math.round(i / 1e3) && (a = !0), a; + }), + (a = []), + (s = Math.round(new Date().getTime() / 1e3) - 2592e3), + (n = Math.round(new Date().getTime() / 1e3)), + i.from && (s = i.from), + i.to && (n = i.to), + i.last_days && ((r = 86400 * i.last_days), (s = n - r)), + (o = 0); + case 9: + if (!(o < e.length)) { + t.next = 28; + break; + } + return ( + (t.next = 12), + fetch("https://api.iconomi.com/v1/daa/" + e[o] + "/pricehistory?from=" + s + "&to=" + n).catch(function (t) { + return console.error("Error:", t); + }) + ); + case 12: + return (l = t.sent), (t.next = 15), l.json(); + case 15: + return ( + (h = t.sent), + (c = g(h)), + (t.next = 19), + fetch("https://api.iconomi.com/v1/daa/" + e[o] + "/price").catch(function (t) { + return console.error("Error:", t); + }) + ); + case 19: + return (d = t.sent), (t.next = 22), d.json(); + case 22: + (u = t.sent), (c[c.length - 1].y = u.price.toString()), a.push({ name: e[o], data: c }); + case 25: + o++, (t.next = 9); + break; + case 28: + return t.abrupt("return", a); + case 29: + case "end": + return t.stop(); + } + }, t); + })), + (g = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + u(n, a, s, r, o, "next", t); + } + function o(t) { + u(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function p(t) { + return ( + (function (t) { + if (Array.isArray(t)) { + for (var e = 0, i = new Array(t.length); e < t.length; e++) i[e] = t[e]; + return i; + } + })(t) || + (function (t) { + if (Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t)) return Array.from(t); + })(t) || + (function () { + throw new TypeError("Invalid attempt to spread non-iterable instance"); + })() + ); + } + function x(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function v(t, e, i, a, s) { + return m.apply(this, arguments); + } + function m() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i, a, s, n) { + var r, o, l; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + if (((r = null), (o = null), !e)) { + t.next = 6; + break; + } + return (t.next = 5), f(e, n); + case 5: + r = t.sent; + case 6: + if (!i) { + t.next = 10; + break; + } + return (t.next = 9), c(i, a, n); + case 9: + o = t.sent; + case 10: + return ( + (l = []), + (e || i) && + Promise.all([r, o]).then(function (t) { + var e = t[0], + i = t[1], + a = null; + e && i ? (a = [].concat(p(e), p(i))) : e ? ((a = p(e)), console.log(e)) : ((a = p(i)), console.log(i)), l.push(a); + }), + t.abrupt("return", l) + ); + case 13: + case "end": + return t.stop(); + } + }, t); + })), + (m = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + x(n, a, s, r, o, "next", t); + } + function o(t) { + x(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function b(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function y(t, e, i, a, s) { + return w.apply(this, arguments); + } + function w() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i, a, s, n) { + var r, o, l, h; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return ( + (r = function (t, e) { + return 0 !== e ? (0 !== t ? ((e - t) / t) * 100 : 100 * e) : 100 * -t; + }), + (t.next = 3), + v(e, i, a, s, n) + ); + case 3: + return (o = t.sent), (t.next = 6), o; + case 6: + return ( + (l = t.sent), + (h = []), + s && + (l.length > 0 + ? s.forEach(function (t) { + l[0].push(t); + }) + : (l.push([]), + s.forEach(function (t) { + l[0].push(t); + }))), + l[0].forEach(function (t) { + var e = [], + i = t.data, + a = 0, + s = 0; + i.forEach(function (t) { + var n = t.y, + o = i[0].y, + l = 1e3 * t.x, + h = r(o, n); + h <= a && (a = h), h >= s && (s = h), e.push({ x: Number(l), y: Number(h.toFixed(2)), price: Number(n) }); + }), + h.push({ name: t.name, data: e, min: Number(a.toFixed(2)), max: Number(s.toFixed(2)) }); + }), + t.abrupt("return", h) + ); + case 11: + case "end": + return t.stop(); + } + }, t); + })), + (w = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + b(n, a, s, r, o, "next", t); + } + function o(t) { + b(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function k(t) { + var e, + i = null; + return ( + t && (i = t), + '<svg\n viewBox="0 0 105 140"\n xmlns="http://www.w3.org/2000/svg"\n ><defs>\n <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">\n <stop offset="0%" style="stop-color:#1EC198;stop-opacity:1" />\n <stop offset="100%" style="stop-color:#265CDD;stop-opacity:1" />\n </linearGradient>\n </defs>\n '.concat( + ((e = ""), + [ + { x: 0, y: 50, height: 40, dur: 0 }, + { x: 30, y: 40, height: 60, dur: 0.1 }, + { x: 60, y: 30, height: 80, dur: 0.2 }, + { x: 90, y: 20, height: 100, dur: 0.3 }, + ].forEach(function (t, a) { + var s; + e += '<rect width="15" x="' + .concat(t.x, '" height="') + .concat(t.height, '" y="') + .concat(t.y, '" rx="3" fill="') + .concat( + (function (t) { + var e = "url(#grad2)"; + return i && (e = i[t]), e; + })(a), + '" id="bar' + ) + .concat(a, '">') + .concat( + ((s = t.dur), + '<animate\n attributeName="height"\n begin="' + .concat( + s, + 's"\n dur="1s"\n values="120;110;100;90;80;70;60;50;40;140;120"\n calcMode="linear"\n repeatCount="indefinite"\n />\n <animate\n attributeName="y"\n begin="' + ) + .concat(s, 's"\n dur="1s"\n values="10;15;20;25;30;35;40;45;50;0;10"\n calcMode="linear"\n repeatCount="indefinite"\n />')), + "</rect>" + ); + }), + e), + "\n </svg>" + ) + ); + } + function S(t, e) { + var i = k(); + e.loading_indicator.colors && (i = k(e.loading_indicator.colors)); + var a = "<div class='".concat(t, ' cryptochart_loading\' title="loading chart...">').concat(i, "</div>"); + document.querySelectorAll("#" + t)[0].classList.add("cryptochart-container"), (document.querySelectorAll("#" + t)[0].innerHTML = a); + } + function A(t, e) { + var i = e / 1e3; + (t.style.transition = "opacity " + i + "s ease"), + (t.style.opacity = 0), + setTimeout(function () { + t.parentNode.removeChild(t); + }, e); + } + function C(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function L() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e) { + var i, a, s, n, r, h, c, d; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return ( + (i = null), + (a = null), + (s = []), + (n = null), + (r = null), + (h = null), + e.chart_id && (h = e.chart_id), + e.iconomi_tickers && ((i = e.iconomi_tickers), s.push(i)), + e.cryptocompare_tickers && ((a = e.cryptocompare_tickers), s.push(a)), + e.cryptocompare_api_key && (n = e.cryptocompare_api_key), + e.custom_data && + ((r = e.custom_data), + (c = []), + r.forEach(function (t) { + c.push(t.name); + }), + s.push(c)), + e.loading_indicator && S(h, e), + (t.next = 14), + y(i, a, n, r, e) + ); + case 14: + (d = t.sent), new l.a(document.querySelector("#" + h), o(e, s, d)).render(), e.loading_indicator && A(document.querySelector(".".concat(h, ".cryptochart_loading")), 2e3); + case 18: + case "end": + return t.stop(); + } + }, t); + })), + (L = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + C(n, a, s, r, o, "next", t); + } + function o(t) { + C(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function E(t, e, i) { + var a = null; + e && (a = [].concat.apply([], e)); + var s = i[0], + n = -1, + o = 1; + function l(t) { + return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][t]; + } + s.min && s.max && (s.min < n && (n = Math.round(s.min)), s.max > o && (o = Math.round(s.max))); + var h = (function (t) { + var e = t.reduce(function (t, e) { + var i = new Date(e.x).getDay(); + return t[i] || (t[i] = []), t[i].push(e), t; + }, {}), + i = []; + Object.keys(e).forEach(function (t) { + i.push(e[t].length); + }); + var a = new Date(s.data[0].x).getUTCDay(); + return ( + Object.keys(e).forEach(function (t) { + if (t < a) { + var i = e[t][0].x - 6048e5; + e[t].unshift({ x: i, y: null }); + } + }), + Object.keys(e) + .map(function (t) { + return { name: ((i = t), ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][i]), data: e[t] }; + var i; + }) + .reverse() + ); + })(s.data), + c = { + chart: { id: t.chart_id, height: 200, animations: { enabled: !0 }, type: "heatmap", zoom: { enabled: !1 }, toolbar: { tools: { download: !1, zoomin: !1, zoomout: !1, pan: !1, selection: !1, reset: 0 } } }, + legend: { position: "top", markers: { radius: 0, offsetY: 0 }, onItemClick: { toggleDataSeries: !0 } }, + dataLabels: { enabled: !1 }, + series: h, + grid: { position: "back", yaxis: { lines: { show: !1 } } }, + yaxis: { + show: !0, + labels: { + formatter: function (t, e) { + if (e % 2 != 0) return t; + }, + style: { color: "#555555", fontSize: "11px" }, + }, + }, + xaxis: { + type: "category", + labels: { + show: !0, + offsetY: -4, + style: { colors: "#555555", fontSize: "11px" }, + showDuplicates: !0, + formatter: function (t, e, i) { + return l(new Date(e).getMonth()) + " " + new Date(e).getUTCFullYear().toString().substr(-2); + }, + }, + axisTicks: { show: !1 }, + axisBorder: { show: !1 }, + tooltip: { + enabled: !1, + formatter: function (t) { + return l(new Date(t).getMonth()); + }, + }, + }, + stroke: { width: 0 }, + tooltip: { + custom: function (t) { + var e = t.series, + i = t.seriesIndex, + a = t.dataPointIndex, + s = t.w; + if (!s.config.series[i].data[a].y) return null; + var n = new Date(s.config.series[i].data[a].x), + r = "$" + s.config.series[i].data[a].price.toFixed(2), + o = n.toLocaleDateString("en-GB", { weekday: "short", year: "numeric", month: "short", day: "numeric" }), + l = "+" + s.config.series[i].data[a].change + "%", + h = "pc_positive"; + return ( + e[i][a] < 0 && ((l = s.config.series[i].data[a].change + "%"), (h = "pc_negative")), + "<div class=\"arrow_box\"><span class='tooltip-heatmap-price'>" + r + "</span><span class=" + h + ">" + l + "</span><br><span class='tooltip-heatmap-date'>" + o + "</span></span></div>" + ); + }, + }, + plotOptions: { + heatmap: { + reverseNegativeShade: !0, + radius: 0, + shadeIntensity: 0.5, + enableShades: !0, + colorScale: { + ranges: [ + { from: 1e3 * n, to: -1e3, color: "#FF0000", name: "< -1%" }, + { from: -1e3, to: 1e3, color: "#cccccc", name: "-1% to 1%" }, + { from: 1e3, to: 1e3 * o, color: "#00A100", name: ">1%" }, + ], + max: 1e3 * o, + min: 1e3 * n, + }, + }, + }, + }; + return t.options && (t.options.theme && delete c.colors, r(c, t.options), !0 === t.options.title && (c.title = { text: "Daily % change of " + a + " over time" })), c; + } + function P(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function T(t, e, i, a, s) { + return M.apply(this, arguments); + } + function M() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i, a, s, n) { + var r, o, l; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return (t.next = 2), v(e, i, a, s, n); + case 2: + return (r = t.sent), (t.next = 5), r; + case 5: + return ( + (o = t.sent), + (l = []), + s && + (o.length > 0 + ? s.forEach(function (t) { + o[0].push(t); + }) + : (o.push([]), + s.forEach(function (t) { + o[0].push(t); + }))), + o[0].forEach(function (t) { + var e = [], + i = t.data, + a = 0, + s = 0; + i.forEach(function (t, n) { + var r = t.y, + o = 0; + o = n > 0 ? i[n - 1].y : t.y; + var l = 1e3 * t.x, + h = 100 * (1 - o / r); + h <= a && (a = h - 4), h >= s && (s = h + 4), e.push({ x: Number(l), change: Number(h.toFixed(2)), y: Math.floor(1e3 * h), price: Number(r) }); + }), + l.push({ name: t.name, data: e, min: Number(a.toFixed(2)), max: Number(s.toFixed(2)) }); + }), + t.abrupt("return", l) + ); + case 10: + case "end": + return t.stop(); + } + }, t); + })), + (M = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + P(n, a, s, r, o, "next", t); + } + function o(t) { + P(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function z(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function I() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e) { + var i, a, s, n, r, o, h, c; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return ( + (i = null), + (a = null), + (s = []), + (n = null), + (r = null), + (o = null), + e.chart_id && (o = e.chart_id), + e.iconomi_tickers && ((i = e.iconomi_tickers), s.push(i)), + e.cryptocompare_tickers && ((a = e.cryptocompare_tickers), s.push(a)), + e.cryptocompare_api_key && (n = e.cryptocompare_api_key), + e.custom_data && + ((r = e.custom_data), + (h = []), + r.forEach(function (t) { + h.push(t.name); + }), + s.push(h)), + e.loading_indicator && S(o, e), + (t.next = 14), + T(i, a, n, r, e) + ); + case 14: + (c = t.sent), new l.a(document.querySelector("#" + o), E(e, s, c)).render(), e.loading_indicator && A(document.querySelector(".".concat(o, ".cryptochart_loading")), 2e3); + case 18: + case "end": + return t.stop(); + } + }, t); + })), + (I = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + z(n, a, s, r, o, "next", t); + } + function o(t) { + z(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function X(t, e, i) { + var a = null; + e && (a = [].concat.apply([], e)); + var s = { + chart: { id: t.chart_id, sparkline: { enabled: !0 }, type: "area", toolbar: { tools: { download: !1, zoomin: !1, zoomout: !1, pan: !1, selection: !1, reset: 0 } } }, + colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"], + legend: { show: !1 }, + dataLabels: { enabled: !1 }, + stroke: { curve: "smooth", width: 2 }, + series: i, + grid: { yaxis: { lines: { show: !1 } }, xaxis: { lines: { show: !1 } } }, + yaxis: { axisTicks: { show: !1 }, axisBorder: { show: !1 } }, + xaxis: { format: "dd MMM yyyy", type: "datetime", axisTicks: { show: !1 }, axisBorder: { show: !1 }, tooltip: { enabled: !1 }, crosshairs: { show: !1 } }, + tooltip: { + shared: !0, + x: { format: "dd MMM yyyy" }, + y: { + formatter: function (t, e) { + var i = e.seriesIndex, + a = e.dataPointIndex; + if (e.w.config.series[i].data[a]) return "$" + Number(e.w.config.series[i].data[a].y).toFixed(2); + }, + }, + }, + }; + if (t.tooltip && "priceonly" === t.tooltip) { + var n = { + custom: function (t) { + var e = t.series, + i = t.seriesIndex, + a = t.dataPointIndex; + t.w; + return '<div class="arrow_box"><span>$' + Number(e[i][a]) + "</span></div>"; + }, + }; + s.tooltip = n; + } + return ( + !0 === t.axes && + ((s.chart.sparkline = !1), + (s.yaxis = { + labels: { + style: { color: "#555555", fontSize: "12px" }, + formatter: function (t) { + return "$" + t.toFixed(2); + }, + }, + axisTicks: { show: !0, color: "#ccc" }, + axisBorder: { show: !0, color: "#ccc" }, + }), + (s.xaxis = { + type: "category", + axisTicks: { show: !0, color: "#ccc" }, + axisBorder: { show: !0, color: "#ccc" }, + labels: { + style: { colors: "#555555", fontSize: "12px" }, + formatter: function (t, e, i) { + return new Date(e).toLocaleDateString("en-GB", { month: "short", day: "2-digit" }); + }, + }, + tooltip: { enabled: !1 }, + }), + (s.tooltip = { + x: { + formatter: function (t, e) { + e.series, e.seriesIndex, e.dataPointIndex, e.w; + return new Date(t).toLocaleDateString("en-GB", { year: "numeric", month: "short", day: "2-digit" }); + }, + }, + })), + t.options && (t.options.theme && delete s.colors, r(s, t.options), !0 === t.options.title && (s.title = { text: a + " price over time" })), + s + ); + } + function F(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function Y(t, e, i, a, s) { + return O.apply(this, arguments); + } + function O() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i, a, s, n) { + var r, o, l; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return (t.next = 2), v(e, i, a, s, n); + case 2: + return (r = t.sent), (t.next = 5), r; + case 5: + return ( + (o = t.sent), + (l = []), + s && + (o.length > 0 + ? s.forEach(function (t) { + o[0].push(t); + }) + : (o.push([]), + s.forEach(function (t) { + o[0].push(t); + }))), + o[0].forEach(function (t) { + var e = [], + i = t.data, + a = 0, + s = 0; + i.forEach(function (t) { + var n = t.y, + r = i[0].y, + o = 1e3 * t.x, + l = 100 * (1 - r / n); + l <= a && (a = l), l >= s && (s = l), e.push({ x: Number(o), y: Number(n).toFixed(2), change: Number(l) }); + }), + l.push({ name: t.name, data: e, min: Number(a.toFixed(2)), max: Number(s.toFixed(2)) }); + }), + t.abrupt("return", l) + ); + case 10: + case "end": + return t.stop(); + } + }, t); + })), + (O = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + F(n, a, s, r, o, "next", t); + } + function o(t) { + F(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function R(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function D() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e) { + var i, a, s, n, r, o, h, c; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return ( + (i = null), + (a = null), + (s = []), + (n = null), + (r = null), + (o = null), + e.chart_id && (o = e.chart_id), + e.iconomi_tickers && ((i = e.iconomi_tickers), s.push(i)), + e.cryptocompare_tickers && ((a = e.cryptocompare_tickers), s.push(a)), + e.cryptocompare_api_key && (n = e.cryptocompare_api_key), + e.custom_data && + ((r = e.custom_data), + (h = []), + r.forEach(function (t) { + h.push(t.name); + }), + s.push(h)), + e.loading_indicator && S(o, e), + (t.next = 14), + Y(i, a, n, r, e) + ); + case 14: + (c = t.sent), new l.a(document.querySelector("#" + o), X(e, s, c)).render(), e.loading_indicator && A(document.querySelector(".".concat(o, ".cryptochart_loading")), 2e3); + case 18: + case "end": + return t.stop(); + } + }, t); + })), + (D = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + R(n, a, s, r, o, "next", t); + } + function o(t) { + R(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function N(t, e, i) { + var a = null; + e && (a = [].concat.apply([], e)); + var s = i[0].series, + n = i[0].rebalanced, + o = i[0].labels, + l = i[0].tickers, + h = { + plotOptions: { + pie: { + donut: { + labels: { + show: !0, + name: { show: !0, color: "#000000", offsetY: -15 }, + value: { + show: !0, + color: "#000000", + offsetY: -5, + formatter: function (t, e) { + e.seriesIndex; + return (100 * t).toFixed(2) + "%"; + }, + }, + total: { + show: !0, + label: "Total " + a + " Assets:", + formatter: function (t) { + return s.length; + }, + }, + }, + }, + }, + }, + chart: { id: t.chart_id, type: "donut" }, + series: s, + labels: o, + legend: { position: "right", offsetY: 25, horizontalAlign: "left" }, + dataLabels: { + enabled: !0, + formatter: function (t, e) { + var i = e.seriesIndex; + e.dataPointIndex, e.w; + return l[i]; + }, + dropShadow: { enabled: !0 }, + }, + tooltip: { + custom: function (t) { + var e = t.series, + i = t.seriesIndex; + t.dataPointIndex, t.w; + return '<div class="arrow_box"><span>' + o[i] + " (" + l[i] + ")<br><span class='tooltip-weights'> Current: " + (100 * e[i]).toFixed(2) + "%<br> Target: " + (100 * n[i]).toFixed(2) + "%</span></span></div>"; + }, + }, + colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"], + }; + return t.options && (t.options.theme && delete h.colors, r(h, t.options), !0 === t.options.title && (h.title = { text: a + " Crypto Fund Breakdown" })), h; + } + function H(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function _(t) { + return W.apply(this, arguments); + } + function W() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e) { + var i, a, s, n; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + (i = []), (a = 0); + case 2: + if (!(a < e.length)) { + t.next = 13; + break; + } + return ( + (t.next = 5), + fetch("https://api.iconomi.com/v1/daa/" + e[a] + "/structure").catch(function (t) { + return console.error("Error:", t); + }) + ); + case 5: + return (s = t.sent), (t.next = 8), s.json(); + case 8: + (n = t.sent), i.push({ name: e[a], data: n.values }); + case 10: + a++, (t.next = 2); + break; + case 13: + return t.abrupt("return", i); + case 14: + case "end": + return t.stop(); + } + }, t); + })), + (W = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + H(n, a, s, r, o, "next", t); + } + function o(t) { + H(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function B(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function V(t, e) { + return G.apply(this, arguments); + } + function G() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i) { + var a, s, n; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return (t.next = 2), _(e); + case 2: + return (a = t.sent), (t.next = 5), a; + case 5: + return ( + (s = t.sent), + (n = []), + s.forEach(function (t) { + var e = [], + i = [], + a = [], + s = []; + t.data.forEach(function (t) { + i.push(t.targetWeight), s.push(t.rebalancedWeight), e.push(t.assetName), a.push(t.assetTicker); + }), + n.push({ series: i, labels: e, tickers: a, rebalanced: s }); + }), + t.abrupt("return", n) + ); + case 9: + case "end": + return t.stop(); + } + }, t); + })), + (G = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + B(n, a, s, r, o, "next", t); + } + function o(t) { + B(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function j(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function U() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e) { + var i, a, s, n, r, o; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return ( + (i = null), + (a = []), + (s = null), + (n = null), + e.chart_id && (n = e.chart_id), + e.iconomi_tickers && ((i = e.iconomi_tickers), a.push(i)), + e.custom_data && + ((s = e.custom_data), + (r = []), + s.forEach(function (t) { + r.push(t.name); + }), + a.push(r)), + e.loading_indicator && S(n, e), + (t.next = 10), + V(i, s) + ); + case 10: + (o = t.sent), new l.a(document.querySelector("#" + n), N(e, a, o)).render(), e.loading_indicator && A(document.querySelector(".".concat(n, ".cryptochart_loading")), 2e3); + case 14: + case "end": + return t.stop(); + } + }, t); + })), + (U = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + j(n, a, s, r, o, "next", t); + } + function o(t) { + j(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function q(t, e, i) { + var a = null; + e && (a = [].concat.apply([], e)); + var s = i[0].rebalanced_coin_weights, + n = i[0].current_coin_weights, + o = i[0].coin_names, + l = { + plotOptions: { bar: { horizontal: !0, columnWidth: "70%", barHeight: "70%" } }, + yaxis: { show: !0 }, + xaxis: { + labels: { + show: !0, + formatter: function (t, e, i) { + return t + "%"; + }, + }, + tickAmount: 5, + max: 100, + axisTicks: { show: !0 }, + axisBorder: { show: !0 }, + }, + chart: { id: t.chart_id, type: "bar", stacked: !0, stackType: "100%", toolbar: { show: !1 } }, + grid: { yaxis: { lines: { show: !1 } } }, + series: s, + labels: t.iconomi_tickers, + legend: { position: "top", horizontalAlign: "left", onItemClick: { toggleDataSeries: !1 } }, + dataLabels: { + enabled: !0, + formatter: function (t, e) { + var i = e.seriesIndex; + e.dataPointIndex, e.w; + return n[i].name; + }, + dropShadow: { enabled: !0 }, + }, + tooltip: { + custom: function (t) { + var e = t.series, + i = t.seriesIndex, + a = t.dataPointIndex, + s = (t.w, e[i][a]), + r = n[i].data[a], + l = o.find(function (t) { + return t.cointicker === n[i].name; + }); + return '<div class="arrow_box"><span>' + l.name + " (" + l.cointicker + ")<br><span class='tooltip-weights'> Current: " + (100 * r).toFixed(2) + "%<br> Target: " + (100 * s).toFixed(2) + "%</span></span></div>"; + }, + }, + colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"], + fill: { opacity: 1, type: "gradient", gradient: { shade: "dark", type: "vertical", shadeIntensity: 0.35, gradientToColors: void 0, inverseColors: !1, opacityFrom: 0.95, opacityTo: 0.95, stops: [95, 0, 100] } }, + }; + return t.options && (t.options.theme && delete l.colors, r(l, t.options), !0 === t.options.title && (l.title = { text: a.join(", ") + " Crypto Funds" })), l; + } + function Z(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function $(t, e) { + return J.apply(this, arguments); + } + function J() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e, i) { + var a, s, n, r, o, l, h, c, d; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return ( + (d = function (t) { + var e = []; + return ( + Object.keys(t).forEach(function (i, a) { + var s = {}; + (s.name = i), (s.data = t[i]), e.push(s); + }), + e + ); + }), + (t.next = 3), + _(e) + ); + case 3: + return (a = t.sent), (t.next = 6), a; + case 6: + return ( + (s = t.sent), + (n = []), + (r = []), + (o = []), + s.forEach(function (t) { + var e = []; + t.data.forEach(function (i) { + e.push({ portfolio: t.name, assetName: i.assetName, assetTicker: i.assetTicker, rebalanced: i.rebalancedWeight, weight: i.targetWeight }), + o.push({ name: i.assetName, cointicker: i.assetTicker }); + }), + n.push(e); + }), + n.forEach(function (t, e) { + o.forEach(function (i) { + if ( + !t.some(function (t) { + return t.assetTicker === i.cointicker; + }) + ) { + var a = { portfolio: t[0].portfolio, assetName: i.cointicker, assetTicker: i.cointicker, rebalanced: 0, weight: 0 }; + n[e].push(a); + } + }); + }), + (l = n.flat()), + (h = []), + (c = []), + Object.keys(l).forEach(function (t, e) { + var i = l[t], + a = i.assetTicker, + s = i.assetTicker; + (h[a] = h[a] || []), h[a].push(i.rebalanced), (c[s] = c[s] || []), c[s].push(i.weight); + }), + r.push({ rebalanced_coin_weights: d(h), current_coin_weights: d(c), coin_names: o }), + t.abrupt("return", r) + ); + case 18: + case "end": + return t.stop(); + } + }, t); + })), + (J = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + Z(n, a, s, r, o, "next", t); + } + function o(t) { + Z(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function Q(t, e, i, a, s, n, r) { + try { + var o = t[n](r), + l = o.value; + } catch (t) { + return void i(t); + } + o.done ? e(l) : Promise.resolve(l).then(a, s); + } + function K() { + var t; + return ( + (t = regeneratorRuntime.mark(function t(e) { + var i, a, s, n, r, o; + return regeneratorRuntime.wrap(function (t) { + for (;;) + switch ((t.prev = t.next)) { + case 0: + return ( + (i = null), + (a = []), + (s = null), + (n = null), + e.chart_id && (n = e.chart_id), + e.iconomi_tickers && ((i = e.iconomi_tickers), a.push(i)), + e.custom_data && + ((s = e.custom_data), + (r = []), + s.forEach(function (t) { + r.push(t.name); + }), + a.push(r)), + e.loading_indicator && S(n, e), + (t.next = 10), + $(i, s) + ); + case 10: + (o = t.sent), new l.a(document.querySelector("#" + n), q(e, a, o)).render(), e.loading_indicator && A(document.querySelector(".".concat(n, ".cryptochart_loading")), 2e3); + case 14: + case "end": + return t.stop(); + } + }, t); + })), + (K = function () { + var e = this, + i = arguments; + return new Promise(function (a, s) { + var n = t.apply(e, i); + function r(t) { + Q(n, a, s, r, o, "next", t); + } + function o(t) { + Q(n, a, s, r, o, "throw", t); + } + r(void 0); + }); + }).apply(this, arguments) + ); + } + function tt(t) { + !(function (t) { + L.apply(this, arguments); + })(t); + } + function et(t) { + !(function (t) { + I.apply(this, arguments); + })(t); + } + function it(t) { + !(function (t) { + D.apply(this, arguments); + })(t); + } + function at(t) { + !(function (t) { + U.apply(this, arguments); + })(t); + } + function st(t) { + !(function (t) { + K.apply(this, arguments); + })(t); + } + i.d(e, "roiComparison", function () { + return tt; + }), + i.d(e, "priceHeatmap", function () { + return et; + }), + i.d(e, "priceHistory", function () { + return it; + }), + i.d(e, "cryptoFundPie", function () { + return at; + }), + i.d(e, "cryptoFundBar", function () { + return st; + }); + }, +]); diff --git a/basicswap/templates/404.html b/basicswap/templates/404.html index ccc699c..49ddd9a 100644 --- a/basicswap/templates/404.html +++ b/basicswap/templates/404.html @@ -1,57 +1,50 @@ {% include 'header.html' %} <div class="container mx-auto"> - - <section class="bg-white p-5 mt-5"> - <div class="flex flex-wrap items-center -m-2"> - <div class="w-full md:w-1/2 p-2"> - <ul class="flex flex-wrap items-center gap-x-3 mb-2"> - <li> - <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> - <p>Home</p> - </a> - </li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/404">404</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - </ul> - </div> - </div> - </section> - -{% include 'inc_messages.html' %} - - <section class="relative py-24 md:py-40 bg-white"> - <div class="relative z-10 container px-4 mx-auto"> - <div class="flex flex-wrap items-center -mx-4"> - <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0"> - <div class="md:max-w-xl md:mx-auto text-center md:text-left"> - <span class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full text-sm">Error 404</span> - <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2> - <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p> - <div class="flex flex-wrap"> - <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go back to Homepage</a></div> - <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/refresh">Try Again</a></div> <!-- todo add last URL page visit --> - </div> - </div> - </div> - <div class="w-full md:w-1/3 px-4"> - <img class="mx-auto" src="/static/images/other/what-why.gif" alt=""> + <section class="bg-white p-5 mt-5"> + <div class="flex flex-wrap items-center -m-2"> + <div class="w-full md:w-1/2 p-2"> + <ul class="flex flex-wrap items-center gap-x-3 mb-2"> + <li> + <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> + <p>Home</p> + </a> + </li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/404">404</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + </ul> </div> </div> - </div> -</section> - -</div> -{% include 'footer.html' %} + </section> + {% include 'inc_messages.html' %} + <section class="relative py-24 md:py-40 bg-white"> + <div class="relative z-10 container px-4 mx-auto"> + <div class="flex flex-wrap items-center -mx-4"> + <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0"> + <div class="md:max-w-xl md:mx-auto text-center md:text-left"> <span class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full text-sm">Error 404</span> + <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2> + <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p> + <div class="flex flex-wrap"> + <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go back to Homepage</a></div> + <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/refresh">Try Again</a></div> + <!-- todo add last URL page visit --> + </div> + </div> + </div> + <div class="w-full md:w-1/3 px-4"> <img class="mx-auto" src="/static/images/other/what-why.gif" alt=""> </div> + </div> + </div> + </section> +</div> +{% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/active.html b/basicswap/templates/active.html index 96d7f8e..bcb3f7d 100644 --- a/basicswap/templates/active.html +++ b/basicswap/templates/active.html @@ -1,6 +1,5 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> <div class="w-full md:w-1/2 p-2"> @@ -25,40 +24,31 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Swaps in Progress / Active Swaps</h2> - <p class="font-semibold text-coolGray-200"> - {% if refresh %} - Page Refresh {{ refresh }} seconds - {% endif %} - </p> + <p class="font-semibold text-coolGray-200"> {% if refresh %} Page Refresh {{ refresh }} seconds {% endif %} </p> </div> <div class="w-full md:w-1/2 p-3"> - <a id="refresh" href="/active"><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a> + <a id="refresh" href="/active"> + <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button> + </a> </div> </div> </div> </div> </section> - <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white"> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6"> Bid ID </th> @@ -68,8 +58,7 @@ <th scope="col" class="py-3 px-7"> PTX Status </th> </tr> </thead> - - <tbody> + <tbody> {% for s in active_swaps %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 text-xs monospace"><a href=/bid/{{ s[0] }}>{{ s[0] }}</a></td> @@ -77,9 +66,9 @@ <td class="py-4 px-6">{{ s[2] }}</td> <td class="py-4 px-6">{{ s[3] }}</td> <td class="py-4 px-6">{{ s[4] }}</td> - </tr> - {% endfor %} - </tbody> + </tr> + {% endfor %} + </tbody> </table> </div> </div> @@ -87,11 +76,8 @@ </div> </div> </div> - </section> - </div> {% include 'footer.html' %} </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/automation_strategies.html b/basicswap/templates/automation_strategies.html index d9e39da..e83d344 100644 --- a/basicswap/templates/automation_strategies.html +++ b/basicswap/templates/automation_strategies.html @@ -24,41 +24,32 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategies</h2> <p class="font-semibold text-coolGray-200"></p> </div> <div class="w-full md:w-1/2 p-3"> - <a id="refresh" href="/newautomationstrategy"><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Create New Strategy</button></a> + <a id="refresh" href="/newautomationstrategy"> + <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Create New Strategy</button> + </a> </div> </div> </div> </div> - </section> - -{% include 'inc_messages.html' %} - + </section> {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <form method="post"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Filter</th> @@ -66,45 +57,37 @@ <th scope="col"></th> </tr> </thead> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96"> - Sort by: - </td> + <td class="py-4 px-6 bold w-96"> Sort by: </td> <td class="py-4 bold w-96"> <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_by"> - <option value="created_at"{% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option> + <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option> </select> </td> <td class="py-4 px-6 pr-5"> <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_dir"> - <option value="asc"{% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option> - <option value="desc"{% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option> + <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option> + <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option> </select> </td> </tr> - </table> </div> </div> - <div class="pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5"> <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path> </svg> <span>Page Back</span> </button> </div> - <div class="flex items-center"> <div class="w-full md:w-auto p-1.5"> <p class="text-sm font-heading">Page: {{ filters.page_no }}</p> </div> </div> - <div class="w-full md:w-auto p-1.5"> <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span> <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> @@ -112,62 +95,49 @@ </svg> </button> </div> - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name='clearfilters' value="Clear Filters" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Clear Filters</span> </button> + <button name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" class="nc-icon-wrapper"> + <rect x="2" y="2" width="7" height="7"></rect> + <rect x="15" y="15" width="7" height="7"></rect> + <rect x="2" y="15" width="7" height="7"></rect> + <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline> + </g> + </svg> Clear Filters</button> </div> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Submit</span> </button> - </div> - + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Apply</button> + </div> </div> </div> </div> - <input type="hidden" name="formid" value="{{ form_id }}"> - <input type="hidden" name="pageno" value="{{ filters.page_no }}"> - - </form> - + <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </form> <div class="container px-0 mx-auto mt-10"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Name</th> <th scope="col" class="py-3">Type</th> </tr> - </thead> - + </thead> {% for s in strategies %} <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96"> - <a class="monospace bolder-t" href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a> - </td> - <td class="py-4 pr-5">{{ s[2] }} - </td> - </tr> - {% endfor %} - - </table> + <td class="py-4 px-6 bold w-96"> <a class="monospace bolder-t" href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a> </td> + <td class="py-4 pr-5">{{ s[2] }} </td> + </tr> + {% endfor %} + </table> </div> </div> - </div> </div> </div> </div> - </section> -</div> +</div> {% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/automation_strategy.html b/basicswap/templates/automation_strategy.html index b67d32b..5bffdd7 100644 --- a/basicswap/templates/automation_strategy.html +++ b/basicswap/templates/automation_strategy.html @@ -1,122 +1,97 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> - <div class="flex flex-wrap items-center -m-2"> - <div class="w-full md:w-1/2 p-2"> - <ul class="flex flex-wrap items-center gap-x-3 mb-2"> - <li> - <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> - <p>Home</p> - </a> - </li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">ID: {{ strategy_id }}</a></li> - </ul> - </div> - </div> - </section> - - <section class="py-4"> - <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> - <div class="relative z-20 flex flex-wrap items-center -m-3"> - <div class="w-full md:w-1/2 p-3"> - <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2> - </div> - </div> - </div> - </div> - </section> - -{% include 'inc_messages.html' %} - - <section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full pt-2 text-center "> - - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> - <tr> - <th scope="col" class="py-3 px-6">Option</th> - <th scope="col" class="py-3">Type</th> - <th scope="col"></th> - </tr> - </thead> - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Label</td> - <td>{{ strategy.label }}</td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Type</td> - <td>{{ strategy.type }}</td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Only known identities</td> - <td>{{ strategy.only_known_identities }}</td> - </tr> - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Data</td> - <td class="py-4 pr-5"> - <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly> - {{ strategy.data }} - </textarea> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Notes</td> - <td class="py-4 pr-5"> - <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly> - {{ strategy.note }} - </textarea> - </td> - </tr> - </table> - - </div> + <section class="bg-white p-5 mt-5"> + <div class="flex flex-wrap items-center -m-2"> + <div class="w-full md:w-1/2 p-2"> + <ul class="flex flex-wrap items-center gap-x-3 mb-2"> + <li> + <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> + <p>Home</p> + </a> + </li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">ID: {{ strategy_id }}</a></li> + </ul> </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <a href="/automation" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Back</span> </a> - </div> - + </div> + </section> + <section class="py-4"> + <div class="container px-4 mx-auto"> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative z-20 flex flex-wrap items-center -m-3"> + <div class="w-full md:w-1/2 p-3"> + <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2> </div> </div> - </div> </div> - - </div> </div> - </div> - </div> - - </section> - -</div> + </section> + {% include 'inc_messages.html' %} + <section class="bg-white"> + <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full pt-2 text-center "> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6">Option</th> + <th scope="col" class="py-3">Type</th> + <th scope="col"></th> + </tr> + </thead> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Label</td> + <td>{{ strategy.label }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Type</td> + <td>{{ strategy.type }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Only known identities</td> + <td>{{ strategy.only_known_identities }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Data</td> + <td class="py-4 pr-5"> + <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly>{{ strategy.data }}</textarea> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Notes</td> + <td class="py-4 pr-5"> + <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly>{{ strategy.note }}</textarea> + </td> + </tr> + </table> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <a href="/automation" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> <span>Back</span> </a> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </section> +</div> {% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/automation_strategy_new.html b/basicswap/templates/automation_strategy_new.html index a5123ec..fb0049a 100644 --- a/basicswap/templates/automation_strategy_new.html +++ b/basicswap/templates/automation_strategy_new.html @@ -25,39 +25,28 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> - <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy (todo)</h2> - </div> + <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy (todo)</h2> </div> </div> </div> </div> </section> - {% include 'inc_messages.html' %} - <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full pt-2 text-center "> - - </div> + <div class="w-full pt-2 text-center "> </div> </div> </div> </div> - </section> -</div> +</div> {% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/bid.html b/basicswap/templates/bid.html index 3932174..8b5c2bb 100644 --- a/basicswap/templates/bid.html +++ b/basicswap/templates/bid.html @@ -1,5 +1,4 @@ {% include 'header.html' %} - <div class="container mx-auto"> <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> @@ -26,13 +25,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid @@ -42,62 +37,69 @@ </h2> <p class="font-semibold text-coolGray-200">Bid ID: {{ bid_id }}</p> </div> - <div class="w-full md:w-1/2 p-3"> + <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> {% if refresh %} - <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button></a> - {% else %} - <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a> - {% endif %} + <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff"> + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Refresh {{ refresh }} seconds</span> </a> + {% else %} + <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff"> + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Refresh</span> </a> + {% endif %} </div> </div> </div> </div> - </section> - -{% include 'inc_messages.html' %} - + </section> + {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - - - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> - <th scope="col" class="py-3 px-6">Item</th> - <th scope="col">Data </th> - + <th scope="col" class="py-3 px-6 w-1/3">Details</th> + <th scope="col"></th> </tr> - </thead> - - + </thead> {% if data.was_sent == 'True' %} - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Swap</td> - <td>{{ data.amt_to }} {{ data.ticker_to }} for {{ data.amt_from }} {{ data.ticker_from }}</td> - </tr> - - {% else %} + <td><span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span> for <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span></td> + </tr> {% else %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Swap</td> - <td>{{ data.amt_from }} {{ data.ticker_from }} for {{ data.amt_to }} {{ data.ticker_to }}</td> - </tr> - - {% endif %} - + <td><span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span> for <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span></td> + </tr> {% endif %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Bid Rate</td> <td>{{ data.bid_rate }}</td> </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Coin From (You Send) </td> + <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> + <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}"> + </span> {{ data.coin_from }} </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Coin To (You Get)</td> + <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> + <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}"> + </span> {{ data.coin_to }} </td> + </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Bid State</td> <td>{{ data.bid_state }}</td> @@ -116,22 +118,42 @@ </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Offer</td> - <td><a class="monospace" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td> + <td><a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Address From</td> - <td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td> + <td><a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Proof of Funds</td> <td>{{ data.proof_address }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Created At</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pl-2 bold"> + <div>Created At</div> + </div> + </td> <td>{{ data.created_at }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Expired At</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pl-2 bold"> + <div>Expired At</div> + </div> + </td> <td>{{ data.expired_at }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> @@ -157,7 +179,7 @@ <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Participate Conf</td> <td>{{ data.participate_conf }}</td> - </tr> + </tr> {% if data.show_txns %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Initiate Tx Refund</td> @@ -174,239 +196,228 @@ <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Participate Tx Spend Tx</td> <td class="monospace">{{ data.participate_tx_spend }}</td> - </tr> - {% endif %} - </table> - + </tr> + {% endif %} + </table> </div> </div> - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Old states</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Old states</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Old States</th> <th scope="col">Set at Time</th> - </tr> - </thead> - + </thead> {% for s in old_states %} <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6">{{ s[1] }}</td> - <td>{{ s[0] | formatts }} </td> - </tr> - {% endfor %} - </table> - + <td class="py-3 px-6 w-1/3 bold"> {{ s[1] }}</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pr-2"> + <div>{{ s[0] | formatts }}</div> + </div> + </td> + </tr> + {% endfor %} + </table> </div> - </div> - - - {% if data.events %} - + </div> {% if data.events %} <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Events</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Events</h4> </div> </div> </section> - - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> - <th scope="col" class="py-3 px-6">Time</th> + <th scope="col" class="w-1/3 py-3 px-6 bold">Time</th> <th scope="col">Events</th> - </tr> - </thead> - + </thead> {% for e in data.events %} <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6">{{ e.at | formatts }}</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pl-2 bold"> + <div>{{ e.at | formatts }}</div> + </div> + </td> <td>{{ e.desc }}</td> - </tr> - {% endfor %} - </table> - + </tr> {% endfor %} </table> </div> - </div> + </div> {% else %} - {% endif %} - + {% endif %} <form method="post"> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - + <div class="flex flex-wrap justify-end -m-1.5"> {% if edit_bid %} - - <table> + <table class="mt-1"> <tr> - <td class="bold pr-5">Change Bid State:</td> + <td class="pr-2 bold">Change Bid State:</td> <td> - <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state"> {% for s in data.bid_states %} <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option> - {% endfor %} - </select> + {% endfor %} + </select> + </div> </td> - </tr> - + </tr> {% if data.debug_ui == true %} <tr> - <td class="bold pr-5">Debug Option:</td> + <td class="py-6 pr-2 bold">Debug Option:</td> <td> - <select class="apappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind"> + + +<div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind"> <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option> {% for a in data.debug_options %} - <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option> - {% endfor %} - </select> + <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option> + {% endfor %} + </select> + </div> </td> </tr> - {% endif %} - - </table> - - + {% endif %} + </table> <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Cancel</span> </button> + <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button> </div> - - - - <div class="w-full md:w-auto p-1.5"> - <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Submit Edit Bid</span> </button> - </div> - + <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Submit Edit Bid </button> + </div> {% else %} - - {% if data.show_bidder_seq_diagram %} - <div class="w-full md:w-auto p-1.5"> - <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Hide Bidder Sequence Diagram</span> - </button> - </div> - {% else %} - <div class="w-full md:w-auto p-1.5"> - <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Show Bidder Sequence Diagram</span> - </button> - </div> - {% endif %} - {% if data.show_offerer_seq_diagram %} - <div class="w-full md:w-auto p-1.5"> - <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Hide Offerer Sequence Diagram</span> - </button> - </div> - {% else %} - <div class="w-full md:w-auto p-1.5"> - <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Show Offerer Sequence Diagram</span> - </button> - </div> - {% endif %} - - + {% if data.show_bidder_seq_diagram %} + <div class="w-full md:w-auto p-1.5"> + <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Bidder Sequence Diagram </button> + </div> + {% else %} + <div class="w-full md:w-auto p-1.5"> + <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Bidder Sequence Diagram </button> + </div> + {% endif %} + {% if data.show_offerer_seq_diagram %} + <div class="w-full md:w-auto p-1.5"> + <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Offerer Sequence Diagram </button> + </div> + {% else %} + <div class="w-full md:w-auto p-1.5"> + <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Offerer Sequence Diagram </button> + </div> + {% endif %} {% if data.can_abandon == true %} - <div class="w-full md:w-auto p-1.5"> <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Abandon Bid</span> </button> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Abandon Bid </button> </div> - - {% endif %} - + {% endif %} {% if data.show_txns %} - <div class="w-full md:w-auto p-1.5"> <button name="hide_txns" type="submit" value="Hide Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Hide info</span> </button> - </div> - +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Hide info </button> + </div> {% else %} - <div class="w-full md:w-auto p-1.5"> <button name="show_txns" type="submit" value="Show More Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Show More Info</span> </button> - </div> - +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Show More Info </button> + </div> {% endif %} - <div class="w-full md:w-auto p-1.5"> <button name="edit_bid" type="submit" value="Edit Bid" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Edit bit</span> </button> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Edit bit </button> </div> - {% endif %} - {% if data.was_received == 'True' %} - <div class="w-full md:w-auto p-1.5"> <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Accept Bid</span> </button> - </div> - - {% endif %} - - - - </div> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Accept Bid </button> + </div> + {% endif %} + </div> </div> </div> - - - - <input type="hidden" name="formid" value="{{ form_id }}"> - </form> - - {% if data.show_bidder_seq_diagram %} - <img src="/static/sequence_diagrams/bidder.alt.xu.min.svg" /> + <input type="hidden" name="formid" value="{{ form_id }}"> </form> + {% if data.show_bidder_seq_diagram %} + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">Bidder Sequence Diagram</h4> </div> + </div> + </section> + <section> + <div class="container mx-auto"> + <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10"> + <div class="flex items-center justify-center min-h-screen"> + <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg"> </div> + </div> + </div> + </section> {% endif %} - {% if data.show_offerer_seq_diagram %} - <img src="/static/sequence_diagrams/offerer.alt.xu.min.svg" /> - {% endif %} - + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">Offerer Sequence Diagram</h4> </div> + </div> + </section> + <section> + <div class="container mx-auto"> + <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10"> + <div class="flex items-center justify-center min-h-screen"> + <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg"> </div> + </div> + </div> + </section> + {% endif %} + </div> + </div> </div> </div> - </div> - </div> - </section> - <script> function confirmPopup() { - return confirm("Are you sure?"); + return confirm("Are you sure?"); } </script> - -</div> + </div> {% include 'footer.html' %} </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/bid_xmr.html b/basicswap/templates/bid_xmr.html index 13ec179..fc6c44b 100644 --- a/basicswap/templates/bid_xmr.html +++ b/basicswap/templates/bid_xmr.html @@ -1,5 +1,4 @@ {% include 'header.html' %} - <div class="container mx-auto"> <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> @@ -26,77 +25,82 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid {% if debug_mode == true %} (Debug: bid_xmr template) - {% endif %} - </h2> + {% endif %}</h2> <p class="font-semibold text-coolGray-200">Bid ID: {{ bid_id }}</p> </div> - <div class="w-full md:w-1/2 p-3"> + <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> {% if refresh %} - <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button></a> - {% else %} - <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a> + <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff" > + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Refresh {{ refresh }} seconds</span> </a> + {% else %} + <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff" > + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Refresh</span> </a> {% endif %} </div> </div> </div> </div> </section> - -{% include 'inc_messages.html' %} - + {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> - <th scope="col" class="py-3 px-6">Item</th> - <th scope="col">Data </th> - + <th scope="col" class="py-3 px-6 w-1/3">Details</th> + <th scope="col"></th> </tr> </thead> - {% if data.was_sent == 'True' %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Swap</td> - <td>{{ data.amt_to }} {{ data.ticker_to }} for {{ data.amt_from }} {{ data.ticker_from }}</td> + <td><span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span> for <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span></td> </tr> {% else %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Swap</td> - <td>{{ data.amt_from }} {{ data.ticker_from }} for {{ data.amt_to }} {{ data.ticker_to }}</td> + <td><span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span> for <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span></td> </tr> + {% endif %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Bid Rate</td> <td>{{ data.bid_rate }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Coin From</td> - <td>{{ data.coin_from }}</td> + <td class="py-4 px-6 bold">Coin From (You Send) </td> + <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> + <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}"> + </span> {{ data.coin_from }} </td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Coin To</td> - <td>{{ data.coin_to }}</td> + <td class="py-4 px-6 bold">Coin To (You Get)</td> + <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> + <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}"> + </span> {{ data.coin_to }} </td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Bid State</td> @@ -108,18 +112,38 @@ </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Offer</td> - <td><a class="monospace" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td> + <td><a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Address From</td> - <td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td> + <td><a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Created At</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pl-2 bold"> + <div>Created At</div> + </div> + </td> <td>{{ data.created_at }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Expired At</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pl-2 bold"> + <div>Expired At</div> + </div> + </td> <td>{{ data.expired_at }}</td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> @@ -134,7 +158,7 @@ <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">{{ data.ticker_from }} lock refund tx valid at</td> <td>{{ data.coin_a_lock_refund_tx_est_final | formatts }}</td> - </tr> + </tr> {% if data.coin_a_lock_refund_swipe_tx_est_final != 'None' %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">{{ data.ticker_from }} lock refund tx swipeable at</td> @@ -145,100 +169,94 @@ <td class="py-4 px-6 bold">{{ data.ticker_from }} chain median time</td> <td>{{ data.coin_a_last_median_time | formatts }}</td> </tr> - {% endif %} - </table> - + {% endif %} + </table> </div> </div> - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Old states</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Old states</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Old States</th> <th scope="col">Set at Time</th> - </tr> </thead> - {% for s in old_states %} <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6">{{ s[1] }}</td> - <td>{{ s[0] | formatts }} </td> + <td class="py-3 px-6 w-1/3 bold"> {{ s[1] }}</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pr-2"> + <div>{{ s[0] | formatts }}</div> + </div> + </td> </tr> - {% endfor %} - </table> - + {% endfor %} + </table> </div> </div> - {% if data.events %} - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Events</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Events</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> - <th scope="col" class="py-3 px-6">Time</th> + <th scope="col" class="w-1/3 py-3 px-6 bold">Time</th> <th scope="col">Events</th> - </tr> </thead> - {% for e in data.events %} <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6">{{ e.at | formatts }}</td> + <td scope="row" class="flex items-center px-46 whitespace-nowrap"> + <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> + <div class="py-4 pl-2 bold"> + <div>{{ e.at | formatts }}</div> + </div> + </td> <td>{{ e.desc }}</td> - </tr> - {% endfor %} - </table> - + </tr> {% endfor %} </table> </div> </div> {% else %} {% endif %} - <form method="post"> - {% if data.show_txns %} {% if data.xmr_b_shared_address or data.xmr_b_shared_viewkey or data.xmr_b_half_privatekey %} - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">View keys/Shared Address:</h4> - </div> + <h4 class="font-semibold text-black text-2xl">View keys/Shared Address:</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> - <th scope="col" class="py-3 px-6 w-96">Type</th> + <th scope="col" class="py-3 px-6 w-1/3">Type</th> <th scope="col">Output</th> </tr> </thead> @@ -259,68 +277,61 @@ <td class="py-4 px-6 bold">Key Half:</td> <td class="py-4 monospace">{{ data.xmr_b_half_privatekey }}</td> </tr> - {% endif %} - </table> + {% endif %} + </table> </div> </div> {% endif %} - - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Transactions</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Transactions</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> - <th scope="col" class="py-3 px-6">Tx Type</th> + <th scope="col" class="py-3 px-6 w-1/3">Tx Type</th> <th scope="col">Tx ID</th> <th scope="col">Blocks Deep</th> </tr> </thead> {% for tx in data.txns %} <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6">{{ tx.type }}</td> - <td class="py-4 px-6 monospace">{{ tx.txid }}</td> - <td class="py-4 px-6">{{ tx.confirms }}</td> + <td class="py-4 px-6 bold">{{ tx.type }}</td> + <td class="py-4 monospace">{{ tx.txid }}</td> + <td class="py-4 ">{{ tx.confirms }}</td> </tr> - {% endfor %} - </table> - + {% endfor %} + </table> </div> </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - <table> <tr> <td class="bold pr-5">View Transaction:</td> <td> - - <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="view_tx"> - {% if data.txns|length %} - {% for tx in data.txns %} - <option value="{{ tx.txid }}" {% if data.view_tx_ind==tx.txid %} selected{% endif %}>{{ tx.type }} {{ tx.txid }}</option> - {% endfor %} - {% else %} - <option value="0">None exist yet</option> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="view_tx"> + {% if data.txns|length %} + {% for tx in data.txns %} + <option value="{{ tx.txid }}" {% if data.view_tx_ind==tx.txid %} selected{% endif %}>{{ tx.type }} {{ tx.txid }}</option> + {% endfor %} + {% else %} + <option value="0">None exist yet</option> {% endif %} </select> + </div> </td> </tr> </table> - <div class="w-full md:w-auto p-1.5 ml-2"> <button name="view_tx_submit" value="View Tx" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> @@ -330,7 +341,6 @@ </g> </svg> <span>View Tx</span> </button> </div> - <div class="w-full md:w-auto p-1.5 ml-2"> <button name="view_lock_transfers" value="View Lock Wallet Transfers" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> @@ -340,215 +350,202 @@ </g> </svg> <span>View Lock Wallet Transfers</span> </button> </div> - </div> </div> </div> - {% if data.view_tx_hex %} - - <label for="transfers_view" class="bold block mb-2 text-sm font-medium text-gray-900">{{ data.view_tx_hex }}</label> - <textarea rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="tx_view" readonly> - {{ data.view_tx_desc }} - </textarea> - + <label for="transfers_view" class="bold block mb-2 text-sm font-medium text-gray-900">TX Hex:</label> + <textarea rows="5" class="outline-none mb-10 block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" readonly>{{ data.view_tx_hex }}</textarea> + <textarea rows="15" class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="tx_view" readonly>{{ data.view_tx_desc }}</textarea> {% endif %} - {% if data.lock_transfers %} - <label for="transfers_view" class="bold block mb-2 text-sm font-medium text-gray-900">Lock wallet transfers:</label> - <textarea rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="transfers_view" readonly> - {{ data.lock_transfers }} - </textarea> + <textarea rows="15" class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="transfers_view" readonly>{{ data.lock_transfers }}</textarea> + {% endif %} + {% endif %} + - {% endif %} - {% endif %} {% if data.show_bidder_seq_diagram %} - <img src="/static/sequence_diagrams/xmr.bidder.alt.xu.min.svg" /> - {% endif %} + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">Bidder Sequence Diagram</h4> </div> + </div> + </section> + <section> + <div class="container mx-auto"> + <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10"> + <div class="flex items-center justify-center min-h-screen"> + <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg"> </div> + </div> + </div> + </section> + {% endif %} + {% if data.show_offerer_seq_diagram %} + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">Offerer Sequence Diagram</h4> </div> + </div> + </section> + <section> + <div class="container mx-auto"> + <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10"> + <div class="flex items-center justify-center min-h-screen"> + <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg"> </div> + </div> + </div> + </section> + {% endif %} + - {% if data.show_offerer_seq_diagram %} - <img src="/static/sequence_diagrams/xmr.offerer.alt.xu.min.svg" /> - {% endif %} {% if data.chain_a_lock_tx_inputs %} <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Chain A Lock TX Inputs:</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Chain A Lock TX Inputs:</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> - <th scope="col" class="py-3 px-6">txid</th> - <th scope="col">vout</th> + <th scope="col" class="py-3 px-6 w-1/3">txid</th> + <th scope="col">out</th> <th scope="col">locked</th> </tr> </thead> - {% for txi in data.chain_a_lock_tx_inputs %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6">{{ txi.txid }}</td> - <td class="py-4 px-6 monospace">{{ txi.vout }}</td> - <td class="py-4 px-6">{% if txi.islocked %} true {% else %} false {% endif %}</td> + <td class="py-4 monospace">{{ txi.vout }}</td> + <td class="py-4 ">{% if txi.islocked %} true {% else %} false {% endif %}</td> </tr> - {% endfor %} - - </table> - + {% endfor %} + </table> </div> </div> - {% endif %} - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - {% if edit_bid %} - <table class="mt-1"> <tr> - <td class="bold pr-5 ">Change Bid State:</td> + <td class="pr-2 bold">Change Bid State:</td> <td> - <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state"> {% for s in data.bid_states %} - <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option> - {% endfor %} - </select> + <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option> {% endfor %} </select> + </div> </td> </tr> - {% if data.debug_ui == true %} <tr> - <td class="bold pr-5">Debug Option</td> - <td> - <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind"> - <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">-- None --</option> + <td class="py-6 pr-2 bold"">Debug Option</td> + <td> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind"> + <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option> {% for a in data.debug_options %} <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option> - {% endfor %} - </select> + {% endfor %} + </select> + </div> </td> </tr> <tr> - <td class="bold pr-5">Sweep No-Script TX</td> - <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="kbs_other" name="kbs_other"></td> + <td class="pr-2 bold">Sweep No-Script TX</td> + <td> + + <input class="appearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="kbs_other" name="kbs_other"> + </td> </tr> - {% endif %} - </table> - + {% endif %} + </table> <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Cancel</span> </button> + <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button> </div> - <div class="w-full md:w-auto p-1.5"> - <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Submit Edit Bid</span> </button> - </div> - + <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Submit Edit Bid </button> + </div> {% else %} - - {% if data.show_bidder_seq_diagram %} - <div class="w-full md:w-auto p-1.5"> - <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Hide Bidder Sequence Diagram</span> - </button> - </div> - {% else %} - <div class="w-full md:w-auto p-1.5"> - <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Show Bidder Sequence Diagram</span> - </button> - </div> - {% endif %} - {% if data.show_offerer_seq_diagram %} - <div class="w-full md:w-auto p-1.5"> - <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Hide Offerer Sequence Diagram</span> - </button> - </div> - {% else %} - <div class="w-full md:w-auto p-1.5"> - <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Show Offerer Sequence Diagram</span> - </button> - </div> - {% endif %} - - - {% if data.can_abandon == true %} - + {% if data.show_bidder_seq_diagram %} <div class="w-full md:w-auto p-1.5"> - <button name="abandon_bid" value="Abandon Bid" onclick='return confirmPopup("Abandon");' type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Abandon Bid</span> </button> - </div> - + <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Bidder Sequence Diagram </button> + </div> + {% else %} + <div class="w-full md:w-auto p-1.5"> + <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Bidder Sequence Diagram </button> + </div> + {% endif %} + {% if data.show_offerer_seq_diagram %} + <div class="w-full md:w-auto p-1.5"> + <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Offerer Sequence Diagram </button> + </div> + {% else %} + <div class="w-full md:w-auto p-1.5"> + <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Offerer Sequence Diagram </button> + </div> {% endif %} + {% if data.can_abandon == true %} + <div class="w-full md:w-auto p-1.5"> + <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Abandon Bid </button> + </div> + {% endif %} {% if data.show_txns %} - <div class="w-full md:w-auto p-1.5"> <button name="hide_txns" type="submit" value="Hide Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Hide info</span> </button> - </div> - +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Hide info </button> + </div> {% else %} - <div class="w-full md:w-auto p-1.5"> <button name="show_txns" type="submit" value="Show More Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Show More Info</span> </button> - </div> - +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Show More Info </button> + </div> {% endif %} - <div class="w-full md:w-auto p-1.5"> <button name="edit_bid" type="submit" value="Edit Bid" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Edit bid</span> </button> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Edit bit </button> </div> - {% endif %} - {% if data.was_received == 'True' %} - <div class="w-full md:w-auto p-1.5"> - <button name="accept_bid" value="Accept Bid" onclick='return confirmPopup("Accept");' type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Accept Bid</span> </button> - </div> - - {% endif %} - - </div> + <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> +<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Accept Bid </button> + </div> + {% endif %} + </div> </div> </div> - - <input type="hidden" name="formid" value="{{ form_id }}"> - - - </div> + <input type="hidden" name="formid" value="{{ form_id }}"> </div> </div> </div> - </div> <!-- todo double check --> - + </div> </form> - <script> function confirmPopup(name) { - return confirm(name + " Bid - Are you sure?"); + return confirm(name + " Bid - Are you sure?"); } </script> - </div> {% include 'footer.html' %} </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/bids.html b/basicswap/templates/bids.html index ddab01f..051cd63 100644 --- a/basicswap/templates/bids.html +++ b/basicswap/templates/bids.html @@ -1,7 +1,5 @@ {% include 'header.html' %} - <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> <div class="w-full md:w-1/2 p-2"> @@ -26,13 +24,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</h2> @@ -42,50 +36,39 @@ </div> </div> </section> - -<!-- todo --> - {% if refresh %} + <!-- todo -->{% if refresh %} <p>Page Refresh: {{ refresh }} seconds</p> {% endif %} {% for m in messages %} - <p>{{ m }}</p> - {% endfor %} -<!-- todo --> - + <p>{{ m }}</p> {% endfor %} + <!-- todo --> <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white"> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <form method="post"> - <div class="flex justify-between items-center pb-4 bg-white"> <div class="bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - <div class="flex items-center"> <div class="w-full md:w-auto p-1.5"> <p class="text-sm font-heading bold">Sort By:</p> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> - </path> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> </svg> <select name="sort_by" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time At</option> </select> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> - </path> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> </svg> <select name="sort_dir" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option> @@ -93,39 +76,33 @@ </select> </div> </div> - <div class="flex items-center"> <div class="w-full md:w-auto p-1.5"> <p class="text-sm font-heading bold">State:</p> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> - </path> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> </svg> <select name="state" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> <option value="-1" {% if filters.bid_state_ind==-1 %} selected{% endif %}>Any</option> {% for s in data.bid_states %} <option value="{{ s[0] }}" {% if filters.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option> - {% endfor %} - </select> + {% endfor %} + </select> </div> </div> - <div class="flex items-center"> <div class="w-full md:w-auto p-1.5"> <p class="text-sm font-heading bold">Include Expired:</p> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> - </path> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> </svg> <select name="with_expired" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> <option value="true" {% if filters.with_expired==true %} selected{% endif %}>Include</option> @@ -133,7 +110,6 @@ </select> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> @@ -151,7 +127,6 @@ </svg> <span>Clear</span> </button> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> @@ -165,17 +140,13 @@ </svg> <span>Apply Filters</span> </button> </div> </div> - </div> </div> </div> </div> - - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6"> Time At </th> @@ -187,7 +158,6 @@ <th scope="col" class="py-3 px-6"> PTX Status </th> </tr> </thead> - <tbody> {% for b in bids %} <tr class="bg-white border-t hover:bg-gray-50"> @@ -210,58 +180,42 @@ <td class="py-4 px-6">{{ b[5] }}</td> </tr> </tbody> - {% endfor %} - - </table> - + {% endfor %} + </table> <input type="hidden" name="formid" value="{{ form_id }}"> - <input type="hidden" name="pageno" value="{{ filters.page_no }}"> - - - </div> - </div> - - <div class="pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5"> - <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path> - </svg> <span>Page Back</span> </button> - </div> - - <div class="flex items-center"> - <div class="w-full md:w-auto p-1.5"> - <p class="text-sm font-heading">Page: {{ filters.page_no }}</p> - </div> - </div> - - <div class="w-full md:w-auto p-1.5"> - <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span> - <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> - </svg> - </button> - </div> - + <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </div> + </div> + <div class="pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5"> + <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path> + </svg> <span>Page Back</span> </button> + </div> + <div class="flex items-center"> + <div class="w-full md:w-auto p-1.5"> + <p class="text-sm font-heading">Page: {{ filters.page_no }}</p> + </div> + </div> + <div class="w-full md:w-auto p-1.5"> + <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span> + <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> + </svg> + </button> </div> - </div> </div> - - </form> - - </div> + </div> + </form> </div> </div> </div> - -</section> - + </div> + </section> </div> {% include 'footer.html' %} </body> -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/debug.html b/basicswap/templates/debug.html index c65565a..1c19aff 100644 --- a/basicswap/templates/debug.html +++ b/basicswap/templates/debug.html @@ -1,95 +1,81 @@ {% include 'header.html' %} <div class="container mx-auto"> - - <section class="bg-white p-5 mt-5"> - <div class="flex flex-wrap items-center -m-2"> - <div class="w-full md:w-1/2 p-2"> - <ul class="flex flex-wrap items-center gap-x-3 mb-2"> - <li> - <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> - <p>Home</p> - </a> - </li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/debug">Debug</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - </ul> - </div> - </div> - </section> - - <section class="py-4"> - <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> - <div class="relative z-20 flex flex-wrap items-center -m-3"> - <div class="w-full md:w-1/2 p-3"> - <h2 class="mb-6 text-4xl font-bold text-white tracking-tighte r">Debug</h2> - <p class="font-semibold text-coolGray-200"></p> - </div> + <section class="bg-white p-5 mt-5"> + <div class="flex flex-wrap items-center -m-2"> + <div class="w-full md:w-1/2 p-2"> + <ul class="flex flex-wrap items-center gap-x-3 mb-2"> + <li> + <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> + <p>Home</p> + </a> + </li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/debug">Debug</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + </ul> + </div> </div> - </div> - </div> - </section> - -{% include 'inc_messages.html' %} - - <section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full pt-2"> - - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> - <tr> - <th scope="col" class="py-3 px-6 w-80">Name</th> - <th scope="col" class="py-3">Input</th> - </tr> - </thead> - -<form method="post"> -<tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 pl-5 pr-5 bold">Reinitialise XMR wallet</td> - <td td class="py-4"><input name="reinit_xmr" type="submit" value="Yes" class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-blue-500 text-white border border-coolGray-200 hover:border-coolGray-300"></td> - <input type="hidden" name="formid" value="{{ form_id }}"> -</tr> -</form> -</table> -</div> -</div -</div> -</div> -</div> -</div> - -</section> - -<!-- todo + </section> + <section class="py-4"> + <div class="container px-4 mx-auto"> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative z-20 flex flex-wrap items-center -m-3"> + <div class="w-full md:w-1/2 p-3"> + <h2 class="mb-6 text-4xl font-bold text-white tracking-tighte r">Debug</h2> + <p class="font-semibold text-coolGray-200"></p> + </div> + </div> + </div> + </div> + </section> + {% include 'inc_messages.html' %} + <section class="bg-white"> + <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full pt-2"> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6 w-80">Option</th> + <th scope="col" class="py-3"></th> + </tr> + </thead> + <form method="post"> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 pl-5 pr-5 bold">Reinitialise XMR wallet</td> + <td td class="py-4"> + <button name="reinit_xmr" type="submit" value="Yes" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><polyline points="2.966 1.13 2.237 6.927 7.929 5.341"></polyline><path d="M2.921,18.2a11.006,11.006,0,0,1-1.041-1.9" stroke="#ffffff"></path><path d="M8.461,22.412a11.07,11.07,0,0,1-1.529-.654q-.2-.1-.392-.214" stroke="#ffffff"></path><path d="M15.539,22.41a11.062,11.062,0,0,1-2.06.486" stroke="#ffffff"></path><path d="M21.08,18.206a10.984,10.984,0,0,1-1.438,1.705" stroke="#ffffff"></path><path d="M2.759,6.027A11,11,0,0,1,22.9,13.464"></path></g></svg> Yes </button> + </td> + <input type="hidden" name="formid" value="{{ form_id }}"> </tr> + </form> + </table> + </div> + </div </div> + </div> + </div> + </div> + </section> + <!-- todo {% if result %} <textarea class="monospace" rows="40" cols="160"> {{ result }} </textarea> {% endif %} --> - -</div> + </div> {% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/error.html b/basicswap/templates/error.html index 3760de7..cec7c3e 100644 --- a/basicswap/templates/error.html +++ b/basicswap/templates/error.html @@ -1,11 +1,16 @@ -<!DOCTYPE html><html lang="en"><head> -<meta charset="UTF-8"> -<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png"> -<title>{{ title }}</title> +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png"> + <title>{{ title }}</title> </head> + <body> -<h2>{{ title_str }}</h2> -<p>Info: {{ message_str }}</p> -<p><a href="/">home</a></p> + <h2>{{ title_str }}</h2> + <p>Info: {{ message_str }}</p> + <p><a href="/">home</a></p> </body> -</html> + +</html> \ No newline at end of file diff --git a/basicswap/templates/explorers.html b/basicswap/templates/explorers.html index a645522..fa8a666 100644 --- a/basicswap/templates/explorers.html +++ b/basicswap/templates/explorers.html @@ -24,13 +24,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Explorers</h2> @@ -40,122 +36,87 @@ </div> </div> </section> - -{% include 'inc_messages.html' %} - - <section class="bg-white"> + {% include 'inc_messages.html' %} + <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <form method="post"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Select Explorer</th> <th scope="col">Action</th> </tr> </thead> - <tr class="bg-white border-t"> <td class="py-4 px-6 bold w-96"> - - - - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"name="explorer"> - <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> --> - {% for e in explorers %} - <option value="{{ e[0] }}" {% if explorer==e[0] %} selected{% endif %}>{{ e[1] }}</option> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="explorer"> + <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> -->{% for e in explorers %} + <option value="{{ e[0] }}" {% if explorer==e[0] %} selected{% endif %}>{{ e[1] }}</option> {% endfor %} </select> - </div> - + </div> </td> <td class="py-4 pr-5"> <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="action"> - <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option> - {% for a in actions %} + <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option> {% for a in actions %} <option value="{{ a[0] }}" {% if action==a[0] %} selected{% endif %}>{{ a[1] }}</option> - {% endfor %} - </select> + {% endfor %} + </select> </td> </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold"> - Arguments: - </td> + <td class="py-4 px-6 bold"> Arguments: </td> <td class="py-4 pr-5"> - <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="args" placeholder="Arguments"> - </td> + <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="args" placeholder="Arguments"> </td> </tr> - </table> </div> </div> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Submit</span> </button> - </div> - + <div class="w-full md:w-auto p-1.5 ml-2"> + <button type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Apply</button> + </div> </div> </div> </div> - <input type="hidden" name="formid" value="{{ form_id }}"> - {% if result %} - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Explorer output:</th> </tr> </thead> - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 pl-5 pr-5"> - <textarea class="whitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15"> - {{ result }} - </textarea> + <textarea class="whitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15"> {{ result }} </textarea> </td> </tr> - </table> </div> </div> - {% endif %} - - </form> - + {% endif %} + </form> </div> </div> </div> </div> - </section> </div> - {% include 'footer.html' %} +{% include 'footer.html' %} </div> </body> - </html> \ No newline at end of file diff --git a/basicswap/templates/footer.html b/basicswap/templates/footer.html index 4ed5a8d..3488074 100644 --- a/basicswap/templates/footer.html +++ b/basicswap/templates/footer.html @@ -2,39 +2,32 @@ <div class="container px-4 mx-auto"> <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4"> <div class="w-full md:w-3/4 px-4"> - <a class="block mb-8 max-w-max" href="#"> - <img class="h-8" src="/static/images/logos/basicswap-logo-dark.svg" alt=""> - </a> + <a class="block mb-8 max-w-max" href="#"> <img class="h-8" src="/static/images/logos/basicswap-logo-dark.svg" alt=""> </a> <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6"> <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-dex/basicswap_explained.html" target="_blank">BasicSwap Explained</a></div> <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_installation.html" target="_blank">Tutorials and Guides</a></div> <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Get Support</a></div> </div> </div> - <div class="w-full md:w-1/4 px-4"> - - </div> + <div class="w-full md:w-1/4 px-4"> </div> </div> </div> <div class="border-b border-coolGray-100"></div> <div class="container px-4 mx-auto"> <div class="flex flex-wrap items-center py-12 md:pb-32"> <div class="w-full md:w-1/2 mb-6 md:mb-0"> - <div class="flex items-center"> <div class="flex items-center"> - - <p class="mr-1 text-sm text-gray-90 font-medium ">© 2022~ </p> - <p class="text-sm text-coolGray-400 font-medium">{{ title }}</p> - <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span> - <p class="text-sm text-coolGray-400 font-medium">GUI 0.1.1 </p> - <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span> - <p class="mr-2 text-sm font-bold text-gray-90 ">Made with </p> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g></svg> - <span class="ml-2 text-sm font-bold text-gray-90 ">by TV and CRZ</span> + <p class="mr-1 text-sm text-gray-90 font-medium ">© 2022~ </p> + <p class="text-sm text-coolGray-400 font-medium">{{ title }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span> + <p class="text-sm text-coolGray-400 font-medium">GUI 0.1.2 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span> + <p class="mr-2 text-sm font-bold text-gray-90 ">Made with </p> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round" class="nc-icon-wrapper"> + <path d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path> + </g> + </svg> <span class="ml-2 text-sm font-bold text-gray-90 ">by TV and CRZ</span> </div> </div> - - </div> </div> <div class="w-full md:w-1/2"> <div class="flex flex-wrap md:justify-end -mx-5"> @@ -47,8 +40,7 @@ </div> <div class="px-5"> <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#"> - <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> - </svg> + <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> </svg> </a> </div> </div> @@ -56,4 +48,4 @@ </div> </div> </section> - <script src="/static/js/libs/dd.min.js"></script> \ No newline at end of file +<script src="/static/js/libs/dd.min.js"></script> \ No newline at end of file diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html index 867e018..b6aeef6 100644 --- a/basicswap/templates/header.html +++ b/basicswap/templates/header.html @@ -16,7 +16,6 @@ </head> <body> - <section> <nav class="relative bg-gray-800"> <div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto"> @@ -35,15 +34,14 @@ </li> <li> <a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/offers"> - <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <rect x="3" y="1" width="18" height="22"></rect> - <line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line> - <line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line> - <line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line> - </g> - </svg> - <span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span> </a> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <rect x="3" y="1" width="18" height="22"></rect> + <line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line> + <line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line> + <line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line> + </g> + </svg> <span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span> </a> </li> <li> <a class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" href="/newoffer"> @@ -73,178 +71,170 @@ </svg> </div> </ul> - -<!-- dropdown settings & tools --> - <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100"> - <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton"> - <li> - <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span> - <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle> - <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path> - </g> - </svg> Settings </a> - </li> - {% if debug_mode == true %} - <li> - <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">RPC</span> - <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <rect x="1" y="2" width="22" height="20"></rect> - <line x1="1" y1="6" x2="23" y2="6"></line> - <polyline points=" 5,11 7,13 5,15 " stroke="#6b7280"></polyline> - <line x1="10" y1="15" x2="14" y2="15" stroke="#6b7280"></line> - <line x1="6" y1="2" x2="6" y2="6"></line> - </g> - </svg> RPC Console </a> - </li> - {% endif %} - {% if debug_mode == true %} - <li> - <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span> - <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path> - <path data-cap="butt" d="M5.29,18H4a3,3,0,0,0-3,3v1" stroke="#6b7280"></path> - <path data-cap="butt" d="M8,6.255V5a4,4,0,0,1,4-4h0a4,4,0,0,1,4,4V6.255" stroke="#6b7280"></path> - <line x1="5" y1="14" x2="1" y2="14" stroke="#6b7280"></line> <path data-cap="butt" d="M18.71,10H20a3,3,0,0,0,3-3V6" stroke="#6b7280"></path> - <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path> <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line> - <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path></g></svg> Debug </a> - </li> - {% endif %} - {% if debug_mode == true %} - <li> - <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Explorers</span> - <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line> - <circle cx="10" cy="10" r="8"></circle> - </g> - </svg> Explorers </a> - </li> - {% endif %} - <li> - <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span> - <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path> - <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#6b7280"></rect> - <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path> - <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line> - </g> - </svg> SMSG Addresses </a> - </li> - <li> - <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span> - <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path> - <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle> - </g> - </svg> Watch Outputs <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span> </a> - </li> - {% if debug_mode == true %} - <li> - <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span> - <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line> - <line x1="3" y1="1" x2="7" y2="1" stroke="#6b7280"> </line> - <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#6b7280"></line> - <line x1="17" y1="1" x2="21" y2="1" stroke="#6b7280"></line> - <rect x="6" y="15" width="12" height="4" stroke="#6b7280"></rect> - <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#6b7280"></line> - <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#6b7280"></line> - <line x1="6" y1="11" x2="8" y2="11" stroke="#6b7280"></line> - <line x1="16" y1="11" x2="18" y2="11" stroke="#6b7280"> </line> - <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon> - </g> - </svg> Automation Strategies</a> - </li> - {% endif %} - </ul> - <div class="text-sm text-gray-700"> - <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Shutdown</span> + <!-- dropdown settings & tools --> + <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100"> + <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton"> + <li> + <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span> + <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle> + <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path> + </g> + </svg> Settings </a> + </li> + {% if debug_mode == true %} + <li> + <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">RPC</span> <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line> - <polyline points="18 6 22 10 18 14" stroke="#6b7280"></polyline> - <polyline data-cap="butt" points="13 13 13 17 8 17"></polyline> - <polyline data-cap="butt" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7"></polyline> + <rect x="1" y="2" width="22" height="20"></rect> + <line x1="1" y1="6" x2="23" y2="6"></line> + <polyline points=" 5,11 7,13 5,15 " stroke="#6b7280"></polyline> + <line x1="10" y1="15" x2="14" y2="15" stroke="#6b7280"></line> + <line x1="6" y1="2" x2="6" y2="6"></line> </g> - </svg> Shutdown </a> - </div> + </svg> RPC Console </a> + </li> + {% endif %} + {% if debug_mode == true %} + <li> + <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span> + <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path> + <path data-cap="butt" d="M5.29,18H4a3,3,0,0,0-3,3v1" stroke="#6b7280"></path> + <path data-cap="butt" d="M8,6.255V5a4,4,0,0,1,4-4h0a4,4,0,0,1,4,4V6.255" stroke="#6b7280"></path> + <line x1="5" y1="14" x2="1" y2="14" stroke="#6b7280"></line> + <path data-cap="butt" d="M18.71,10H20a3,3,0,0,0,3-3V6" stroke="#6b7280"></path> + <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path> + <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line> + <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path> + </g> + </svg> Debug </a> + </li> + {% endif %} + {% if debug_mode == true %} + <li> + <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Explorers</span> + <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line> + <circle cx="10" cy="10" r="8"></circle> + </g> + </svg> Explorers </a> + </li> + {% endif %} + <li> + <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span> + <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path> + <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#6b7280"></rect> + <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path> + <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line> + </g> + </svg> SMSG Addresses </a> + </li> + <li> + <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span> + <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path> + <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle> + </g> + </svg> Watch Outputs <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span> </a> + </li> + {% if debug_mode == true %} + <li> + <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span> + <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line> + <line x1="3" y1="1" x2="7" y2="1" stroke="#6b7280"> </line> + <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#6b7280"></line> + <line x1="17" y1="1" x2="21" y2="1" stroke="#6b7280"></line> + <rect x="6" y="15" width="12" height="4" stroke="#6b7280"></rect> + <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#6b7280"></line> + <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#6b7280"></line> + <line x1="6" y1="11" x2="8" y2="11" stroke="#6b7280"></line> + <line x1="16" y1="11" x2="18" y2="11" stroke="#6b7280"> </line> + <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon> + </g> + </svg> Automation Strategies</a> + </li> + {% endif %} + </ul> + <div class="text-sm text-gray-700"> + <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Shutdown</span> + <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line> + <polyline points="18 6 22 10 18 14" stroke="#6b7280"></polyline> + <polyline data-cap="butt" points="13 13 13 17 8 17"></polyline> + <polyline data-cap="butt" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7"></polyline> + </g> + </svg> Shutdown </a> </div> -<!-- dropdown settings & tools --> - - - - -<!-- notifications --> - <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button"> - <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path> - </svg> - <div class="flex relative"> - <!-- Todo --> - <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> - <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div> --> + </div> + <!-- dropdown settings & tools --> + <!-- notifications --> + <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button"> + <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path> + </svg> + <div class="flex relative"> + <!-- Todo --> + <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> + <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div> --></div> + </button> + <!-- Dropdown menu --> + <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow" aria-labelledby="dropdownNotificationButton"> + <div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50 drop-shadow"> Notifications </div> + <div class="divide-y divide-gray-100"> + {% for entry in notifications %} {% if entry[1] == 1 %} + <div class="flex py-3 px-4 hover:bg-gray-100"> + <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div> + <div class="pl-3 w-full"> + <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900"> + NEW NETWORK OFFER</span> + <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-900 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> + <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(37, True) }}</a> + </span></div> + <div class="text-xs text-blue-600">{{ entry[0] }}</div> + </div> </div> - </button> - <!-- Dropdown menu --> - <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow" aria-labelledby="dropdownNotificationButton"> - <div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50 drop-shadow"> Notifications </div> - <div class="divide-y divide-gray-100"> - {% for entry in notifications %} - {% if entry[1] == 1 %} - <div class="flex py-3 px-4 hover:bg-gray-100"> - <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div> - <div class="pl-3 w-full"> - <div class="text-gray-500 text-sm mb-1.5"> - <span class="font-semibold text-gray-900"> - NEW NETWORK OFFER</span><br/> - <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> - <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a> - </span></div> - <div class="text-xs text-blue-600">{{ entry[0] }}</div> - </div> - </div> - {% elif entry[1] == 2 %} - <div class="flex py-3 px-4 hover:bg-gray-100"> - <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/bid_accepted.png" alt="New Accepted"> </div> - <div class="pl-3 w-full"> - - <div class="text-gray-500 text-sm mb-1.5"> - <span class="font-semibold text-gray-900"> - <a href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON OFFER</span><br/> - <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> - <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a> + {% elif entry[1] == 2 %} + <div class="flex py-3 px-4 hover:bg-gray-100"> + <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/bid_accepted.png" alt="New Accepted"> </div> + <div class="pl-3 w-full"> + <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900"> + <a href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON OFFER</span> + <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> + <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(37, True) }}</a> </span></div> - <div class="text-xs text-blue-600">{{ entry[0] }}</div> - </div> + <div class="text-xs text-blue-600">{{ entry[0] }}</div> </div> - {% elif entry[1] == 3 %} - <div class="flex py-3 px-4 hover:bg-gray-100"> - <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div> - <div class="pl-3 w-full"> - <div class="text-gray-500 text-sm mb-1.5"> - <span class="font-semibold text-gray-900"> - BID ACCEPTED</span><br/> - <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> - <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a> + </div> + {% elif entry[1] == 3 %} + <div class="flex py-3 px-4 hover:bg-gray-100"> + <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div> + <div class="pl-3 w-full"> + <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900"> + BID ACCEPTED</span> + <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> + <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(37, True) }}</a> </span></div> - <div class="text-xs text-blue-600">{{ entry[0] }}</div> - </div> + <div class="text-xs text-blue-600">{{ entry[0] }}</div> </div> - {% else %} - <div class="flex py-3 px-4 hover:bg-gray-100"> - <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div> - <div class="pl-3 w-full"> - <div class="text-gray-500 text-sm mb-1.5"> - <span class="font-semibold text-gray-900"> - UNKNOWN EVENT</span><br/> - <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> + </div> + {% else %} + <div class="flex py-3 px-4 hover:bg-gray-100"> + <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div> + <div class="pl-3 w-full"> + <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900"> + UNKNOWN EVENT</span> + <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300"> {{ entry[1] }} <div class="text-xs text-blue-600">{{ entry[0] }}</div> </div> @@ -282,159 +272,113 @@ <circle cx="7" cy="10" r="3" stroke="#2ad167"></circle> <path data-cap="butt" d="M10,10a2,2,0,0,1,4,0" stroke="#2ad167"></path></g> </svg> - <span data-tooltip-target="tooltip-DEV" ></span> </div> <div class="tooltip-arrow" data-popper-arrow></div> - <div id="tooltip-DEV" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"> - <p>Debug mode: Active </p> {% if debug_ui_mode == true %} <p> Debug UI mode: Active </p> {% endif %} - </div> - </li> + <span data-tooltip-target="tooltip-DEV" ></span> </div> + <div class="tooltip-arrow" data-popper-arrow></div> + <div id="tooltip-DEV" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"> + <p>Debug mode: Active </p> {% if debug_ui_mode == true %} + <p> Debug UI mode: Active </p> {% endif %} </div> + </li> </ul> - <!-- dev mode icons on/off --> + <!-- dev mode icons on/off --> {% endif %} - - {% if use_tor_proxy == true %} - <!-- tor --> - <ul class="xl:flex ml-5"> - <li> - <a href="/tor"> + {% if use_tor_proxy == true %} + <!-- tor --> + <ul class="xl:flex ml-5"> + <li> + <a href="/tor"> <div data-tooltip-target="tooltip-TOR" class="flex items-center text-gray-50 hover:text-gray-100 text-sm"> <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" stroke-linejoin="round"> <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#AA70E4"></path> <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></path> - <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path> - </g> - </svg> - </a> - <span data-tooltip-target="tooltip-TOR" ></span> </div> <div class="tooltip-arrow" data-popper-arrow></div> - <div id="tooltip-TOR" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"> - Tor mode: Active{% if tor_established == true %}, Connected{% endif %} - </div> - </li> - </ul> - <!-- tor --> + <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path> + </g> + </svg> + </a> <span data-tooltip-target="tooltip-TOR"></span> </div> + <div class="tooltip-arrow" data-popper-arrow></div> + <div id="tooltip-TOR" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"> Tor mode: Active {% if tor_established == true %} + <br> Tor: Connected{% endif %} </div> + </li> + </ul> + <!-- tor --> {% endif %} -</div> - - -<!-- connected & sync (todo) --> - <div class="flex ml-2 items-center text-gray-50 hover:text-gray-100 text-sm hidden"> - <div class="flex-shrink-0 w-px h-10 bg-gray-600 ml-4 mr-5"></div> - <svg class="text-gray-500 w-5 h-5 mr-4" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#0fe97f" stroke-linejoin="round"> - <g class="nc-loop-ripple-24-icon-o"> - <circle cx="12" cy="12" r="11"></circle> - <circle cx="12" cy="12" r="11" stroke="#0fe97f"></circle> - </g> - <style> - .nc-loop-ripple-24-icon-o { - --animation-duration: 2.2s - } - - .nc-loop-ripple-24-icon-o * { - transform-origin: 50% 50%; - animation: nc-loop-ripple-anim var(--animation-duration) infinite cubic-bezier(.215, .61, .355, 1) - } - - .nc-loop-ripple-24-icon-o:nth-child(2) { - animation-delay: calc(var(--animation-duration)/-2) - } - - @keyframes nc-loop-ripple-anim { - 0% { - opacity: 1; - transform: scale(.2) - } - 100% { - opacity: 0; - transform: scale(1) - } - } - </style> - </g> - </svg> - </div> -<!-- connected & sync (todo) --> - - - <div class="hidden xl:block"> </div> - -<!-- mobile menu --> - <div class="ml-auto flex xl:hidden"> - <button class="navbar-burger flex items-center rounded focus:outline-none"> - <svg class="text-white bg-blue-500 hover:bg-blue-600 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"> - <title>Mobile Menu</title> - <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path> - </svg> - </button> - </div> -<!-- mobile menu --> - - </div> - <div class="hidden xl:block py-5 px-6 bg-gray-50 border-b"> - <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto"> - <ul class="flex items-center"> - <li> - <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/active"> - <svg class="text-gray-100 w-5 h-5 ml-7 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle> - <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline> - <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path> - <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline> - <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path> - </g> - </svg> <span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span> </a> - </li> - <div class="flex-shrink-0 w-px h-10 bg-gray-300 mr-10"></div> - <li> - <a class="flex mr-5 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentoffers"> - <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <circle cx="5" cy="5" r="4"></circle> - <circle cx="19" cy="19" r="4"></circle> - <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#6b7280"></polyline> - <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline> - <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline> - <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline> - </g> - </svg> <span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span> </a> - </li> - <div class="flex-shrink-0 w-px h-10 bg-gray-300 ml-4 mr-10"></div> - <li> - <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/availablebids"> - <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <circle cx="12" cy="12" r="11"></circle> - <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> - </g> - </svg> <span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span> </a> - </li> - <li> - <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/receivedbids"> - <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path> - <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line> - <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline> - </g> - </svg> <span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span> </a> - </li> - <li> - <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentbids"> - <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> - <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path> - <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line> - <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline> - </g> - </svg> <span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span> </a> - </li> - </ul> - </div> - </div> + </div> + <div class="hidden xl:block"> </div> + <!-- mobile menu --> + <div class="ml-auto flex xl:hidden"> + <button class="navbar-burger flex items-center rounded focus:outline-none"> + <svg class="text-white bg-blue-500 hover:bg-blue-600 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"> + <title>Mobile Menu</title> + <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path> + </svg> + </button> + </div> + <!-- mobile menu --> + </div> + <div class="hidden xl:block py-5 px-6 bg-gray-50 border-b"> + <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto"> + <ul class="flex items-center"> + <li> + <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/active"> + <svg class="text-gray-100 w-5 h-5 ml-7 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle> + <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline> + <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path> + <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline> + <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path> + </g> + </svg> <span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span> </a> + </li> + <div class="flex-shrink-0 w-px h-10 bg-gray-300 mr-10"></div> + <li> + <a class="flex mr-5 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentoffers"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="5" cy="5" r="4"></circle> + <circle cx="19" cy="19" r="4"></circle> + <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#6b7280"></polyline> + <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline> + <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline> + <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline> + </g> + </svg> <span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span> </a> + </li> + <div class="flex-shrink-0 w-px h-10 bg-gray-300 ml-4 mr-10"></div> + <li> + <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/availablebids"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline> + </g> + </svg> <span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span> </a> + </li> + <li> + <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/receivedbids"> + <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path> + <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line> + <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline> + </g> + </svg> <span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span> </a> + </li> + <li> + <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentbids"> + <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> + <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path> + <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line> + <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline> + </g> + </svg> <span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span> </a> + </li> + </ul> + </div> + </div> </nav> - -<!-- mobile sidebar --> + <!-- mobile sidebar --> <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50"> <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-10"></div> <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-800 overflow-y-auto"> @@ -546,10 +490,10 @@ </span> <span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span> </a> </li> </ul> - <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium mt-5">Settings</h3> - <ul class="text-sm font-medium"> - <li> - <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3"> + <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium mt-5">Settings</h3> + <ul class="text-sm font-medium"> + <li> + <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3"> <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"> <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round"> <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle> @@ -557,8 +501,8 @@ </g> </svg> </span> <span>Settings</span> </a> - </li> - {% if debug_mode == true %} + </li> + {% if debug_mode == true %} <li> <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/rpc"> <span class="inline-block mr-3"> <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> @@ -574,8 +518,8 @@ </li> {% endif %} {% if debug_mode == true %} - <li> - <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/debug"> <span class="inline-block mr-3"> + <li> + <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/debug"> <span class="inline-block mr-3"> <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round" class="nc-icon-wrapper"> <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path> @@ -585,8 +529,8 @@ <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path> <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line> <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path></g></svg> </span> <span>Debug</span> </a> - </li> - {% endif %} + </li> + {% endif %} {% if debug_mode == true %} <li> <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/explorers"> <span class="inline-block mr-3"> @@ -653,8 +597,8 @@ </svg> </span> <span>TOR</span> </a> </li> - {% endif %} - </ul> + {% endif %} + </ul> <div class="pt-8 text-sm font-medium"> <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/shutdown/{{ shutdown_token }}"> <span class="inline-block mr-3"> <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> @@ -670,37 +614,35 @@ </div> </nav> </div> -<!-- mobile sidebar --> - </section> - + <!-- mobile sidebar --> + </section> {% if ws_url %} <script> - var ws = new WebSocket("{{ ws_url }}"), + var ws = new WebSocket("{{ ws_url }}"), floating_div = document.createElement('div'); - floating_div.classList.add('floatright'); - messages = document.createElement('ul'); - messages.setAttribute('id', 'ul_updates'); - ws.onmessage = function (event) { + floating_div.classList.add('floatright'); + messages = document.createElement('ul'); + messages.setAttribute('id', 'ul_updates'); + ws.onmessage = function(event) { let json = JSON.parse(event.data); - let event_message = 'Unknown event'; if (json['event'] == 'new_offer') { - event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/offer/' + json['offer_id'] + '>New offer</a></div></div></div></div>'; - } else - if (json['event'] == 'new_bid') { - event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/bid/' + json['bid_id'] + '>New bid</a> on offer</div><div class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300" href=/offer/' + json['offer_id'] + '>' + json['offer_id'] + '</a></div></div>'; - } else - if (json['event'] == 'bid_accepted') { - event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"><div class="flex"><div class="text-sm font-normal"><div class="mb-1 text-sm font-semibold text-gray-900"><a href=/bid/' + json['bid_id'] + '>Bid accepted</a></div></div></div></div>'; + event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/offer/' + json['offer_id'] + '>New offer</a></div></div></div></div>'; + } + else + if (json['event'] == 'new_bid') { + event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/bid/' + json['bid_id'] + '>New bid</a> on offer</div><div class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300" href=/offer/' + json['offer_id'] + '>' + json['offer_id'] + '</a></div></div>'; + } + else + if (json['event'] == 'bid_accepted') { + event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"><div class="flex"><div class="text-sm font-normal"><div class="mb-1 text-sm font-semibold text-gray-900"><a href=/bid/' + json['bid_id'] + '>Bid accepted</a></div></div></div></div>'; } - let messages = document.getElementById('ul_updates'), - message = document.createElement('li'); - + message = document.createElement('li'); message.innerHTML = event_message; messages.appendChild(message); - }; - floating_div.appendChild(messages); - document.body.appendChild(floating_div); - </script> - {% endif %} + }; + floating_div.appendChild(messages); + document.body.appendChild(floating_div); + </script> + {% endif %} \ No newline at end of file diff --git a/basicswap/templates/identity.html b/basicswap/templates/identity.html index 4cd59af..0cad1e6 100644 --- a/basicswap/templates/identity.html +++ b/basicswap/templates/identity.html @@ -1,5 +1,4 @@ {% include 'header.html' %} - <div class="container mx-auto"> <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> @@ -26,13 +25,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Identity</h2> @@ -42,33 +37,28 @@ </div> </div> </section> - -{% include 'inc_messages.html' %} - + {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <form method="post"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Item</th> <th scope="col">Data </th> </tr> </thead> - {% if data.show_edit_form %} <tr> <td class="py-4 px-6 bold">Label</td> - <td class="py-4"><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="label" name="label" value="{{ data.label }}"></td> + <td class="py-4"> + <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="label" name="label" value="{{ data.label }}"> + </td> </tr> {% else %} <tr> @@ -76,7 +66,6 @@ <td class="py-4">{{ data.label }}</td> </tr> {% endif %} - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold w-96">Successful Sent Bids</td> <td>{{ data.num_sent_bids_successful }}</td> @@ -101,54 +90,33 @@ <td class="py-4 px-6 bold">Failed Received Bids</td> <td>{{ data.num_recv_bids_failed }}</td> </tr> - </table> </div> </div> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - - {% if data.show_edit_form %} - + {% if data.show_edit_form %} <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Apply</span> </button> + <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Apply</span> </button> </div> - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Cancel</span> </button> + <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Cancel</span> </button> </div> - {% else %} <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="edit" value="edit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Edit</span> </button> + <button name="edit" value="edit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Edit</span> </button> </div> - - {% endif %} - - </div> + {% endif %} </div> </div> </div> - - <input type="hidden" name="formid" value="{{ form_id }}"> - - </form> - + <input type="hidden" name="formid" value="{{ form_id }}"> </form> </div> </div> </div> </div> - </section> - - -</div> -{% include 'footer.html' %} </div> +{% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/inc_messages.html b/basicswap/templates/inc_messages.html index db35f19..8454fd2 100644 --- a/basicswap/templates/inc_messages.html +++ b/basicswap/templates/inc_messages.html @@ -1,5 +1,4 @@ {% for m in messages %} - <section class="py-4" id="messages_{{ m[0] }}" role="alert"> <div class="container px-4 mx-auto"> <div class="p-6 bg-green-100 border border-green-200 rounded-md"> @@ -12,25 +11,22 @@ </svg> </div> <div class="flex-1 p-1"> - <h3 class="font-medium text-sm text-green-900">{{ m[1] }}</h3> - </div> + <h3 class="font-medium text-sm text-green-900">{{ m[1] }}</h3> </div> </div> </div> <div class="w-auto p-2"> - <button type="button" class="ml-auto bg-green-100 text-green-500 rounded-lg focus:ring-0 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#messages_{{ m[0] }}" aria-label="Close"> - <span class="sr-only">Close</span> - <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> + <button type="button" class="ml-auto bg-green-100 text-green-500 rounded-lg focus:ring-0 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#messages_{{ m[0] }}" aria-label="Close"> <span class="sr-only">Close</span> + <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> + </svg> </button> </div> </div> </div> </div> -</section> - -{% endfor %} - +</section> +{% endfor %} {% for m in err_messages %} - <section class="py-4" id="err_messages_{{ m[0] }}" role="alert"> <div class="container px-4 mx-auto"> <div class="p-6 bg-red-100 border border-red-200 rounded-md"> @@ -45,20 +41,18 @@ <div class="flex-1 p-1"> <h3 class="font-medium text-sm text-red-900 error_msg"> <p class="error_msg">Error: {{ m[1] }}</p> - </h3> - </div> + </h3> </div> </div> </div> <div class="w-auto p-2"> - <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#err_messages_{{ m[0] }}" aria-label="Close"> - <span class="sr-only">Close</span> - <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> + <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#err_messages_{{ m[0] }}" aria-label="Close"> <span class="sr-only">Close</span> + <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> </div> </div> </div> </div> -</section> - -{% endfor %} +</section> +{% endfor %} \ No newline at end of file diff --git a/basicswap/templates/index.html b/basicswap/templates/index.html index 805583a..ed55cb3 100644 --- a/basicswap/templates/index.html +++ b/basicswap/templates/index.html @@ -1,40 +1,35 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="py-24 bg-white"> - <div class="container px-4 mx-auto"> - <div class="text-center"> - <div class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full"> - <div class="flex flex-wrap items-center-m-1"> - <div class="w-auto p-1"><a class="text-sm" href="">BasicSwap version: {{ version }}</a></div> - </div> - </div> - <h3 class="mb-10 mx-auto text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter max-w-5xl">Welcome to BasicSwap DEX</h3> - <div class="relative mb-10 mx-auto max-w-max"> - <img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="/static/images/elements/circle-violet.svg" alt=""> - <img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="/static/images/elements/dots-blue.svg" alt=""> - <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="/static/images/gfx/dashboard.png" alt=""> - <img class="relative z-10" src="/static/images/gfx/macbook.png" alt=""> - </div> - <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">Swap cryptocurrencies in a distributed trading environment with <b>no restrictions</b> and <b>no fees.</b></p> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-center -m-1.5"> - <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"> - <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/wallets">Your Wallets</a></span> </button> - </div> - <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"> - <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/offers">Start Trading</a></span> </button> - </div> - <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"> - <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Help (Academy)</a></span> </button> - </div> - </div> - </div> - </div> - </div> - </div> - </section> + <section class="py-24 bg-white"> + <div class="container px-4 mx-auto"> + <div class="text-center"> + <div class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full"> + <div class="flex flex-wrap items-center-m-1"> + <div class="w-auto p-1"><a class="text-sm" href="">BasicSwap version: {{ version }}</a></div> + </div> + </div> + <h3 class="mb-10 mx-auto text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter max-w-5xl">Welcome to BasicSwap DEX</h3> + <div class="relative mb-10 mx-auto max-w-max"> <img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="/static/images/elements/circle-violet.svg" alt=""> <img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="/static/images/elements/dots-blue.svg" alt=""> <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="/static/images/gfx/dashboard.png" alt=""> <img class="relative z-10" src="/static/images/gfx/macbook.png" alt=""> </div> + <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">Swap cryptocurrencies in a distributed trading environment with <b>no restrictions</b> and <b>no fees.</b></p> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-center -m-1.5"> + <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"> + <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/wallets">Your Wallets</a></span> </button> + </div> + <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"> + <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/offers">Start Trading</a></span> </button> + </div> + <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"> + <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Help (Academy)</a></span> </button> + </div> + </div> + </div> + </div> + </div> + </div> + </section> </div> {% include 'footer.html' %} </body> -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/info.html b/basicswap/templates/info.html index 3760de7..cec7c3e 100644 --- a/basicswap/templates/info.html +++ b/basicswap/templates/info.html @@ -1,11 +1,16 @@ -<!DOCTYPE html><html lang="en"><head> -<meta charset="UTF-8"> -<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png"> -<title>{{ title }}</title> +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png"> + <title>{{ title }}</title> </head> + <body> -<h2>{{ title_str }}</h2> -<p>Info: {{ message_str }}</p> -<p><a href="/">home</a></p> + <h2>{{ title_str }}</h2> + <p>Info: {{ message_str }}</p> + <p><a href="/">home</a></p> </body> -</html> + +</html> \ No newline at end of file diff --git a/basicswap/templates/offer.html b/basicswap/templates/offer.html index e2a3c16..8af6767 100644 --- a/basicswap/templates/offer.html +++ b/basicswap/templates/offer.html @@ -1,5 +1,4 @@ {% include 'header.html' %} - <div class="container mx-auto"> <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> @@ -26,269 +25,272 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Offer (normal)</h2> <p class="font-semibold text-coolGray-200">Offer ID: {{ offer_id }}</p> </div> - <div class="w-full md:w-1/2 p-3"> - {% if refresh %} - <a id="refresh" href=/offer/{{ offer_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button></a> + <div class="w-full md:w-1/2 p-3"> {% if refresh %} + <a id="refresh" href=/offer/{{ offer_id }}> + <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button> + </a> {% else %} - <a id="refresh" href=/offer/{{ offer_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a> - {% endif %} + <a id="refresh" href=/offer/{{ offer_id }}> + <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button> + </a> + {% endif %} </div> + </div> + </div> + </div> + </section> + {% include 'inc_messages.html' %} + {% if sent_bid_id %} + <section class="py-4"> + <div class="container px-4 mx-auto"> + <div class="p-6 bg-green-100 border border-green-200 rounded-md"> + <div class="flex flex-wrap justify-between items-center -m-2"> + <div class="flex-1 p-2"> + <div class="flex flex-wrap -m-1"> + <div class="w-auto p-1"> + <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path> + </svg> + </div> + <div class="flex-1 p-1"> + <h3 class="font-medium text-sm text-green-900"><a href="/bid/{{ sent_bid_id }}">Sent Bid {{ sent_bid_id }}</a></h3> </div> + </div> + </div> + <div class="w-auto p-2"> + <a href="#"> + <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#156633"></path> + </svg> + </a> </div> </div> </div> </div> </section> - -{% include 'inc_messages.html' %} - -{% if sent_bid_id %} -<section class="py-4"> - <div class="container px-4 mx-auto"> - <div class="p-6 bg-green-100 border border-green-200 rounded-md"> - <div class="flex flex-wrap justify-between items-center -m-2"> - <div class="flex-1 p-2"> - <div class="flex flex-wrap -m-1"> - <div class="w-auto p-1"> - <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path> - </svg> - </div> - <div class="flex-1 p-1"> - <h3 class="font-medium text-sm text-green-900"><a href="/bid/{{ sent_bid_id }}">Sent Bid {{ sent_bid_id }}</a></h3> - </div> - </div> - </div> - <div class="w-auto p-2"> - <a href="#"> - <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#156633"></path> - </svg> - </a> - </div> - </div> - </div> - </div> -</section> -{% endif %} - -<section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full pt-2"> - - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - -<table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - -<thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> - <tr> - <th scope="col" class="py-3 px-6">Item</th> - <th scope="col">Data</th> - - </tr> -</thead> - -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Offer State</td><td>{{ data.state }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Coin From</td><td>{{ data.coin_from }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Coin To</td><td>{{ data.coin_to }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Amount From</td><td>{{ data.amt_from }} {{ data.tla_from }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Amount To</td><td>{{ data.amt_to }} {{ data.tla_to }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Minimum Bid Amount</td><td>{{ data.amt_bid_min }} {{ data.tla_from }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Rate</td><td>{{ data.rate }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold" title="Total coin-from value of completed bids, that this node is involved in">Amount Swapped</td><td>{{ data.amt_swapped }} {{ data.tla_from }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Amount Variable</td><td>{{ data.amount_negotiable }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Rate Variable</td><td>{{ data.rate_negotiable }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Script Lock Type</td><td>{{ data.lock_type }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Script Lock Value</td><td>{{ data.lock_value }} {{ data.lock_value_hr }}</td></tr> - -{% if data.addr_to == "Public" %} -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Address To</td><td>{{ data.addr_to }}</td></tr> -{% else %} -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Address To</td><td><a class="monospace" href="/identity/{{ data.addr_to }}">{{ data.addr_to }}</a> {{ data.addr_to_label }}</td></tr> -{% endif %} - -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Address From</td><td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Created At</td><td>{{ data.created_at | formatts }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Expired At</td><td>{{ data.expired_at | formatts }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Sent</td><td>{{ data.sent }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Revoked</td><td>{{ data.was_revoked }}</td></tr> - -{% if data.sent == 'True' %} -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Auto Accept Strategy</td><td> -{% if data.automation_strat_id == -1 %} -None -{% else %} -<a class="monospace" href="/automationstrategy/{{ data.automation_strat_id }}">{{ data.automation_strat_label }}</a> -{% endif %} -</td></tr> -{% endif %} - -{% if data.xmr_type == true %} -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Chain A offer fee rate</td><td>{{ data.a_fee_rate }}</td></tr> -<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Chain A local fee rate</td><td>{{ data.a_fee_rate_verify }}, fee source: {{ data.a_fee_rate_verify_src }} {% if data.a_fee_warn == true %} WARNING {% endif %}</td></tr> -{% endif %} - -</table> -</div> -</div> - -<section class="bg-white p-6"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Bids</h4> - </div> - </div> -</section> - -<div class="container px-0 mx-auto mt-5"> -<div class="overflow-x-auto relative border sm:rounded-lg"> - -<table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - -<thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> -<tr> -<th scope="col" class="py-3 px-6">Bid ID</th> -<th scope="col" class="py-3 px-6">Bid Amount</th> -<th scope="col" class="py-3 px-6">Bid Rate</th> -<th scope="col" class="py-3 px-6">Bid Status</th> -<th scope="col" class="py-3 px-6">Identity From</th> - -</tr> -</thead> - -{% for b in bids %} -<tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6"><a class="monospace" href=/bid/{{ b[0] }}>{{ b[0] }}</a></td> - <td class="py-4 px-6">{{ b[1] }}</td> - <td class="py-4 px-6">{{ b[3] }}</td> - <td class="py-4 px-6">{{ b[2] }}</td> - <td class="py-4 px-6"><a class="monospace" href=/identity/{{ b[4] }}>{{ b[4] }}</a></td> -</tr> -{% endfor %} -</table> - -</div> -</div> - -<form method="post"> - -{% if data.show_bid_form %} - -<section class="bg-white p-6"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">New Bid</h4> - </div> - </div> -</section> - -<div class="container px-0 mx-auto mt-5"> -<div class="overflow-x-auto relative border sm:rounded-lg"> - -<table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> - <tr> - <th scope="col" class="py-3 px-6">Input</th> - <th scope="col" class="">Output</th> - - </tr> - </thead> - - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6">You will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}</td> - <td class="py-4">And receive <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }} - {% if data.xmr_type == true %} - (excluding {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees). - {% else %} - (excluding a tx fee). - {% endif %}</td> - </tr> - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-10 px-6 bold">Send From Address</td> -<td> - - -<select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addr_from"> -{% for a in addrs %} -<option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option> -{% endfor %} -<option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option> -</select> - -</td> -</tr> - -{% if data.amount_negotiable == true %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Amount</td> - <td class="py-4 px-6"><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');"></td> -</tr> -{% endif %} - -{% if data.rate_negotiable == true %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Rate</td> - <td class="py-4"><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');"></td> -</tr> -{% endif %} - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Minutes valid</td> - <td class="py-4"><input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="validmins" min="10" max="1440" value="{{ data.nb_validmins }}"> - </td> -</tr> - -{% if data.debug_ui == true %} - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Debug Option:</td> - <td class="py-4"> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="debugind"> -<option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option> -{% for a in data.debug_options %} -<option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option> -{% endfor %} -</select> -</td> -</tr> -{% endif %} - -</table> - -</div> -</div> - -<div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Send Bid</span> </button> - </div> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Cancel</span> </button> - </div> - - <!-- TODO: + {% endif %} + <section class="bg-white"> + <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full pt-2"> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6">Item</th> + <th scope="col">Data</th> + </tr> + </thead> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Offer State</td> + <td>{{ data.state }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Coin From</td> + <td>{{ data.coin_from }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Coin To</td> + <td>{{ data.coin_to }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Amount From</td> + <td>{{ data.amt_from }} {{ data.tla_from }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Amount To</td> + <td>{{ data.amt_to }} {{ data.tla_to }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Minimum Bid Amount</td> + <td>{{ data.amt_bid_min }} {{ data.tla_from }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Rate</td> + <td>{{ data.rate }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold" title="Total coin-from value of completed bids, that this node is involved in">Amount Swapped</td> + <td>{{ data.amt_swapped }} {{ data.tla_from }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Amount Variable</td> + <td>{{ data.amount_negotiable }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Rate Variable</td> + <td>{{ data.rate_negotiable }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Script Lock Type</td> + <td>{{ data.lock_type }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Script Lock Value</td> + <td>{{ data.lock_value }} {{ data.lock_value_hr }}</td> + </tr> {% if data.addr_to == "Public" %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Address To</td> + <td>{{ data.addr_to }}</td> + </tr> {% else %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Address To</td> + <td><a class="monospace" href="/identity/{{ data.addr_to }}">{{ data.addr_to }}</a> {{ data.addr_to_label }}</td> + </tr> {% endif %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Address From</td> + <td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Created At</td> + <td>{{ data.created_at | formatts }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Expired At</td> + <td>{{ data.expired_at | formatts }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Sent</td> + <td>{{ data.sent }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Revoked</td> + <td>{{ data.was_revoked }}</td> + </tr> + {% if data.sent == 'True' %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Auto Accept Strategy</td> + <td> + {% if data.automation_strat_id == -1 %} None {% else %}<a class="monospace" href="/automationstrategy/{{ data.automation_strat_id }}">{{ data.automation_strat_label }}</a> {% endif %} + </td> + </tr> + {% endif %} + {% if data.xmr_type == true %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Chain A offer fee rate</td> + <td>{{ data.a_fee_rate }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Chain A local fee rate</td> + <td>{{ data.a_fee_rate_verify }}, fee source: {{ data.a_fee_rate_verify_src }} {% if data.a_fee_warn == true %} WARNING {% endif %}</td> + </tr> {% endif %} </table> + </div> + </div> + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">Bids</h4> </div> + </div> + </section> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6">Bid ID</th> + <th scope="col" class="py-3 px-6">Bid Amount</th> + <th scope="col" class="py-3 px-6">Bid Rate</th> + <th scope="col" class="py-3 px-6">Bid Status</th> + <th scope="col" class="py-3 px-6">Identity From</th> + </tr> + </thead> + {% for b in bids %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6"><a class="monospace" href=/bid/{{ b[0] }}>{{ b[0] }}</a></td> + <td class="py-4 px-6">{{ b[1] }}</td> + <td class="py-4 px-6">{{ b[3] }}</td> + <td class="py-4 px-6">{{ b[2] }}</td> + <td class="py-4 px-6"><a class="monospace" href=/identity/{{ b[4] }}>{{ b[4] }}</a></td> + </tr> + {% endfor %} + </table> + </div> + </div> + <form method="post"> + {% if data.show_bid_form %} + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">New Bid</h4> </div> + </div> + </section> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6">Input</th> + <th scope="col" class="">Output</th> + </tr> + </thead> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6">You will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}</td> + <td class="py-4">And receive <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }} {% if data.xmr_type == true %} (excluding {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees). {% else %} (excluding a tx fee). {% endif %}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-10 px-6 bold">Send From Address</td> + <td> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addr_from"> {% for a in addrs %} + <option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option> {% endfor %} + <option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option> + </select> + </td> + </tr> + {% if data.amount_negotiable == true %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Amount</td> + <td class="py-4 px-6"> + <input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');"> + </td> + </tr> + {% endif %} + {% if data.rate_negotiable == true %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Rate</td> + <td class="py-4"> + <input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');"> + </td> + </tr> + {% endif %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Minutes valid</td> + <td class="py-4"> + <input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="validmins" min="10" max="1440" value="{{ data.nb_validmins }}"> </td> + </tr> + {% if data.debug_ui == true %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Debug Option:</td> + <td class="py-4"> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="debugind"> + <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option> + {% for a in data.debug_options %} + <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option> + {% endfor %} + </select> + </td> + </tr> + {% endif %} + </table> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Send Bid</span> </button> + </div> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Cancel</span> </button> + </div> + <!-- TODO: <div class="w-full md:w-auto p-1.5 ml-2"> <button name="check_rates" value="Lookup Rates" type="button" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> @@ -298,42 +300,27 @@ None </g> </svg> <span>Lookup Rates</span> </button> </div> - --> - -</div> -</div> -</div> - -{% else %} - -<div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - -<div class="w-full md:w-auto p-1.5 ml-2"> - <button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>New Bid</span> </button> -</div> - - -{% if data.sent == 'True' %} - -<div class="w-full md:w-auto p-1.5 ml-2"> - <button name="repeat_offer" value="Repeat Offer" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Repeat Offer</span> </button> -</div> - -{% if data.was_revoked != true %} - -<div class="w-full md:w-auto p-1.5 ml-2"> - <button name="revoke_offer" value="Revoke Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Revoke Offer</span> </button> -</div> - -{% endif %} -{% endif %} - -<!-- todo + --></div> + </div> + </div> + {% else %} + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>New Bid</span> </button> + </div> + {% if data.sent == 'True' %} + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="repeat_offer" value="Repeat Offer" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Repeat Offer</span> </button> + </div> + {% if data.was_revoked != true %} + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="revoke_offer" value="Revoke Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Revoke Offer</span> </button> + </div> + {% endif %} + {% endif %} + <!-- todo <div class="w-full md:w-auto p-1.5 ml-2"> <button name="check_rates" type="button" value="Lookup Rates" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> @@ -343,103 +330,86 @@ None </g> </svg> <span>Lookup Rates</span> </button> </div> ---> - -</div> -</div> -</div> - -{% endif %} - -<input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}"> -<input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}"> -<input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}"> -<input type="hidden" id="rate_var" value="{{ data.rate_negotiable }}"> -<input type="hidden" id="amount_from" value="{{ data.amt_from }}"> -<input type="hidden" id="offer_rate" value="{{ data.rate }}"> -<input type="hidden" name="formid" value="{{ form_id }}"> -</form> - -<p id="rates_display"></p> - -</div> -</div> -</div> -</div> - -</section> - -<script> -const xhr_rates = new XMLHttpRequest(); -xhr_rates.onload = () => { - if (xhr_rates.status == 200) { +--></div> + </div> + </div> + {% endif %} + <input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}"> + <input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}"> + <input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}"> + <input type="hidden" id="rate_var" value="{{ data.rate_negotiable }}"> + <input type="hidden" id="amount_from" value="{{ data.amt_from }}"> + <input type="hidden" id="offer_rate" value="{{ data.rate }}"> + <input type="hidden" name="formid" value="{{ form_id }}"> </form> + <p id="rates_display"></p> + </div> + </div> + </div> + </div> + </section> + <script> + const xhr_rates = new XMLHttpRequest(); + xhr_rates.onload = () => { + if (xhr_rates.status == 200) { const obj = JSON.parse(xhr_rates.response); - inner_html = '<h4 class="bold>Rates</h4><pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>'; document.getElementById('rates_display').innerHTML = inner_html; + } } -} -function lookup_rates() { - const coin_from = document.getElementById('coin_from').value; - const coin_to = document.getElementById('coin_to').value; - - if (coin_from == '-1' || coin_to == '-1') { + function lookup_rates() { + const coin_from = document.getElementById('coin_from').value; + const coin_to = document.getElementById('coin_to').value; + if (coin_from == '-1' || coin_to == '-1') { alert('Coins from and to must be set first.'); return; + } + inner_html = '<h4>Rates</h4><p>Updating...</p>'; + document.getElementById('rates_display').innerHTML = inner_html; + xhr_rates.open('POST', '/json/rates'); + xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr_rates.send('coin_from=' + coin_from + '&coin_to=' + coin_to); } - - inner_html = '<h4>Rates</h4><p>Updating...</p>'; - document.getElementById('rates_display').innerHTML = inner_html; - - xhr_rates.open('POST', '/json/rates'); - xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xhr_rates.send('coin_from='+coin_from+'&coin_to='+coin_to); -} - -const xhr_bid_params = new XMLHttpRequest(); -xhr_bid_params.onload = () => { - if (xhr_bid_params.status == 200) { + const xhr_bid_params = new XMLHttpRequest(); + xhr_bid_params.onload = () => { + if (xhr_bid_params.status == 200) { const obj = JSON.parse(xhr_bid_params.response); document.getElementById('bid_amt_to').innerHTML = obj['amount_to']; + } } -} -function updateBidParams(value_changed) { - const coin_from = document.getElementById('coin_from').value; - const coin_to = document.getElementById('coin_to').value; - const amt_var = document.getElementById('amt_var').value; - const rate_var = document.getElementById('rate_var').value; - - let amt_from = ''; - let rate = ''; - if (amt_var == 'True') { + function updateBidParams(value_changed) { + const coin_from = document.getElementById('coin_from').value; + const coin_to = document.getElementById('coin_to').value; + const amt_var = document.getElementById('amt_var').value; + const rate_var = document.getElementById('rate_var').value; + let amt_from = ''; + let rate = ''; + if (amt_var == 'True') { amt_from = document.getElementById('bid_amount').value; - } else { + } + else { amt_from = document.getElementById('amount_from').value; - } - if (rate_var == 'True') { + } + if (rate_var == 'True') { rate = document.getElementById('bid_rate').value; - } else { + } + else { rate = document.getElementById('offer_rate').value; - } - - if (value_changed == 'amount') { + } + if (value_changed == 'amount') { document.getElementById('bid_amt_from').innerHTML = amt_from; + } + xhr_bid_params.open('POST', '/json/rate'); + xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr_bid_params.send('coin_from=' + coin_from + '&coin_to=' + coin_to + '&rate=' + rate + '&amt_from=' + amt_from); } - xhr_bid_params.open('POST', '/json/rate'); - xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xhr_bid_params.send('coin_from='+coin_from+'&coin_to='+coin_to+'&rate='+rate+'&amt_from='+amt_from); -} - -function confirmPopup() { - return confirm("Are you sure?"); -} - -</script> - + function confirmPopup() { + return confirm("Are you sure?"); + } + </script> </div> {% include 'footer.html' %} </body> -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/offer_confirm.html b/basicswap/templates/offer_confirm.html index 76c3cd4..2fdd2d8 100644 --- a/basicswap/templates/offer_confirm.html +++ b/basicswap/templates/offer_confirm.html @@ -1,686 +1,624 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> - <div class="flex flex-wrap items-center -m-2"> - <div class="w-full md:w-1/2 p-2"> - <ul class="flex flex-wrap items-center gap-x-3 mb-2"> - <li> - <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> - <p>Home</p> - </a> - </li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Confirm your offer information</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - </ul> - </div> - </div> - </section> - - <section class="py-4"> - <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> - <div class="relative z-20 flex flex-wrap items-center -m-3"> - <div class="w-full md:w-1/2 p-3"> - <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Confirm your offer information</h2> - <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p> - </div> - </div> - </div> - </div> - </section <section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md"> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full p-2"> - -{% include 'inc_messages.html' %} - - <div class="p-5 mb-10"> - <div class="mx-4 p-4"> - <div class="flex items-center"> - <div class="flex items-center text-teal-600 relative"> - <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6"><polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div> - </div> - <div class="flex-auto border-t-2 border-blue-500"></div> - <div class="flex items-center text-teal-600 relative"> - <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6"> - <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div> - </div> - <div class="flex-auto border-t-2 border-blue-500"></div> - <div class="flex items-center text-gray-500 relative"> - <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6" > - <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#3b82f6"></polygon> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div> - </div> - </div> - </div> - </div> - - <form method="post"> - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Select network</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line> - <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line> - <circle cx="5" cy="12" r="3"></circle> - <circle cx="19" cy="4" r="3"></circle> - <circle cx="19" cy="20" r="3"></circle> - </g> + <section class="bg-white p-5 mt-5"> + <div class="flex flex-wrap items-center -m-2"> + <div class="w-full md:w-1/2 p-2"> + <ul class="flex flex-wrap items-center gap-x-3 mb-2"> + <li> + <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> + <p>Home</p> + </a> + </li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_to" disabled> - <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option> - {% for a in addrs_to %} - <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}" class="">{{ a[0] }} {{ a[1] }}</option> - {% endfor %} - </select> - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Select address</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <title>contacts 2</title> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path> - <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect> - <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path> - <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line> - </g> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_from" disabled> - {% for a in addrs %} - <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> - {% endfor %} - <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option> - </select> - </div> - </div> - </div> - </div> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Confirm your offer information</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + </ul> + </div> + </div> + </section> + <section class="py-4"> + <div class="container px-4 mx-auto"> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative z-20 flex flex-wrap items-center -m-3"> + <div class="w-full md:w-1/2 p-3"> + <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Confirm your offer information</h2> + <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p> + </div> + </div> + </div> + </div> + </section <section class="bg-white"> + <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md"> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full p-2"> + {% include 'inc_messages.html' %} + <div class="p-5 mb-10"> + <div class="mx-4 p-4"> + <div class="flex items-center"> + <div class="flex items-center text-teal-600 relative"> + <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div> + </div> + <div class="flex-auto border-t-2 border-blue-500"></div> + <div class="flex items-center text-teal-600 relative"> + <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div> + </div> + <div class="flex-auto border-t-2 border-blue-500"></div> + <div class="flex items-center text-gray-500 relative"> + <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#3b82f6"></polygon> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div> + </div> + </div> + </div> + </div> + <form method="post"> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Select network</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line> + <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line> + <circle cx="5" cy="12" r="3"></circle> + <circle cx="19" cy="4" r="3"></circle> + <circle cx="19" cy="20" r="3"></circle> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_to" disabled> + <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option> + {% for a in addrs_to %} + <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}" class="">{{ a[0] }} {{ a[1] }}</option> + {% endfor %} + </select> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Select address</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <title>contacts 2</title> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path> + <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect> + <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path> + <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_from" disabled> + {% for a in addrs %} + <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> + {% endfor %} + <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option> + </select> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">You Send</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled> + <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> + {% for c in coins_from %} + <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> + {% endfor %} + </select> + </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> </div> + </div> + {% if data.swap_style == 'xmr' %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate From</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_from" value="{{ data.from_fee_override }}" readonly> </div> <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.from_fee_src }}</span> </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_from_extra_" disabled> + <option value="0">None</option> + <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> + <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> + <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> + </select> + </div> <span class="text-sm mt-2 block"><b>Lock Tx Spend Fee:</b> {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span> </div> + {% endif %} + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">You Get</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled> + <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> + {% for c in coins %} + <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> + {% endfor %} + </select> + </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> </div> + </div> + {% if data.swap_style == 'xmr' %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_to_conf }}" readonly> </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate To</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_to" value="{{ data.to_fee_override }}" readonly> </div> <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.to_fee_src }}</span> </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra_" disabled> + <option value="0">None</option> + <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> + <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> + <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> + </select> + </div> + </div> + {% endif %} + {% if data.swap_style == 'xmr' and coin_to != '6' %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra" disabled> + <option value="0">None</option> + <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> + <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> + <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> + </select> + </div> + </div> + {% endif %} + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> + <polyline points="3,23 3,19 15,19 15,23 "></polyline> + <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line> + <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line> + <line x1="1" y1="23" x2="17" y2="23"></line> + <line x1="17" y1="9" x2="23" y2="15"></line> + </g> + </svg> + </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path> + <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path> + <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path> + <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly> </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Time</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}" readonly> </div> + </div> + {% if data.debug_ui == true %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}" readonly> </div> + {% if data.swap_style != 'xmr' %} + <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> + {% endif %} + </div> + {% else %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}" readonly> </div> + {% if data.swap_style != 'xmr' %} + <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> + {% endif %} + </div> + {% endif %} + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle> + <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon> + <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon> + <polygon points="5 6 2 4 5 2 5 6"></polygon> + <line x1="5" y1="4" x2="9" y2="4"></line> + <polygon points="19 18 22 20 19 22 19 18"></polygon> + <line x1="19" y1="20" x2="15" y2="20"></line> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="automation_strat_id" disabled> + <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option> + {% for a in automation_strategies %} + <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option> + {% endfor %} + </select> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Options</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="form-check form-check-inline"> + <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled> + <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label> + </div> + <div class="form-check form-check-inline"> + <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled> + <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label> + </div> + </div> + </div> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5"> + <button name="step2" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g fill="#556987"> + <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Back</span> </button> + </div> + <div class="w-full md:w-auto p-1.5"> + <button name="submit_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline> + </g> + </svg> <span>Confirm Offer</span> </button> + </div> + </div> + </div> + </div> + <input type="hidden" name="formid" value="{{ form_id }}"> + <input type="hidden" name="addr_to" value="{{ data.addr_to }}"> + <input type="hidden" name="addr_from" value="{{ data.addr_from }}"> + <input type="hidden" name="coin_from" value="{{ data.coin_from }}"> + <input type="hidden" name="fee_from_extra" value="{{ data.fee_from_extra }}"> + <input type="hidden" name="coin_to" value="{{ data.coin_to }}"> + <input type="hidden" name="fee_to_extra" value="{{ data.fee_to_extra }}"> + {% if data.automation_strat_id != -1 %} + <input type="hidden" name="automation_strat_id" value="{{ data.automation_strat_id }}"> + {% endif %} + {% if data.amt_var==true %} + <input type="hidden" name="amt_var" value="av"> + {% endif %} + {% if data.rate_var==true %} + <input type="hidden" name="rate_var" value="rv"> + {% endif %} + </form> + <script src="static/js/new_offer.js"></script> + </div> </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">You Send</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled> - <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> - {% for c in coins_from %} - <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> - {% endfor %} - </select> - </div> - </div> - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> - </div> - </div> - - {% if data.swap_style == 'xmr' %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> - </div> - </div> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate From</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_from" value="{{ data.from_fee_override }}" readonly> - </div> - <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.from_fee_src }}</span> - </div> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_from_extra_" disabled> - <option value="0">None</option> - <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> - <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> - <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> - </select> - </div> - <span class="text-sm mt-2 block"><b>Lock Tx Spend Fee:</b> {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span> - </div> - - {% endif %} - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">You Get</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled> - <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> - {% for c in coins %} - <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> - {% endfor %} - </select> - </div> - </div> - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> - </div> - </div> - - {% if data.swap_style == 'xmr' %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_to_conf }}" readonly> - </div> - </div> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate To</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_to" value="{{ data.to_fee_override }}" readonly> - </div> - <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.to_fee_src }}</span> - </div> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra_" disabled> - <option value="0">None</option> - <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> - <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> - <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> - </select> - </div> - </div> - - {% endif %} - - {% if data.swap_style == 'xmr' and coin_to != '6' %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> - </div> - </div> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra" disabled> - <option value="0">None</option> - <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> - <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> - <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> - </select> - </div> - </div> - {% endif %} - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> - <polyline points="3,23 3,19 15,19 15,23 "></polyline> - <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line> - <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line> - <line x1="1" y1="23" x2="17" y2="23"></line> - <line x1="17" y1="9" x2="23" y2="15"></line> - </g> - </svg> - </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> - </div> - </div> - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g fill="#3b82f6" > - <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path> - <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path> - <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path> - <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Time</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}" readonly> - </div> - </div> - - {% if data.debug_ui == true %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}" readonly> - </div> - {% if data.swap_style != 'xmr' %} - <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> - {% endif %} - </div> - - {% else %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}" readonly> - - </div> - {% if data.swap_style != 'xmr' %} - <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> - {% endif %} - </div> - - {% endif %} - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle> - <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon> - <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon> - <polygon points="5 6 2 4 5 2 5 6"></polygon> - <line x1="5" y1="4" x2="9" y2="4"></line> - <polygon points="19 18 22 20 19 22 19 18"></polygon> - <line x1="19" y1="20" x2="15" y2="20"></line> - </g> - </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="automation_strat_id" disabled> - <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option> - {% for a in automation_strategies %} - <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option> - {% endfor %} - </select> - </div> - </div> - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Options</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="form-check form-check-inline"> - <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled> - <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label> - </div> - <div class="form-check form-check-inline"> - <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled> - <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label> - </div> - </div> - </div> - </div> - </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5"> - <button name="step2" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g fill="#556987"> - <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> - <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> - </g> - </svg> <span>Back</span> </button> - </div> - - <div class="w-full md:w-auto p-1.5"> - <button name="submit_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"> - <circle cx="12" cy="12" r="11"></circle> - <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline> - </g> - </svg> <span>Confirm Offer</span> </button> - </div> - </div> - </div> - </div> - - <input type="hidden" name="formid" value="{{ form_id }}"> - <input type="hidden" name="addr_to" value="{{ data.addr_to }}"> - <input type="hidden" name="addr_from" value="{{ data.addr_from }}"> - <input type="hidden" name="coin_from" value="{{ data.coin_from }}"> - <input type="hidden" name="fee_from_extra" value="{{ data.fee_from_extra }}"> - <input type="hidden" name="coin_to" value="{{ data.coin_to }}"> - <input type="hidden" name="fee_to_extra" value="{{ data.fee_to_extra }}"> - {% if data.automation_strat_id != -1 %} - <input type="hidden" name="automation_strat_id" value="{{ data.automation_strat_id }}"> - {% endif %} - {% if data.amt_var==true %} - <input type="hidden" name="amt_var" value="av"> - {% endif %} - {% if data.rate_var==true %} - <input type="hidden" name="rate_var" value="rv"> - {% endif %} - </form> - - <script src="static/js/new_offer.js"></script> </div> - </div> </div> - </div> </div> {% include 'footer.html' %} - </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/offer_new_1.html b/basicswap/templates/offer_new_1.html index 96538a0..fcb593e 100644 --- a/basicswap/templates/offer_new_1.html +++ b/basicswap/templates/offer_new_1.html @@ -24,13 +24,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an new offer</h2> @@ -40,53 +36,50 @@ </div> </div> </section> - <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md"> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full p-2"> - -{% include 'inc_messages.html' %} - + {% include 'inc_messages.html' %} <div class="p-5 mb-10"> - <div class="mx-4 p-4"> - <div class="flex items-center"> - <div class="flex items-center text-teal-600 relative"> - <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6"><polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div> - </div> - <div class="flex-auto border-t-2 border-teal-600"></div> - <div class="flex items-center text-teal-600 relative"> - <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6"> - <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div> - </div> - <div class="flex-auto border-t-2 border-teal-600"></div> - <div class="flex items-center text-gray-500 relative"> - <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6" > - <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div> - </div> + <div class="mx-4 p-4"> + <div class="flex items-center"> + <div class="flex items-center text-teal-600 relative"> + <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon> + </g> + </svg> </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div> + </div> + <div class="flex-auto border-t-2 border-teal-600"></div> + <div class="flex items-center text-teal-600 relative"> + <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div> + </div> + <div class="flex-auto border-t-2 border-teal-600"></div> + <div class="flex items-center text-gray-500 relative"> + <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div> + </div> </div> + </div> </div> - <form method="post" autocomplete="off"> <div class="py-6 border-b border-t border-coolGray-100"> <div class="w-full md:w-10/12"> @@ -101,7 +94,7 @@ </svg> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line> <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line> <circle cx="5" cy="12" r="3"></circle> @@ -114,14 +107,13 @@ <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option> {% for a in addrs_to %} <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> - {% endfor %} - </select> + {% endfor %} + </select> </div> </div> </div> </div> </div> - <div class="py-6 border-b border-coolGray-100"> <div class="w-full md:w-10/12"> <div class="flex flex-wrap -m-3"> @@ -135,7 +127,7 @@ </svg> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path> <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect> <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path> @@ -146,7 +138,7 @@ <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from"> {% for a in addrs %} <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> - {% endfor %} + {% endfor %} <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option> </select> </div> @@ -154,7 +146,6 @@ </div> </div> </div> - <div class="py-6 border-b border-coolGray-100"> <div class="w-full md:w-10/12"> <div class="flex flex-wrap -m-3"> @@ -171,8 +162,8 @@ <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');"> <option value="-1" data-image="/static/images/other/placeholder-line.png">You Send</option> {% for c in coins_from %} - <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> - {% endfor %} + <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> + {% endfor %} </select> </div> </div> @@ -180,7 +171,7 @@ <div class="relative"> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> @@ -189,26 +180,21 @@ </g> </svg> </div> - <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" placeholder="Amount you Send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}"> - - </div> + <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" placeholder="Amount you Send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}"> </div> </div> - </div> </div> </div> </div> </div> - <div class="py-6 border-b border-coolGray-100"> <div class="w-full md:w-10/12"> <div class="flex flex-wrap -m-3"> <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">You Get</p> + <p class="text-sm text-coolGray-800 font-semibold">You Get</p> </div> <div class="w-full md:flex-1 p-3"> <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/2 p-3"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> @@ -218,7 +204,7 @@ <option value="-1" data-image="/static/images/other/placeholder-line.png">You Get</option> {% for c in coins %} <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> - {% endfor %} + {% endfor %} </select> </div> </div> @@ -226,7 +212,7 @@ <div class="relative"> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> @@ -235,16 +221,13 @@ </g> </svg> </div> - <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 " placeholder="Amount you Get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"> - </div> + <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 " placeholder="Amount you Get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"> </div> </div> - </div> </div> </div> </div> </div> - <div class="py-6 border-b border-coolGray-100"> <div class="w-full md:w-10/12"> <div class="flex flex-wrap -m-3"> @@ -253,14 +236,13 @@ </div> <div class="w-full md:flex-1 p-3"> <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/2 p-3"> <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p> <div class="relative"> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> <title>law</title> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> <polyline points="3,23 3,19 15,19 15,23 "></polyline> <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line> @@ -270,15 +252,14 @@ </g> </svg> </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"> - </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"> </div> </div> <div class="w-full md:w-1/2 p-3"> <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p> <div class="relative"> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g fill="#3b82f6" > + <g fill="#3b82f6"> <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path> <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path> <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path> @@ -286,15 +267,13 @@ </g> </svg> </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> - </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> </div> </div> </div> </div> </div> </div> </div> - <div class="py-6 border-coolGray-100"> <div class="w-full md:w-10/12"> <div class="flex flex-wrap -m-3"> @@ -318,7 +297,6 @@ </div> </div> </div> - <div class="py-6 border-b border-t border-coolGray-100"> <div class="w-full md:w-10/12"> <div class="flex flex-wrap -m-3"> @@ -326,14 +304,11 @@ <p class="text-sm text-coolGray-800 font-semibold">Rates</p> </div> <div class="w-full md:flex-1 p-3"> - <p id="rates_display"> - - </p> + <p id="rates_display"> </p> </div> </div> </div> </div> - <div class="p-6 pt-10 bg-white bg-opacity-60 mb-10 rounded-b-md mb-20"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> @@ -367,161 +342,141 @@ </div> </div> </div> - <input type="hidden" name="formid" value="{{ form_id }}"> - <input type="hidden" name="step1" value="a"> - </form> - + <input type="hidden" name="step1" value="a"> </form> </div> </div> </div> </div> - </section> - <script> const xhr_rates = new XMLHttpRequest(); xhr_rates.onload = () => { - if (xhr_rates.status == 200) { - const obj = JSON.parse(xhr_rates.response); - - inner_html = '<pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>'; - document.getElementById('rates_display').innerHTML = inner_html; - } + if (xhr_rates.status == 200) { + const obj = JSON.parse(xhr_rates.response); + inner_html = '<pre><code>' + JSON.stringify(obj, null, ' ') + '</code></pre>'; + document.getElementById('rates_display').innerHTML = inner_html; + } } - const xhr_rate = new XMLHttpRequest(); xhr_rate.onload = () => { - if (xhr_rate.status == 200) { - const obj = JSON.parse(xhr_rate.response); - - if (obj.hasOwnProperty('rate')) { - document.getElementById('rate').value = obj['rate']; - } else - if (obj.hasOwnProperty('amount_to')) { - document.getElementById('amt_to').value = obj['amount_to']; - } else - if (obj.hasOwnProperty('amount_from')) { - document.getElementById('amt_from').value = obj['amount_from']; - } + if (xhr_rate.status == 200) { + const obj = JSON.parse(xhr_rate.response); + if (obj.hasOwnProperty('rate')) { + document.getElementById('rate').value = obj['rate']; } + else + if (obj.hasOwnProperty('amount_to')) { + document.getElementById('amt_to').value = obj['amount_to']; + } + else + if (obj.hasOwnProperty('amount_from')) { + document.getElementById('amt_from').value = obj['amount_from']; + } + } } - const xhr_rates_table = new XMLHttpRequest(); xhr_rates_table.onload = () => { - if (xhr_rates_table.status == 200) { - const list = JSON.parse(xhr_rates_table.response); - headings = ['Source', 'Coin From', 'Coin To', 'Coin From USD Rate', 'Coin To USD Rate', 'Coin From BTC Rate', 'Coin To BTC Rate', 'Relative Rate']; - table = document.createElement('table'); - table.setAttribute("class", ""); - - heading_head = document.createElement('thead'); - - headings_row = document.createElement('tr'); - data_row.setAttribute("class", ""); - - for (let i = 0; i < headings.length; i++) { - column = document.createElement('th'); - column.textContent = headings[i]; - headings_row.appendChild(column); - } - table.appendChild(headings_row); - - for (let i = 0; i < list.length; i++) { - data_row = document.createElement('tr'); - for (let j = 0; j < list[i].length; j++) { - column = document.createElement('td'); - column.textContent = list[i][j]; - data_row.appendChild(column); - } - table.appendChild(data_row); - } - // Clear existing - const display_node = document.getElementById("rates_display"); - while (display_node.lastElementChild) { - display_node.removeChild(display_node.lastElementChild); - } - - heading = document.createElement('h4'); - heading.textContent = '' - display_node.appendChild(heading); - display_node.appendChild(table); + if (xhr_rates_table.status == 200) { + const list = JSON.parse(xhr_rates_table.response); + headings = ['Source', 'Coin From', 'Coin To', 'Coin From USD Rate', 'Coin To USD Rate', 'Coin From BTC Rate', 'Coin To BTC Rate', 'Relative Rate']; + table = document.createElement('table'); + table.setAttribute("class", ""); + heading_head = document.createElement('thead'); + headings_row = document.createElement('tr'); + data_row.setAttribute("class", ""); + for (let i = 0; i < headings.length; i++) { + column = document.createElement('th'); + column.textContent = headings[i]; + headings_row.appendChild(column); } + table.appendChild(headings_row); + for (let i = 0; i < list.length; i++) { + data_row = document.createElement('tr'); + for (let j = 0; j < list[i].length; j++) { + column = document.createElement('td'); + column.textContent = list[i][j]; + data_row.appendChild(column); + } + table.appendChild(data_row); + } + // Clear existing + const display_node = document.getElementById("rates_display"); + while (display_node.lastElementChild) { + display_node.removeChild(display_node.lastElementChild); + } + heading = document.createElement('h4'); + heading.textContent = '' + display_node.appendChild(heading); + display_node.appendChild(table); + } } function lookup_rates() { - const coin_from = document.getElementById('coin_from').value; - const coin_to = document.getElementById('coin_to').value; - - if (coin_from == '-1' || coin_to == '-1') { - alert('Coins from and to must be set first.'); - return; - } - - inner_html = '<p>Updating...</p>'; - document.getElementById('rates_display').innerHTML = inner_html; - - xhr_rates.open('POST', '/json/rates'); - xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xhr_rates.send('coin_from='+coin_from+'&coin_to='+coin_to); + const coin_from = document.getElementById('coin_from').value; + const coin_to = document.getElementById('coin_to').value; + if (coin_from == '-1' || coin_to == '-1') { + alert('Coins from and to must be set first.'); + return; + } + inner_html = '<p>Updating...</p>'; + document.getElementById('rates_display').innerHTML = inner_html; + xhr_rates.open('POST', '/json/rates'); + xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr_rates.send('coin_from=' + coin_from + '&coin_to=' + coin_to); } function lookup_rates_table() { - const coin_from = document.getElementById('coin_from').value; - const coin_to = document.getElementById('coin_to').value; - - if (coin_from == '-1' || coin_to == '-1') { - alert('Coins from and to must be set first.'); - return; - } - - inner_html = 'Updating...</p>'; - document.getElementById('rates_display').innerHTML = inner_html; - - xhr_rates_table.open('GET', '/json/rateslist?from='+coin_from+'&to='+coin_to); - xhr_rates_table.send(); + const coin_from = document.getElementById('coin_from').value; + const coin_to = document.getElementById('coin_to').value; + if (coin_from == '-1' || coin_to == '-1') { + alert('Coins from and to must be set first.'); + return; + } + inner_html = 'Updating...</p>'; + document.getElementById('rates_display').innerHTML = inner_html; + xhr_rates_table.open('GET', '/json/rateslist?from=' + coin_from + '&to=' + coin_to); + xhr_rates_table.send(); } function set_rate(value_changed) { - const coin_from = document.getElementById('coin_from').value; - const coin_to = document.getElementById('coin_to').value; - const amt_from = document.getElementById('amt_from').value; - const amt_to = document.getElementById('amt_to').value; - const rate = document.getElementById('rate').value; - const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked; - - if (coin_from == '-1' || coin_to == '-1') { - return; + const coin_from = document.getElementById('coin_from').value; + const coin_to = document.getElementById('coin_to').value; + const amt_from = document.getElementById('amt_from').value; + const amt_to = document.getElementById('amt_to').value; + const rate = document.getElementById('rate').value; + const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked; + if (coin_from == '-1' || coin_to == '-1') { + return; + } + params = 'coin_from=' + coin_from + '&coin_to=' + coin_to; + if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) { + if (amt_from == '' || rate == '') { + return; } - - params = 'coin_from='+coin_from+'&coin_to='+coin_to; - if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) { - if (amt_from == '' || rate == '') { - return; - } - params += '&rate='+rate+'&amt_from='+amt_from; - } else - if (lock_rate && value_changed == 'amt_to') { - if (amt_to == '' || rate == '') { - return; - } - params += '&amt_to='+amt_to+'&rate='+rate; - } else { - if (amt_from == '' || amt_to == '') { - return; - } - params += '&amt_from='+amt_from+'&amt_to='+amt_to; + params += '&rate=' + rate + '&amt_from=' + amt_from; + } + else + if (lock_rate && value_changed == 'amt_to') { + if (amt_to == '' || rate == '') { + return; } - - xhr_rate.open('POST', '/json/rate'); - xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xhr_rate.send(params); + params += '&amt_to=' + amt_to + '&rate=' + rate; + } + else { + if (amt_from == '' || amt_to == '') { + return; + } + params += '&amt_from=' + amt_from + '&amt_to=' + amt_to; + } + xhr_rate.open('POST', '/json/rate'); + xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr_rate.send(params); } </script> <script src="static/js/new_offer.js"></script> </div> - {% include 'footer.html' %} +{% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/offer_new_2.html b/basicswap/templates/offer_new_2.html index d2796d4..da43a97 100644 --- a/basicswap/templates/offer_new_2.html +++ b/basicswap/templates/offer_new_2.html @@ -1,590 +1,533 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> - <div class="flex flex-wrap items-center -m-2"> - <div class="w-full md:w-1/2 p-2"> - <ul class="flex flex-wrap items-center gap-x-3 mb-2"> - <li> - <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> - <p>Home</p> - </a> - </li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li> - <li> - <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> - </svg> - </li> - </ul> - </div> - </div> - </section> - - <section class="py-4"> - <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> - <div class="relative z-20 flex flex-wrap items-center -m-3"> - <div class="w-full md:w-1/2 p-3"> - <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Setup offer parameters</h2> - <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p> - </div> - </div> - </div> - </div> - </section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md"> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full p-2"> - -{% include 'inc_messages.html' %} - - <div class="p-5 mb-10"> - <div class="mx-4 p-4"> - <div class="flex items-center"> - <div class="flex items-center text-teal-600 relative"> - <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6"><polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div> - </div> - <div class="flex-auto border-t-2 border-blue-500"></div> - <div class="flex items-center text-teal-600 relative"> - <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6"> - <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div> - </div> - <div class="flex-auto border-t-2 border-teal-600"></div> - <div class="flex items-center text-gray-500 relative"> - <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600"> - <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> - <g fill="#3b82f6" > - <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon> - </g> - </svg> - </div> - <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div> - </div> - </div> - </div> - </div> - - <form method="post"> - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Select network</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line> - <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line> - <circle cx="5" cy="12" r="3"></circle> - <circle cx="19" cy="4" r="3"></circle> - <circle cx="19" cy="20" r="3"></circle> - </g> + <section class="bg-white p-5 mt-5"> + <div class="flex flex-wrap items-center -m-2"> + <div class="w-full md:w-1/2 p-2"> + <ul class="flex flex-wrap items-center gap-x-3 mb-2"> + <li> + <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/"> + <p>Home</p> + </a> + </li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_to" disabled> - <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option> - {% for a in addrs_to %} - <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> - {% endfor %} - </select> - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Select address</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <title>contacts 2</title> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path> - <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect> - <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path> - <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line> - </g> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from" disabled> - {% for a in addrs %} - <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> - {% endfor %} - <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option> - </select> - </div> - </div> - </div> - </div> + </li> + <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li> + <li> + <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> + </svg> + </li> + </ul> + </div> + </div> + </section> + <section class="py-4"> + <div class="container px-4 mx-auto"> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative z-20 flex flex-wrap items-center -m-3"> + <div class="w-full md:w-1/2 p-3"> + <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Setup offer parameters</h2> + <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p> + </div> + </div> + </div> + </div> + </section class="bg-white"> + <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md"> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full p-2"> + {% include 'inc_messages.html' %} + <div class="p-5 mb-10"> + <div class="mx-4 p-4"> + <div class="flex items-center"> + <div class="flex items-center text-teal-600 relative"> + <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div> + </div> + <div class="flex-auto border-t-2 border-blue-500"></div> + <div class="flex items-center text-teal-600 relative"> + <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div> + </div> + <div class="flex-auto border-t-2 border-teal-600"></div> + <div class="flex items-center text-gray-500 relative"> + <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600"> + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon> + </g> + </svg> + </div> + <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div> + </div> + </div> + </div> + </div> + <form method="post"> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Select network</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line> + <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line> + <circle cx="5" cy="12" r="3"></circle> + <circle cx="19" cy="4" r="3"></circle> + <circle cx="19" cy="20" r="3"></circle> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_to" disabled> + <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option> + {% for a in addrs_to %} + <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> + {% endfor %} + </select> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Select address</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <title>contacts 2</title> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path> + <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect> + <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path> + <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from" disabled> {% for a in addrs %} + <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> {% endfor %} + <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option> + </select> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">You Send</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled> + <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> + {% for c in coins_from %} + <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> + {% endfor %} + </select> + </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> </div> + </div> + {% if data.swap_style == 'xmr' %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}"> </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_from_extra"> + <option value="0">None</option> + <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> + <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> + <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> + </select> + </div> + </div> + {% endif %} + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">You Get</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled> + <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> + {% for c in coins %} + <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> + {% endfor %} + </select> + </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> </div> + </div> + {% if data.swap_style == 'xmr' and coin_to != '6' %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}"> </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_to_extra"> + <option value="0">None</option> + <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> + <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> + <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> + </select> + </div> + </div> + {% endif %} + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> + <polyline points="3,23 3,19 15,19 15,23 "></polyline> + <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line> + <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line> + <line x1="1" y1="23" x2="17" y2="23"></line> + <line x1="17" y1="9" x2="23" y2="15"></line> + </g> + </svg> + </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> </div> + </div> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g fill="#3b82f6"> + <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path> + <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path> + <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path> + <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly> </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Time</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}"> </div> + </div> + {% if data.debug_ui == true %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}"> </div> {% if data.swap_style != 'xmr' %} + <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> + {% endif %} + </div> + {% else %} + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p> + <div class="relative"> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> + <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> + <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> + <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> + <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> + </g> + </svg> + </div> + <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}"> </div> + {% if data.swap_style != 'xmr' %} + <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> + {% endif %} + </div> + {% endif %} + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-b border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/2 p-3"> + <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> + <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> + <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> + <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle> + <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon> + <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon> + <polygon points="5 6 2 4 5 2 5 6"></polygon> + <line x1="5" y1="4" x2="9" y2="4"></line> + <polygon points="19 18 22 20 19 22 19 18"></polygon> + <line x1="19" y1="20" x2="15" y2="20"></line> + </g> + </svg> + </div> + <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="automation_strat_id"> + <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option> + {% for a in automation_strategies %} + <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option> + {% endfor %} + </select> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="py-6 border-coolGray-100"> + <div class="w-full md:w-10/12"> + <div class="flex flex-wrap -m-3"> + <div class="w-full md:w-1/3 p-3"> + <p class="text-sm text-coolGray-800 font-semibold">Options</p> + </div> + <div class="w-full md:flex-1 p-3"> + <div class="form-check form-check-inline"> + <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled> + <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label> + </div> + <div class="form-check form-check-inline"> + <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled> + <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label> + </div> + </div> + </div> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5"> + <button name="step1" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g fill="#556987"> + <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Back</span> </button> + </div> + <div class="w-full md:w-auto p-1.5"> + <button name="check_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> + <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"> + <circle cx="12" cy="12" r="11"></circle> + <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline> + </g> + </svg> <span>Continue</span> </button> + </div> + </div> + </div> + </div> + <input type="hidden" name="formid" value="{{ form_id }}"> + <input type="hidden" name="addr_to" value="{{ data.addr_to }}"> + <input type="hidden" name="addr_from" value="{{ data.addr_from }}"> + <input type="hidden" name="coin_from" value="{{ data.coin_from }}"> + <input type="hidden" name="coin_to" value="{{ data.coin_to }}"> {% if data.amt_var==true %} + <input type="hidden" name="amt_var" value="true"> {% endif %} {% if data.rate_var==true %} + <input type="hidden" name="rate_var" value="true"> {% endif %} </form> + <script src="static/js/new_offer.js"></script> + </div> </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">You Send</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled> - <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> - {% for c in coins_from %} - <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> - {% endfor %} - </select> - </div> - </div> - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> - </div> - </div> - - {% if data.swap_style == 'xmr' %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}"> - </div> - </div> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_from_extra"> - <option value="0">None</option> - <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> - <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> - <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> - </select> - </div> - </div> - - {% endif %} - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">You Get</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled> - <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> {% for c in coins %} - <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option> - - {% endfor %} - - </select> - </div> - </div> - <div class="w-full md:w-1/2 p-3"> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> - </div> - </div> - - {% if data.swap_style == 'xmr' and coin_to != '6' %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round"> - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}"> - </div> - </div> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_to_extra"> - <option value="0">None</option> - <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option> - <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option> - <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option> - </select> - </div> - </div> - - {% endif %} - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> - <polyline points="3,23 3,19 15,19 15,23 "></polyline> - <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line> - <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line> - <line x1="1" y1="23" x2="17" y2="23"></line> - <line x1="17" y1="9" x2="23" y2="15"></line> - </g> - </svg> - </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> - </div> - </div> - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g fill="#3b82f6" > - <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path> - <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path> - <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path> - <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Time</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}"> - </div> - </div> - - {% if data.debug_ui == true %} - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}"> - </div> - - {% if data.swap_style != 'xmr' %} - <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> - {% endif %} - - </div> - - {% else %} - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p> - <div class="relative"> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path> - <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline> - <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path> - <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline> - <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path> - </g> - </svg> - </div> - <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}"> - </div> - - {% if data.swap_style != 'xmr' %} - <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div> - {% endif %} - </div> - - {% endif %} - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-b border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="flex flex-wrap -m-3"> - - <div class="w-full md:w-1/2 p-3"> - <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p> - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> - <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" > - <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle> - <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon> - <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon> - <polygon points="5 6 2 4 5 2 5 6"></polygon> - <line x1="5" y1="4" x2="9" y2="4"></line> - <polygon points="19 18 22 20 19 22 19 18"></polygon> - <line x1="19" y1="20" x2="15" y2="20"></line> - </g> - </svg> - </div> - <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="automation_strat_id"> - <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option> - {% for a in automation_strategies %} - <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option> - {% endfor %} - </select> - </div> - </div> - - </div> - </div> - </div> - </div> - </div> - - <div class="py-6 border-coolGray-100"> - <div class="w-full md:w-10/12"> - <div class="flex flex-wrap -m-3"> - <div class="w-full md:w-1/3 p-3"> - <p class="text-sm text-coolGray-800 font-semibold">Options</p> - </div> - <div class="w-full md:flex-1 p-3"> - <div class="form-check form-check-inline"> - <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled> - <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label> - </div> - <div class="form-check form-check-inline"> - <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled> - <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label> - </div> - </div> - </div> - </div> - </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5"> - <button name="step1" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g fill="#556987"> - <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> - <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> - </g> - </svg> <span>Back</span> </button> - </div> - - <div class="w-full md:w-auto p-1.5"> - <button name="check_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"> - <circle cx="12" cy="12" r="11"></circle> - <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline> - </g> - </svg> <span>Continue</span> </button> - </div> - </div> - </div> - </div> - - <input type="hidden" name="formid" value="{{ form_id }}"> - <input type="hidden" name="addr_to" value="{{ data.addr_to }}"> - <input type="hidden" name="addr_from" value="{{ data.addr_from }}"> - <input type="hidden" name="coin_from" value="{{ data.coin_from }}"> - <input type="hidden" name="coin_to" value="{{ data.coin_to }}"> - {% if data.amt_var==true %} - <input type="hidden" name="amt_var" value="true"> - {% endif %} - {% if data.rate_var==true %} - <input type="hidden" name="rate_var" value="true"> - {% endif %} - </form> - - <script src="static/js/new_offer.js"></script> </div> - </div> </div> - </div> </div> {% include 'footer.html' %} - </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html index ef66f78..7000fb9 100644 --- a/basicswap/templates/offers.html +++ b/basicswap/templates/offers.html @@ -1,6 +1,5 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> <div class="w-full md:w-1/2 p-2"> @@ -26,13 +25,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type }}</h2> @@ -42,64 +37,222 @@ </div> </div> </section> - -{% include 'inc_messages.html' %} - + {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - + <!-- Chart--> + <div class="mb-10 mt-8 {{ chart }}"> + <div id="price-chart"></div> + <script src="/static/js/chart.js"></script> + <script> + CryptoCharts.roiComparison({ + chart_id: "price-chart", + cryptocompare_api_key: "cd7600e7b5fdd99c6f900673ff0ee8f64d6d4219a4bb87191ad4a2e3fc65d7f4", // Todo @ in settings/general user can set api_key + cryptocompare_tickers: ["BTC", "PART", "DASH", "PIVX", "XMR", "LTC", "FIRO"], + last_days: 30, + axes: true, + title: true, + loading_indicator: false, + fontFamily: "Inter,Helvetica, Arial, sans-serif", + options: { + colors: ["#f2a900", "#2ad167", "#1376b5", "#662D91", "#fc6621", "#345D9D", "#9B1C2E"], + chart: { + type: "area", + height: 360 + }, + dataLabels: { + enabled: false + }, + stroke: { + curve: "smooth" + }, + xaxis: { + labels: { + style: { + tickAmount: 4, + // colors: colors, + fontSize: "12px" + } + } + }, + yaxis: { + min: -100, + max: 200, + tickAmount: 4 + }, + grid: { + show: true, + borderColor: "#e5e5e5", + strokeDashArray: 0, + position: "back", + xaxis: { + lines: { + show: false + } + }, + yaxis: { + lines: { + show: true + } + }, + row: { + colors: undefined, + opacity: 0.5 + }, + column: { + colors: undefined, + opacity: 0.5 + }, + padding: { + top: 0, + right: 0, + bottom: 0, + left: 0 + } + }, + legend: { + show: true, + showForSingleSeries: false, + showForNullSeries: true, + showForZeroSeries: true, + position: "right", + horizontalAlign: "right", + floating: false, + fontSize: "14px", + fontFamily: "Inter,Helvetica, Arial, sans-serif", + fontWeight: 400, + formatter: undefined, + inverseOrder: false, + width: undefined, + height: undefined, + tooltipHoverFormatter: undefined, + customLegendItems: [], + offsetX: -20, + offsetY: -20, + labels: { + colors: undefined, + useSeriesColors: false + }, + markers: { + width: 14, + height: 14, + strokeWidth: 2, + strokeColor: "#00000", + fillColors: undefined, + radius: 12, + customHTML: undefined, + onClick: undefined, + offsetX: 0, + offsetY: 0 + }, + itemMargin: { + horizontal: 5, + vertical: 15 + }, + onItemClick: { + toggleDataSeries: true + }, + onItemHover: { + highlightDataSeries: true + } + }, + annotations: { + yaxis: [{ + y: 8600, + y2: 9000, + borderColor: "#000", + fillColor: "#FEB019", + label: { + text: "Y-axis range" + } + }] + }, + markers: { + size: 0, + colors: undefined, + strokeColors: "#fff", + strokeWidth: 2, + strokeOpacity: 0.9, + strokeDashArray: 0, + fillOpacity: 1, + discrete: [], + shape: "circle", + radius: 2, + offsetX: 0, + offsetY: 0, + onClick: undefined, + onDblClick: undefined, + showNullDataPoints: true, + hover: { + size: undefined, + sizeOffset: 3 + } + }, + title: { + text: '30 Days Moving % - Daily price in USD', + align: 'left', + margin: 10, + offsetX: 10, + offsetY: 0, + floating: false, + style: { + fontSize: '14px', + fontWeight: 'bold', + fontFamily: "Inter,Helvetica, Arial, sans-serif", + color: '#212121' + }, + } + } + }); + </script> + </div> + <!-- Chart --> <form method="post"> - <div class="flex justify-between items-center pb-4 bg-white"> <div class="bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> </svg> <select is="ms-dropdown" name="coin_to" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> - {% for c in coins_from %} - <option class="text-sm" value="{{ c[0] }}"{% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option> + {% for c in coins_from %} + <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option> {% endfor %} - </select> + </select> </div> </div> - <div class="flex items-center "> <div class="w-full md:w-auto p-1.5 "> - <p class="text-sm font-heading"> <svg aria-hidden="true " class="w-5 h-5 " fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg "> + <p class="text-sm font-heading"> + <svg aria-hidden="true " class="w-5 h-5 " fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg "> <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path> - </svg></p> + </svg> + </p> </div> </div> - <div class="w-full md:w-auto p-1.5 "> <div class="relative "> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 " width="16 " height="16 " viewBox="0 0 16 16 " fill="none " xmlns="http://www.w3.org/2000/svg "> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z " fill="#8896AB "> - </path> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z " fill="#8896AB "> </path> </svg> <select is="ms-dropdown" name="coin_from " class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> - {% for c in coins %} - <option class="text-sm" value="{{ c[0] }}"{% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option> + {% for c in coins %} + <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option> {% endfor %} - </select> + </select> </div> </div> - <div class="flex items-center"> <div class="w-full md:w-auto p-1.5"> <p class="text-sm font-heading bold">Sort By:</p> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> @@ -111,7 +264,6 @@ </select> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> @@ -123,13 +275,11 @@ </select> </div> </div> - <div class="flex items-center"> <div class="w-full md:w-auto p-1.5"> <p class="text-sm font-heading bold">Sent From Node:</p> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> @@ -141,7 +291,6 @@ </select> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> @@ -159,7 +308,6 @@ </svg> <span>Clear</span> </button> </div> </div> - <div class="w-full md:w-auto p-1.5"> <div class="relative"> <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> @@ -173,16 +321,13 @@ </svg> <span>Apply Filters</span> </button> </div> </div> - </div> </div> </div> </div> - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6"> TIME AT </th> @@ -199,14 +344,11 @@ <th scope="col" class="py-3 px-6"> Trade </th> </tr> </thead> - - <tbody> - {% for o in offers %} + <tbody> {% for o in offers %} <tr class="bg-white border-t hover:bg-gray-50"> - <td scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap"> - <svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> - <g stroke-linecap="round" stroke-width="2" fill="none" stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round" class="nc-icon-wrapper"> + <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round"> <circle cx="12" cy="12" r="11"></circle> <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}"></polyline> </g> @@ -218,7 +360,7 @@ <!--<td class="py-4 px-6 text-xs"><a class="monospace text-xs" href=/offer/{{ o[1] }}>{{ o[1]|truncate(6, True) }}</a></td>--> <!--<td class="py-4 px-6 text-xs monospace">{{ o[8] }}{% if o[9]==true %} <b>Sent</b>{% endif %}</td>--> <!--Todo: Add link back --> - <td class="py-4 px-6 monospace">{{ o[7] }} </td> + <td class="py-4 px-6 monospace">{{ o[7] }} {% if o[12]==2 %}Revoked{% elif o[11]==true %}Not Active{% else %}Active{% endif %}</td> <td class="py-4 px-6 text-xs monospace"><a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a></td> <td class="py-4"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span> {{ o[2] }}</td> <td class="py-4 text-xs">{{ o[4] }}</td> @@ -226,37 +368,27 @@ <td class="py-4 text-xs">{{ o[5] }}</td> <td class="py-4 text-xs px-6">{{ o[6] }}</td> <!-- <td class="py-4 px-6">{{ o[10] }}</td>--> - <td class="py-4 px-6"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button {% if o[9]==true %} bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 {% else %} bg-blue-500 text-white {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %}Edit {% else %} Swap {% endif %}</a> - </td> + <td class="py-4 px-6"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button {% if o[9]==true %} bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 {% else %} bg-blue-500 text-white {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %}Edit {% else %} Swap {% endif %}</a> </td> </tr> - </tbody> - - {% endfor %} + </tbody>{% endfor %} </table> - <input type="hidden" name="formid" value="{{ form_id }}"> - <input type="hidden" name="pageno" value="{{ filters.page_no }}"> - - </div> + <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </div> </div> - <div class="pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5"> <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path> </svg> <span>Page Back</span> </button> </div> - <div class="flex items-center"> <div class="w-full md:w-auto p-1.5"> <p class="text-sm font-heading">Page: {{ filters.page_no }}</p> </div> </div> - <div class="w-full md:w-auto p-1.5"> <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span> <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> @@ -264,21 +396,16 @@ </svg> </button> </div> - </div> </div> </div> - </form> - </div> </div> </div> </div> - -</section> - + </section> </div> {% include 'footer.html' %} </body> -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/rpc.html b/basicswap/templates/rpc.html index e516ea6..06a3d5d 100644 --- a/basicswap/templates/rpc.html +++ b/basicswap/templates/rpc.html @@ -1,6 +1,5 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> <div class="w-full md:w-1/2 p-2"> @@ -25,13 +24,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">RPC Console</h2> @@ -41,21 +36,15 @@ </div> </div> </section> - -{% include 'inc_messages.html' %} - - + {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <div class="container px-0 mx-auto mt-2"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <form method="post" autocomplete="off"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> @@ -63,49 +52,39 @@ <th scope="col">RPC Console Input</th> </tr> </thead> - <tr class="bg-white border-t"> <td class="py-4 px-6 w-1/3 bold"> - - <div class="relative"> - <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> + </svg> <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="coin_type"> - <option value="-1" {% if coin_type==-1 %} selected{% endif %}>Select Coin</option> - {% for c in coins %} - <option value="{{ c[0] }}" {% if coin_type==c[0] %} selected{% endif %}>{{ c[1] }}</option> + <option value="-1" {% if coin_type==-1 %} selected{% endif %}>Select Coin</option> + {% for c in coins %} + <option value="{{ c[0] }}" {% if coin_type==c[0] %} selected{% endif %}>{{ c[1] }}</option> {% endfor %} </select> - </div> - + </div> + </td> + <td class="py-4 pr-5 w-2/3"> + <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="cmd"> </td> - <td class="py-4 pr-5 w-2/3"><input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="cmd"></td> </tr> </table> </div> </div> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Submit</span> </button> - </div> - + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Apply</button> + </div> </div> </div> </div> - - <input type="hidden" name="formid" value="{{ form_id }}"> - - {% if result %} - + <input type="hidden" name="formid" value="{{ form_id }}"> {% if result %} <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> @@ -114,28 +93,20 @@ </thead> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 pl-5 pr-5"> - <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15"> - {{ result }} - </textarea> + <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15">{{ result }}</textarea> </td> </tr> - </table> </div> </div> - {% endif %} - - </form> - + {% endif %} + </form> </div> </div> </div> </div> - </section> - </div> {% include 'footer.html' %} </body> - </html> \ No newline at end of file diff --git a/basicswap/templates/settings.html b/basicswap/templates/settings.html index 37d5efb..2db7959 100644 --- a/basicswap/templates/settings.html +++ b/basicswap/templates/settings.html @@ -1,5 +1,4 @@ {% include 'header.html' %} - <div class="container mx-auto"> <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> @@ -15,7 +14,7 @@ <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> </svg> </li> - <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/settings">Settings</a></li> + <li> <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/settings">Settings</a> </li> <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> </svg> @@ -23,13 +22,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Settings</h2> @@ -39,443 +34,423 @@ </div> </div> </section> - -{% include 'inc_messages.html' %} - - - - <section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full pt-2"> - - -<div class="mb-10 border-b border-gray-200"> - <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#settingstab" role="tablist"> - <li class="mr-2" role="presentation"> - <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected="false">Coins</a> - </li> - <li class="mr-2" role="presentation"> - <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected="false">General</a> - </li> - <li class="mr-2" role="presentation"> - <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected="false">Tor</a> - </li> - </ul> -</div> - - - - -<div id="settingstab"> - <div class="hidden rounded-lg" id="coins" role="tabpanel" aria-labelledby="coins-tab"> - - - - {% for c in chains %} - <form method="post"> - <section class="bg-white p-3"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl align-middle"> - <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> - <img class="h-9" src="/static/images/coins/{{ c.name }}.png" alt=""> </span> {{ c.display_name }}</h4> + {% include 'inc_messages.html' %} + <section class="bg-white"> + <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white"> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full pt-2"> + <div class="mb-10 border-b border-gray-200"> + <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#settingstab" role="tablist"> + <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected="false">Coins</a> </li> + <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected="false">General</a> </li> + <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected="false">Tor</a> </li> + </ul> + </div> + <div id="settingstab"> + <div class="hidden rounded-lg" id="coins" role="tabpanel" aria-labelledby="coins-tab"> + <form method="post"> + {% for c in chains %} + <section class="bg-white pl-3"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl align-middle"> + <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> + <img class="h-9" src="/static/images/coins/{{ c.name }}.png" alt=""> + </span>{{ c.display_name }} + </h4></div> + </div> + </section> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> + <tr> + <th scope="col" class="py-3 px-6">Settings</th> + <th scope="col">Value</th> + </tr> + </thead> + {% if c.connection_type %} + <tr> + <td class="py-4 px-6 bold w-96 bold">Connection Type</td> + <td class="py-4">{{ c.connection_type }}</td> + </tr> {% endif %} + {% if c.manage_daemon is defined %} {% if c.name == 'monero' %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Manage Daemon</td> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="managedaemon_{{ c.name }}"> + <option value="true" {% if c.manage_daemon==true %} selected{% endif %}>True</option> + <option value="false" {% if c.manage_daemon==false %} selected{% endif %}>False</option> + </select> + </div> + </div> + </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Daemon RPC Host</td> + <td class="py-4 pr-5"> + <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}"> </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Daemon RPC Port</td> + <td class="py-4 pr-5"> + <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}"> </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6" colspan=2> + <label for="message" class="block mb-2 text-sm font-medium text-gray-900">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”. + <br /> </label> + <textarea class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="100"> {{ c.remotedaemonurls }} </textarea> + </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96 bold">Automatically Select Daemon</td> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="autosetdaemon_{{ c.name }}"> + <option value="true" {% if c.autosetdaemon==true %} selected{% endif %}>True</option> + <option value="false" {% if c.autosetdaemon==false %} selected{% endif %}>False</option> + </select> + </div> + </div> + </td> + </tr> + {% else %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold bold">Manage Daemon</td> + <td>{{ c.manage_daemon }}</td> + </tr> + {% endif %} + {% endif %} + {% if c.manage_wallet_daemon is defined %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold bold">Manage Wallet Daemon</td> + <td>{{ c.manage_wallet_daemon }}</td> + </tr> + {% endif %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold bold">Chain Lookups</td> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="lookups_{{ c.name }}"> + <option value="local" {% if c.lookups=='local' %} selected{% endif %}>Local Node</option> + <option value="explorer" {% if c.lookups=='explorer' %} selected{% endif %}>Explorer</option> + </select> + </div> + </div> + </td> + </tr> + {% if c.name == 'monero' %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96 bold">Transaction Fee Priority</td> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_priority_{{ c.name }}"> + <option value="0" {% if c.fee_priority==0 %} selected{% endif %}>Default</option> + <option value="1" {% if c.fee_priority==1 %} selected{% endif %}>Low</option> + <option value="2" {% if c.fee_priority==2 %} selected{% endif %}>Medium</option> + <option value="3" {% if c.fee_priority==3 %} selected{% endif %}>High</option> + </select> + </div> + </div> + </td> + </tr> + {% else %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold bold">Blocks Confirmed Target</td> + <td class="py-4 pr-5"> + <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}"> </td> + </tr> + {% endif %} + {% if c.name == 'particl' %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold bold">Anon Tx Ring Size</td> + <td class="py-4 pr-5"> + <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}"> </td> + </tr> + {% endif %} + </table> + </div> </div> - </div> - </section> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="apply_{{ c.name }}" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Apply</button> + </div> + {% if c.can_disable == true %} + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Disable Coin </button> + </div> + {% endif %} + {% if c.can_reenable == true %} + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white hover:bg-white font-medium text-sm text-green-500 border border-green-500 hover:text-green-600 hover:border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#2ad167" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#2ad167"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Enable</button> + </div> - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> - <tr> - <th scope="col" class="py-3 px-6">Settings</th> - <th scope="col">Value</th> - </tr> - </thead> - {% if c.connection_type %} - <tr> - <td class="py-4 px-6 bold w-96 bold">Connection Type</td> - <td class="py-4">{{ c.connection_type }}</td> - </tr> - {% endif %} - {% if c.manage_daemon is defined %} - {% if c.name == 'monero' %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Manage Daemon</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="managedaemon_{{ c.name }}"> - <option value="true" {% if c.manage_daemon==true %} selected{% endif %}>True</option> - <option value="false" {% if c.manage_daemon==false %} selected{% endif %}>False</option> - </select> - </td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Daemon RPC Host</td> - <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}"></td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Daemon RPC Port</td> - <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}"></td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6" colspan=2> - <label for="message" class="block mb-2 text-sm font-medium text-gray-900">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”. <br/></label> - <textarea class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="100">{{ c.remotedaemonurls }}</textarea> - </td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Automatically Select Daemon</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="autosetdaemon_{{ c.name }}"> - <option value="true" {% if c.autosetdaemon==true %} selected{% endif %}>True</option> - <option value="false" {% if c.autosetdaemon==false %} selected{% endif %}>False</option> - </select> - </td> - </tr> - {% else %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Manage Daemon</td> - <td>{{ c.manage_daemon }}</td> - </tr> - {% endif %} - {% endif %} - {% if c.manage_wallet_daemon is defined %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Manage Wallet Daemon</td> - <td>{{ c.manage_wallet_daemon }}</td> - </tr> - {% endif %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Chain Lookups</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="lookups_{{ c.name }}"> - <option value="local" {% if c.lookups=='local' %} selected{% endif %}>Local Node</option> - <option value="explorer" {% if c.lookups=='explorer' %} selected{% endif %}>Explorer</option> - </select> - </td> - </tr> - {% if c.name == 'monero' %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Transaction Fee Priority</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="fee_priority_{{ c.name }}"> - <option value="0" {% if c.fee_priority==0 %} selected{% endif %}>Default</option> - <option value="1" {% if c.fee_priority==1 %} selected{% endif %}>Low</option> - <option value="2" {% if c.fee_priority==2 %} selected{% endif %}>Medium</option> - <option value="3" {% if c.fee_priority==3 %} selected{% endif %}>High</option> - </select> - </td> - </tr> - {% else %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Blocks Confirmed Target</td> - <td><input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}"></td> - </tr> - {% endif %} - {% if c.name == 'particl' %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96 bold">Anon Tx Ring Size</td> - <td><input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}"></td> - </tr> - {% endif %} + + + {% endif %} + </div> + </div> + </div> </table> - </div> - </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="apply_{{ c.name }}" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Apply</span> </button> + {% endfor %} + <input type="hidden" name="formid" value="{{ form_id }}"> </div> + <div class="hidden rounded-lg" id="general" role="tabpanel" aria-labelledby="general-tab"> + <section class="bg-white"> + <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white"> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full pt-2"> + <section class="bg-white pl-3"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl align-middle"> + <span class="mr-2 inline-block align-middle items-center justify-center w-8 h-7 bg-white-50 rounded"> + <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="12" cy="12" r="3" stroke="#3b82f6"></circle> <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path></g></svg> + </span>General (todo) + </h4> </div> + </div> + </section> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> + <tr> + <th scope="col" class="py-3 px-6">Settings</th> + <th scope="col">Value</th> + </tr> + </thead> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96 bold">Debug Node</td> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> + <option value="true">True</option> + <option value="false">False</option> + </select> + </div> + </div> + </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Debug Mode UI</td> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> + <option value="true">True</option> + <option value="false">False</option> + </select> + </div> + </div> + </td> + </tr> + </table> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Apply</button> + </div> + </div> + </div> + </div> + <section class="bg-white pl-3"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl align-middle"> + <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded"> + <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="10" y="14" width="4" height="9"></rect> <rect x="1" y="18" width="4" height="5"></rect> <rect x="19" y="10" width="4" height="13"></rect> <polyline data-cap="butt" points="3,10 8,5 12,9 20,1 " stroke="#3b82f6"></polyline> <polyline points=" 15,1 20,1 20,6 " stroke="#3b82f6"></polyline></g></svg> + </span>Chart (todo) + </h4> </div> + </div> + </section> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> + <tr> + <th scope="col" class="py-3 px-6">Settings</th> + <th scope="col">Value</th> + </tr> + </thead> + <tr> + <td class="py-4 px-6 bold w-96 bold">Show Chart</td> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> + <option value="true">True</option> + <option value="false">False</option> + </select> + </div> + </div> + </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Chart API Key (URL)</td> + <td class="py-4 pr-5"> + <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td> + </tr> + </table> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Apply</button> + </div> + </div> + </div> + </div> + </div> + </div> </div> - - {% if c.can_disable == true %} - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Disable Coin</span> </button> - </div> - - {% endif %} - {% if c.can_reenable == true %} - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white hover:bg-white font-medium text-sm text-green-500 border border-green-500 hover:text-green-600 hover:border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Enable</span> </button> - </div> - {% endif %} - </div> - </div> </div> - </table> - <input type="hidden" name="formid" value="{{ form_id }}"> - </form> - - {% endfor %} - - - + <div class="hidden rounded-lg" id="tor" role="tabpanel" aria-labelledby="tor-tab"> + <section class="bg-white"> + <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> + <div class="pb-6 border-coolGray-100"> + <div class="flex flex-wrap items-center justify-between -m-2"> + <div class="w-full pt-2"> + <section class="bg-white pl-3"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl align-middle"> + <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded"> + <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" stroke-linejoin="round"> + <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#AA70E4"></path> + <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></path> + <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path> + </g> + </svg> + </span>Tor (todo) + </h4> </div> + </div> + </section> + <div class="container px-0 mx-auto mt-5"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> + <tr> + <th scope="col" class="py-3 px-6">Settings</th> + <th scope="col">Value</th> + </tr> + </thead> + <tr> + <td class="py-4 px-6 bold w-96 bold">Use Tor</td> + <td class="py-4 pr-5"> + <div class="w-1/5 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> + <option value="true">True</option> + <option value="false">False</option> + </select> + </div> + </div> + </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Use Tor Proxy</td> + <td class="py-4 pr-5"> + <div class="w-1/5 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> + <option value="true">True</option> + <option value="false">False</option> + </select> + </div> + </div> + </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Tor Proxy Host</td> + <td class="py-4 pr-5"> + <input type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Tor Proxy Port</td> + <td class="py-4 pr-5"> + <input type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold w-96">Tor Control Port</td> + <td class="py-4 pr-5"> + <input type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td> + </tr> + </table> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Apply</button> + </div> + </div> + </div> + </div> + </form> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> </div> - <div class="hidden rounded-lg" id="general" role="tabpanel" aria-labelledby="general-tab"> - <form method="post"> - <section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full pt-2"> - - - <section class="bg-white p-3"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl align-middle"> - <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> - <img class="h-9" src="" alt=""> </span>General</h4> - </div> - </div> - </section> - - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> - <tr> - <th scope="col" class="py-3 px-6">Settings</th> - <th scope="col">Value</th> - </tr> - </thead> - - <tr> - <td class="py-4 px-6 bold w-96 bold">Debug Mode</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" > - <option value="true" >True</option> - <option value="false" >False</option> - </select> - </td> - </tr> - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Debug Mode UI</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" > - <option value="true" >True</option> - <option value="false" >False</option> - </select> - </td> - </tr> - </tr> - </table> - </div> </div> - - - - - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Apply</span> </button> - </div> - - - - </div> - </div> - </div> -<form> - <form method="post"> - <section class="bg-white p-3"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl align-middle"> - <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> - <img class="h-9" src="" alt=""> </span>Chart (todo)</h4> - </div> - </div> - </section> - - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> - <tr> - <th scope="col" class="py-3 px-6">Settings</th> - <th scope="col">Value</th> - </tr> - </thead> - - <tr> - <td class="py-4 px-6 bold w-96 bold">Show Chart</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" > - <option value="true" >True</option> - <option value="false" >False</option> - </select> - </td> - </tr> - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Chart API Key (URL)</td> - <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td> - </tr> - </tr> - </table> - </div> </div> - - - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Apply</span> </button> - </div> - - - - </div> - </div> - </div> - -</form> - </div> </div> </div> </div> - - - - </div> - <div class="hidden rounded-lg" id="tor" role="tabpanel" aria-labelledby="tor-tab"> - - <form method="post"> - - <section class="bg-white"> - <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> - <div class="pb-6 border-coolGray-100"> - <div class="flex flex-wrap items-center justify-between -m-2"> - <div class="w-full pt-2"> - - - <section class="bg-white p-3"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl align-middle"> - <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> - <img class="h-9" src="" alt=""> </span>Tor</h4> - </div> - </div> - </section> - - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none"> - <tr> - <th scope="col" class="py-3 px-6">Settings</th> - <th scope="col">Value</th> - </tr> - </thead> - - <tr> - <td class="py-4 px-6 bold w-96 bold">Use TOR</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" > - <option value="true" >True</option> - <option value="false" >False</option> - </select> - </td> - </tr> - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Use Tor Proxy</td> - <td> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" > - <option value="true" >True</option> - <option value="false" >False</option> - </select> - </td> - </tr> - </tr> - - - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Tot Proxy Host</td> - <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td> - </tr> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Tor Proxy Port</td> - <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td> - </tr> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold w-96">Tor Control Port</td> - <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td> - </tr> - </tr> - </table> - </div> </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Default</span> </button> - </div> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Apply</span> </button> - </div> - - - - </div> - </div> - </div> - - -</form> - - </div> </div> </div> </div> - - - </div> <!-- --> - </div> -</div> -</div> - - -</div> -</div> -</div> - - </section> - <script> function confirmPopup(action, coin_name) { - return confirm(action + " " + coin_name + "?\nWill shutdown basicswap."); + return confirm(action + " " + coin_name + "?\nWill shutdown basicswap."); } </script> {% include 'footer.html' %} </body> -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/smsgaddresses.html b/basicswap/templates/smsgaddresses.html index 0bc4648..e595fef 100644 --- a/basicswap/templates/smsgaddresses.html +++ b/basicswap/templates/smsgaddresses.html @@ -1,5 +1,4 @@ {% include 'header.html' %} - <div class="container mx-auto"> <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> @@ -25,13 +24,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Active SMSG Addresses</h2> @@ -41,197 +36,156 @@ </div> </div> </section> - -{% include 'inc_messages.html' %} - + {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <form method="post"> - {% if data.edit_address %} - <input type="hidden" name="edit_address_id" value="{{ data.addr_data.id }}"> <input type="hidden" name="edit_address" value="{{ data.addr_data.addr }}"> - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Edit Address: {{ data.addr_data.addr }}</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Edit Address: {{ data.addr_data.addr }}</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">SETTING</th> <th scope="col">VALUE</th> </tr> </thead> - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 monospace bold">Pubkey</td> - <td class="py-4">{{ data.addr_data.pubkey }}</td> + <td class="py-4 pr-5 select-all monospace">{{ data.addr_data.pubkey }}</td> </tr> - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6">Active</td> - <td> - <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="active_ind"> + <td class="py-4 pr-5"> + <div class="w-52 md:flex-1"> + <div class="relative"> + <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="active_ind"> <option value="1" {% if data.addr_data.active_ind==1 %} selected{% endif %}>True</option> <option value="0" {% if data.addr_data.active_ind==0 %} selected{% endif %}>False</option> </select> + </div> + </div> </td> </tr> - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6">Note</td> - <td> - <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30"> + <td class="py-4 pr-5"> + <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30"> </td> + </tr> + <tr> + </table> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="saveaddr" value="Save Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button> + </div> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button> + </div> + </div> + </div> + </div> + {% elif data.new_address %} + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">New Receiving Address</h4> </div> + </div> + </section> + <div class="container px-0 mx-auto"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6">SETTING</th> + <th scope="col">VALUE</th> + </tr> + </thead> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Note</td> + <td class="py-4 pr-5"> + <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30"> </td> </tr> - - <tr> - </table> </div> </div> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="saveaddr" value="Save Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Save Address</span> </button> + <button name="createnewaddr" value="Create Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button> </div> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="cancel" value="cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Cancel</span> </button> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button> </div> - </div> </div> </div> - - {% elif data.new_address %} - - <section class="bg-white p-6"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">New Receiving Address</h4> - </div> - </div> - </section> - - <div class="container px-0 mx-auto mt-5"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> - <tr> - <th scope="col" class="py-3 px-6">SETTING</th> - <th scope="col">VALUE</th> - </tr> - </thead> - - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Note</td> - <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addressnote" type="text" value="" maxlength="30"></td> - </tr> - </table> - - - </div> - </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="createnewaddr" value="Create Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Create Address</span> </button> - </div> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Cancel</span> </button> - </div> - - </div> - </div> - </div> - {% elif data.new_send_address %} - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Add Sending Address</h4> - </div> + <h4 class="font-semibold text-black text-2xl">Add Sending Address</h4> </div> </div> </section> - - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">SETTING</th> <th scope="col">VALUE</th> </tr> </thead> - - <tr class="bg-white border-t hover:bg-gray-50"> + <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Pubkey</td> - <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addresspubkey" type="text" value="" maxlength="66"></td> + <td class="py-4 pr-5"> + <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full monospace" name="addresspubkey" type="text" value="" maxlength="66"> + </td> </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Note</td> - <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addressnote" type="text" value="" maxlength="30"></td> + <td class="py-4 pr-5"> + <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30"> + </td> </tr> </table> </div> </div> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="createnewsendaddr" value="Add Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Add Address</span> </button> + <button name="createnewsendaddr" value="Add Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button> </div> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Cancel</span> </button> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button> </div> - </div> </div> </div> - {% else %} - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6">Address</th> @@ -242,66 +196,54 @@ <th scope="col">Action</th> </tr> </thead> - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-6 px-6"><b class="monospace">{{ network_addr }}</b></td> <td class="py-4">Network Address <td /> - <td class="py-4"> - <td /> - <td class="py-4"> - <td /> - </tr> - - - {% for sa in smsgaddresses %} + <td class="py-4"> + <td /> + <td class="py-4"> + <td /> </tr> + {% for sa in smsgaddresses %} <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 monospace bold">{{ sa.addr }}</td> + <td class="py-4 px-6 monospace bold select-all">{{ sa.addr }}</td> <td class="py-4">{{ sa.type }}</td> <td>{{ sa.active_ind }}</td> <td class="py-4">{{ sa.created_at | formatts }}</td> <td class="py-4">{{ sa.note }}</td> - <td class="py-4"><input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300" type="submit" name="editaddr_{{ sa.id }}" value="Edit"></td> - </tr> - {% endfor %} - + <td class="py-4"> + <input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300" type="submit" name="editaddr_{{ sa.id }}" value="Edit"> + </td> + </tr>{% endfor %} </table> </div> </div> - - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> - - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="shownewaddr" value="New Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>New Address</span> </button> - </div> - - <div class="w-full md:w-auto p-1.5 ml-2"> - <button name="showaddaddr" value="Add Sending Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> - <span>Add Sending Address</span> </button> - </div> - + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="shownewaddr" value="New Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>New Address</button> + </div> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button name="showaddaddr" value="Add Sending Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Add Sending Address</button> + </div> </div> </div> </div> - {% endif %} - <input type="hidden" name="formid" value="{{ form_id }}"> - </form> - + <input type="hidden" name="formid" value="{{ form_id }}"> </form> </div> </div> </div> </div> - </section> </div> - {% include 'footer.html' %} +{% include 'footer.html' %} </div> </body> - </html> + + + + + \ No newline at end of file diff --git a/basicswap/templates/tor.html b/basicswap/templates/tor.html index 9c747bc..a7d5a29 100644 --- a/basicswap/templates/tor.html +++ b/basicswap/templates/tor.html @@ -1,6 +1,5 @@ {% include 'header.html' %} <div class="container mx-auto"> - <section class="bg-white p-5 mt-5"> <div class="flex flex-wrap items-center -m-2"> <div class="w-full md:w-1/2 p-2"> @@ -25,46 +24,38 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">TOR</h2> <p class="font-semibold text-coolGray-200">TOR connection information</p> </div> <div class="w-full md:w-1/2 p-3"> - <a id="refresh" href="/tor"><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a> + <a id="refresh" href="/tor"> + <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button> + </a> </div> </div> </div> </div> </section> - -{% include 'inc_messages.html' %} - + {% include 'inc_messages.html' %} <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <div class="container px-0 mx-auto mt-5"> <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> <tr> <th scope="col" class="py-3 px-6 w-80">Name:</th> <th scope="col" class="py-3">Output:</th> </tr> </thead> - <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 pl-5 pr-5 w-80 bold">TOR Mode</td> <td td class="py-4">{% if use_tor_proxy == true %} Active {% if tor_established == true %} & Connected{% endif %} {% endif %}</td> @@ -87,12 +78,8 @@ </div> </div> </div> - </section> - -</div> -{% include 'footer.html' %} + </div>{% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/wallet.html b/basicswap/templates/wallet.html index 7b2044e..aca28fa 100644 --- a/basicswap/templates/wallet.html +++ b/basicswap/templates/wallet.html @@ -25,13 +25,9 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="text-4xl font-bold text-white tracking-tighter"> @@ -41,50 +37,51 @@ <p class="font-semibold text-coolGray-200 pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p> </div> <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> - <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}"> - <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg> - <span>Refresh</span> - </a> + <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff" class="nc-icon-wrapper"> + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Refresh</span> </a> </div> </div> </div> </div> </section> - -{% include 'inc_messages.html' %} - -{% if w.updating %} - - <section class="py-4" id="updating" role="alert"> - <div class="container px-4 mx-auto"> - <div class="p-6 bg-blue-100 border border-blue-200 rounded-md"> - <div class="flex flex-wrap justify-between items-center -m-2"> - <div class="flex-1 p-2"> - <div class="flex flex-wrap -m-1"> - <div class="w-auto p-1"> - <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg> - </svg> - </div> - <div class="flex-1 p-1"> - <h3 class="font-medium text-sm text-blue-900">Updating...</h3> - </div> - </div> - </div> - <div class="w-auto p-2"> - <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close"> - <span class="sr-only">Close</span> - <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg> - </button> - </div> - </div> - </div> + {% include 'inc_messages.html' %} + {% if w.updating %} + <section class="py-4" id="updating" role="alert"> + <div class="container px-4 mx-auto"> + <div class="p-6 bg-blue-100 border border-blue-200 rounded-md"> + <div class="flex flex-wrap justify-between items-center -m-2"> + <div class="flex-1 p-2"> + <div class="flex flex-wrap -m-1"> + <div class="w-auto p-1"> + <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path> + </svg> + </svg> </div> - </section> - -{% endif %} -{% if w.havedata %} {% if w.error %} - - <section class="py-4"> + <div class="flex-1 p-1"> + <h3 class="font-medium text-sm text-blue-900">Updating...</h3> </div> + </div> + </div> + <div class="w-auto p-2"> + <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close"> <span class="sr-only">Close</span> + <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> + </svg> + </button> + </div> + </div> + </div> + </div> + </section> + {% endif %} + {% if w.havedata %} + {% if w.error %} + <section class="py-4"> <div class="container px-4 mx-auto"> <div class="p-6 bg-red-100 border border-red-200 rounded-md"> <div class="flex flex-wrap justify-between items-center -m-2"> @@ -98,8 +95,7 @@ <div class="flex-1 p-1"> <h3 class="font-medium text-sm text-red-900 error_msg"> <p class="error_msg">Error: {{ w.error }}</p> - </h3> - </div> + </h3> </div> </div> </div> <div class="w-auto p-2"> @@ -113,9 +109,7 @@ </div> </div> </section> - -{% else %} - + {% else %} <form method="post" autocomplete="off"> <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> @@ -141,22 +135,27 @@ </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}"></span>Balance:</td> - <td class="bold">{{ w.balance }}</td>{% if w.unconfirmed %} + <td class="bold">{{ w.balance }}</td> + {% if w.unconfirmed %} <td>Unconfirmed:</td> - <td>{{ w.unconfirmed }}</td>{% endif %} - </tr> {% if w.cid == '1' %} + <td>{{ w.unconfirmed }}</td> + {% endif %} </tr> + {% if w.cid == '1' %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Blind"></span>Blind Balance:</td> - <td class="bold">{{ w.blind_balance }}</td>{% if w.blind_unconfirmed %} + <td class="bold">{{ w.blind_balance }}</td> + {% if w.blind_unconfirmed %} <td>Blind Unconfirmed:</td> - <td>{{ w.blind_unconfirmed }}</td>{% endif %} + <td>{{ w.blind_unconfirmed }}</td> + {% endif %} </tr> <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Anon"></span>Anon Balance:</td> - <td class="bold">{{ w.anon_balance }}</td>{% if w.anon_pending %} + <td class="bold">{{ w.anon_balance }}</td> + {% if w.anon_pending %} <td>Anon Pending:</td> - <td>{{ w.anon_pending }}</td>{% endif %} - </tr> {% endif %} + <td>{{ w.anon_pending }}</td>{% endif %} </tr> + {% endif %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Blocks:</td> <td>{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</td> @@ -168,255 +167,245 @@ <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Bootstrapping:</td> <td>{{ w.bootstrapping }}</td> - </tr> {% endif %} + </tr> + {% endif %} <tr class="bg-white border-t hover:bg-gray-50"> <td class="py-4 px-6 bold">Expected Seed:</td> <td>{{ w.expected_seed }}</td> - {% if w.expected_seed != true %} - </tr> - </table> + {% if w.expected_seed != true %} + </tr> + </table> </div> </div> <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> <div class="w-full md:w-0/12"> <div class="flex flex-wrap justify-end -m-1.5"> <div class="w-full md:w-auto p-1.5 ml-2"> - <input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();"> - </div> - </div> - </div> - </div> - {% else %} - </tr> {% if w.cid == '1' %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Stealth Address</td> - <td colspan=2 class="monospace bold select-all">{{ w.stealth_address }}</td> - </tr> {% endif %} {% if w.cid == '6' %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Main Address</td> - <td colspan=2 class="monospace bold select-all">{{ w.main_address }}</td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold"> - - -<button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Subaddress"> - <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg> - New Subaddress -</button> - - - </td> - <td colspan=2 class="monospace select-all">{{ w.deposit_address }}</td> - </tr> {% else %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold"> - - - -<button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Deposit Address"> - <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg> - New Deposit Address -</button> - - - - - - - - </td> - <td colspan=2 class="monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td> - </tr> {% endif %} - </table> - </div> - </div> - <section class="bg-white p-6"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">Withdraw</h4> + <input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();"> </div> </div> </div> - </section> - <div class="container px-0 mx-auto mt-2"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> - <tr> - <th scope="col" class="py-3 px-6">OPTIONS</th> - <th scope="col"></th> - <th scope="col"></th> - <th scope="col"></th> - </tr> - </thead> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 pl-6 bold w-1/4"> - - -<button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();"> -<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon> <path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path></g></svg> - Withdraw -</button> - - - - </td> - <td class="py-4 pr-5"> - <input placeholder="Address" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}"> - </td> - <td class="py-4 pr-5"> - <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" name="amt_{{ w.cid }}" value="{{ w.wd_value }}"> - </td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold"> Subtract Fee: </td> - <td> - <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer" type="checkbox" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}> - </td> - <td></td> - </tr> {% if w.cid == '1' %} - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 bold">Type From -> To:</td> - <td class="py-4 pr-5"> - + </div> + {% else %} + </tr> + {% if w.cid == '1' %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Stealth Address</td> + <td colspan=2 class="monospace bold select-all">{{ w.stealth_address }}</td> + </tr> + {% endif %} + {% if w.cid == '6' %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Main Address</td> + <td colspan=2 class="monospace bold select-all">{{ w.main_address }}</td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold"> + <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Subaddress"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff" class="nc-icon-wrapper"> + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> New Subaddress </button> + </td> + <td colspan=2 class="monospace select-all">{{ w.deposit_address }}</td> + </tr> + {% else %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold"> + <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Deposit Address"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff" class="nc-icon-wrapper"> + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> New Deposit Address </button> + </td> + <td colspan=2 class="monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td> + </tr> + {% endif %} + </table> + </div> + </div> + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">Withdraw</h4> </div> + </div> + </section> + <div class="container px-0 mx-auto mt-2"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6">OPTIONS</th> + <th scope="col"></th> + <th scope="col"></th> + <th scope="col"></th> + </tr> + </thead> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 pl-6 bold w-1/4"> + <button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff" class="nc-icon-wrapper"> + <polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon> + <path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path> + </g> + </svg> Withdraw </button> + </td> + <td class="py-4 pr-5"> + <input placeholder="Address" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}"> </td> + <td class="py-4 pr-5"> + <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" name="amt_{{ w.cid }}" value="{{ w.wd_value }}"> </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold"> Subtract Fee: </td> + <td> + <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer" type="checkbox" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}> </td> + <td></td> + </tr> + {% if w.cid == '1' %} + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 bold">Type From -> To:</td> + <td class="py-4 pr-5"> <div class="w-full md:flex-1"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_from_{{ w.cid }}"> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_from_{{ w.cid }}"> <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option> <option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option> <option value="anon" {% if w.wd_type_from=='anon' %} selected{% endif %}>Anon</option> </select> </div> </div> - </td> - <td class="py-4 pr-5"> - - <div class="w-full md:flex-1"> + </td> + <td class="py-4 pr-5"> + <div class="w-full md:flex-1"> <div class="relative"> <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path> - </svg> - <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_to_{{ w.cid }}"> + </svg> + <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_to_{{ w.cid }}"> <option value="plain" {% if w.wd_type_to=='plain' %} selected{% endif %}>Plain</option> <option value="blind" {% if w.wd_type_to=='blind' %} selected{% endif %}>Blind</option> <option value="anon" {% if w.wd_type_to=='anon' %} selected{% endif %}>Anon</option> </select> </div> </div> - </td> - <td class="py-4"> </td> - </tr> {% endif %} - <tr class="bg-white border-t hover:bg-gray-50 "> - <td class="py-4 px-6 bold">Fee Rate:</td> - <td>{{ w.fee_rate }}</td> - <td><b>Est Fee:</b> {{ w.est_fee }}</td> - <td></td> - </tr> - </table> - </div> - </div> {% if w.cid != '6' %} {% if w.show_utxo_groups %} - <section class="bg-white p-6"> - <div class="flex flex-wrap items-center"> - <div class="w-full"> - <h4 class="font-semibold text-black text-2xl">UTXO Groups</h4> - </div> - </div> - </section> - <div class="container px-0 mx-auto mt-2"> - <div class="overflow-x-auto relative border sm:rounded-lg"> - <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> - <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> - <tr> - <th scope="col" class="py-3 px-6">OPTIONS</th> - <th scope="col"></th> - </tr> - </thead> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6 w-1/4 bold">UTXO Groups:</td> - <td class="py-4 pr-7"> - <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" id="tx_view" rows="6" readonly>{{ w.utxo_groups }}</textarea> - </td> - </tr> - <tr class="bg-white border-t hover:bg-gray-50"> - <td class="py-4 px-6"> -<button type="submit" class="flex flex-wrap justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();"> -<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"> <polyline points="1 15 1 21 23 21 23 15"></polyline> <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line> <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line> </g></svg> - Create UTXO -</button> - - </td> - <td> - <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="utxo_value" value="{{ w.utxo_value }}"> - </td> - </tr> - </table> + </td> + <td class="py-4"> </td> + </tr> + {% endif %} + <tr class="bg-white border-t hover:bg-gray-50 "> + <td class="py-4 px-6 bold">Fee Rate:</td> + <td>{{ w.fee_rate }}</td> + <td><b>Est Fee:</b> {{ w.est_fee }}</td> + <td></td> + </tr> + </table> + </div> + </div> + {% if w.cid != '6' %} + {% if w.show_utxo_groups %} + <section class="bg-white p-6"> + <div class="flex flex-wrap items-center"> + <div class="w-full"> + <h4 class="font-semibold text-black text-2xl">UTXO Groups</h4> </div> + </div> + </section> + <div class="container px-0 mx-auto mt-2"> + <div class="overflow-x-auto relative border sm:rounded-lg"> + <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> + <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300"> + <tr> + <th scope="col" class="py-3 px-6">OPTIONS</th> + <th scope="col"></th> + </tr> + </thead> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6 w-1/4 bold">UTXO Groups:</td> + <td class="py-4 pr-7"> + <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" id="tx_view" rows="6" readonly>{{ w.utxo_groups }}</textarea> + </td> + </tr> + <tr class="bg-white border-t hover:bg-gray-50"> + <td class="py-4 px-6"> + <button type="submit" class="flex flex-wrap justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"> + <polyline points="1 15 1 21 23 21 23 15"></polyline> + <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line> + <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line> + </g> + </svg> Create UTXO </button> + </td> + <td> + <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="utxo_value" value="{{ w.utxo_value }}"> </td> + </tr> + </table> + </div> + </div> + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"> + <rect x="2" y="9" width="12" height="14"></rect> + <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline> + <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline> + </g> + </svg> Close UTXO Groups </button> </div> </div> - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5 ml-2"> - -<button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups"> -<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2" y="9" width="12" height="14"></rect> <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline> <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline></g></svg> - Close UTXO Groups -</button> - - - - - - </div> - </div> + </div> + </div> + {% else %} + <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> + <div class="w-full md:w-0/12"> + <div class="flex flex-wrap justify-end -m-1.5"> + <div class="w-full md:w-auto p-1.5 ml-2"> + <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"> + <rect x="2" y="9" width="12" height="14"></rect> + <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline> + <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline> + </g> + </svg> Show UTXO Groups </button> </div> - </div> {% else %} - <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md"> - <div class="w-full md:w-0/12"> - <div class="flex flex-wrap justify-end -m-1.5"> - <div class="w-full md:w-auto p-1.5 ml-2"> - + </div> + </div> + </div> + {% endif %} + {% endif %} + {% endif %} + {% endif %} + {% endif %} + <!-- havedata --> + <input type="hidden" name="formid" value="{{ form_id }}"> </form> + </div> + <script> + function confirmReseed() { + return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets."); + } -<button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups"> -<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2" y="9" width="12" height="14"></rect> <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline> <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline></g></svg> - Show UTXO Groups -</button> + function confirmWithdrawal() { + return confirm("Are you sure?"); + } - - </div> - </div> - </div> - </div> {% endif %} {% endif %} {% endif %} {% endif %} {% endif %} - <!-- havedata --> - <input type="hidden" name="formid" value="{{ form_id }}"> - </form> -</div> - - -<script> - function confirmReseed() - { - return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets."); - } - - function confirmWithdrawal() - { - return confirm("Are you sure?"); - } - - function confirmUTXOResize() - { - return confirm("Are you sure?"); - } -</script> - -</div> + function confirmUTXOResize() { + return confirm("Are you sure?"); + } + </script> + </div> </div> </div> </div> {% include 'footer.html' %} </body> - -</html> +</html> \ No newline at end of file diff --git a/basicswap/templates/wallets.html b/basicswap/templates/wallets.html index 3f26154..174f2d9 100644 --- a/basicswap/templates/wallets.html +++ b/basicswap/templates/wallets.html @@ -24,96 +24,87 @@ </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2> <p class="font-semibold text-coolGray-200">Check your coin balances and manage your wallets. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p> </div> <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> - <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets"> - <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg> - <span>Refresh</span> - </a> + <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets"> + <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"> + <g fill="#ffffff" class="nc-icon-wrapper"> + <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> + <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path> + </g> + </svg> <span>Refresh</span> </a> </div> </div> </div> </div> </section> - {% include 'inc_messages.html' %} - <section class="bg-white py-4"> <div class="container px-4 mx-auto"> - <div class="flex flex-wrap -m-4"> {% for w in wallets %} {% if w.havedata %} {% if w.error %} - <p>Error: {{ w.error }}</p> {% else %} + <div class="flex flex-wrap -m-4"> + {% for w in wallets %} + {% if w.havedata %} + {% if w.error %} + <p>Error: {{ w.error }}</p> + {% else %} <div class="w-full lg:w-1/3 p-4"> <div class="bg-white shadow rounded overflow-hidden"> <div class="pt-6 px-6 mb-10 flex justify-between items-center"> <span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded"> <img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt=""></span> <a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage</a> </div> <div class="px-6 mb-6"> <h4 class="text-xl font-bold">{{ w.name }} <span class="inline-block font-medium text-xs text-gray-500">({{ w.ticker }})</span></h4> - <p class="text-xs text-gray-500">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">Updating</span></p> {% endif %} - </div> + <p class="text-xs text-gray-500">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">Updating</span></p> {% endif %} </div> <div class="p-6 bg-gray-50"> <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.balance }}</span> - </div> {% if w.unconfirmed %} + <h4 class="text-xs font-medium">Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.balance }}</span> </div> {% if w.unconfirmed %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.unconfirmed }}</span> - </div> {% endif %} {% if w.cid == '1' %} + <h4 class="text-xs font-medium">Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.unconfirmed }}</span> </div> {% endif %} {% if w.cid == '1' %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Blind Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_balance }}</span> - </div> {% if w.blind_unconfirmed %} + <h4 class="text-xs font-medium">Blind Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_balance }}</span> </div> {% if w.blind_unconfirmed %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Blind Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_unconfirmed }}</span> - </div> {% endif %} + <h4 class="text-xs font-medium">Blind Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_unconfirmed }}</span> </div> {% endif %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Anon Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_balance }}</span> - </div> {% if w.anon_pending %} + <h4 class="text-xs font-medium">Anon Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_balance }}</span> </div> {% if w.anon_pending %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Anon Pending:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_pending }}</span> - </div> {% endif %} {% endif %} + <h4 class="text-xs font-medium">Anon Pending:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_pending }}</span> </div> {% endif %} {% endif %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Blocks:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</span> - </div> + <h4 class="text-xs font-medium">Blocks:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</span> </div> <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Last Updated:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.lastupdated }}</span> - </div> {% if w.bootstrapping %} + <h4 class="text-xs font-medium">Last Updated:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.lastupdated }}</span> </div> {% if w.bootstrapping %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Bootstrapping:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.bootstrapping }}</span> - </div> {% endif %} + <h4 class="text-xs font-medium">Bootstrapping:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.bootstrapping }}</span> </div> {% endif %} <div class="flex mb-2 justify-between items-center"> - <h4 class="text-xs font-medium">Expected Seed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.expected_seed }}</span> - </div> + <h4 class="text-xs font-medium">Expected Seed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.expected_seed }}</span> </div> <div class="flex justify-between mb-1 mt-10"> <span class="text-xs font-medium text-blue-700">Blockchain</span> <span class="text-xs font-medium text-blue-700">{{ w.synced }}%</span> </div> <div class="w-full bg-gray-200 rounded-full h-1"> <div class="bg-blue-500 h-1 rounded-full" style="width: {{ w.synced }}%"></div> </div> </div> - </div> {% endif %} {% endif %} + </div> + {% endif %} + {% endif %} <!-- havedata --> - </div> {% endfor %} + </div> + {% endfor %} <script> - function confirmReseed() - { + function confirmReseed() { return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets."); } - function confirmWithdrawal() - { + function confirmWithdrawal() { return confirm("Are you sure?"); } </script> </div> </section> -</div> + </div> {% include 'footer.html' %} </body> </html> \ No newline at end of file diff --git a/basicswap/templates/watched.html b/basicswap/templates/watched.html index c96d31b..60d4f76 100644 --- a/basicswap/templates/watched.html +++ b/basicswap/templates/watched.html @@ -20,18 +20,13 @@ <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path> </svg> </li> - </ul> </div> </div> </section> - <section class="py-4"> <div class="container px-4 mx-auto"> - <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> - <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> - <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> + <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt=""> <div class="relative z-20 flex flex-wrap items-center -m-3"> <div class="w-full md:w-1/2 p-3"> <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Watched Outputs</h2> @@ -41,13 +36,11 @@ </div> </div> </section> - <section class="bg-white"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white "> <div class="pb-6 border-coolGray-100"> <div class="flex flex-wrap items-center justify-between -m-2"> <div class="w-full pt-2"> - <section class="bg-white p-6"> <div class="flex flex-wrap items-center"> <div class="w-full"> @@ -56,7 +49,7 @@ </div> </section> - <div class="container px-0 mx-auto mt-5"> + <div class="container px-0 mx-auto"> <div class="overflow-x-auto relative border sm:rounded-lg"> <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300"> @@ -74,6 +67,7 @@ <td class="py-4">{{ ls[1] }}</td> </tr> {% endfor %} + </table> </div> </div> @@ -101,6 +95,7 @@ <td class="py-4">{{ wo[4] }}</td> </tr> {% endfor %} + </table> </div> </div> @@ -112,8 +107,7 @@ </section> </div> - {% include 'footer.html' %} +{% include 'footer.html' %} </div> </body> - -</html> +</html> \ No newline at end of file