fix logs + select custom
*separate logs date and live logic *logs live update can now be toggle *add min-h to avoid weird style for custom select with empty string *
This commit is contained in:
BlasenhauerJ
parent
37ebde3635
commit
c0e649d680
File diff suppressed because one or more lines are too long
|
|
@ -183,17 +183,67 @@ class FetchLogs {
|
|||
this.toDateInp = document.querySelector("input#to-date");
|
||||
this.fromDate = "";
|
||||
this.toDate = "";
|
||||
this.isLiveUpdate = false;
|
||||
this.isLiveON = false;
|
||||
this.updateDelay = 2000;
|
||||
this.lastUpdate = Date.now() - 86400000;
|
||||
this.container = document.querySelector(`[data-${this.prefix}-settings]`);
|
||||
this.logListContainer = document.querySelector(`[data-${this.prefix}-list]`);
|
||||
this.submitSettings = document.querySelector("button#submit-settings");
|
||||
this.logListContainer = document.querySelector(
|
||||
`[data-${this.prefix}-list]`
|
||||
);
|
||||
this.submitDate = document.querySelector("button[data-submit-date]");
|
||||
this.submitLive = document.querySelector("button[data-submit-live]");
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.submitSettings.addEventListener("click", (e) => {
|
||||
//change submit btn text
|
||||
this.liveUpdateInp.addEventListener("change", (e) => {
|
||||
const currValue = this.liveUpdateInp.getAttribute("value");
|
||||
|
||||
if (currValue === "yes") {
|
||||
this.submitDate.classList.add("hidden");
|
||||
this.submitLive.classList.remove("hidden");
|
||||
}
|
||||
|
||||
if (currValue === "no") {
|
||||
this.submitDate.classList.remove("hidden");
|
||||
this.submitLive.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
this.submitLive.addEventListener("click", (e) => {
|
||||
//change state
|
||||
this.submitLive.setAttribute(
|
||||
"data-submit-live",
|
||||
this.submitLive.getAttribute("data-submit-live") === "yes"
|
||||
? "no"
|
||||
: "yes"
|
||||
);
|
||||
|
||||
if (this.submitLive.getAttribute("data-submit-live") === "yes") {
|
||||
this.submitLive.textContent = "Stop live";
|
||||
//check if min setting to fetch
|
||||
const isSettings = this.isSettings();
|
||||
if (!isSettings) return;
|
||||
//if can fetch, remove previous logs
|
||||
this.logListContainer.textContent = "";
|
||||
//get new settings data
|
||||
this.setSettings();
|
||||
//two cases
|
||||
//live update is checked, get data since last update or all if undefined
|
||||
return this.getLogsSinceLastUpdate();
|
||||
}
|
||||
|
||||
if (this.submitLive.getAttribute("data-submit-live") === "no") {
|
||||
this.submitLive.textContent = "Go live";
|
||||
}
|
||||
});
|
||||
|
||||
//when submit btn click
|
||||
this.submitDate.addEventListener("click", (e) => {
|
||||
//logic for the current state
|
||||
|
||||
//check if min setting to fetch
|
||||
const isSettings = this.isSettings();
|
||||
if (!isSettings) return;
|
||||
|
|
@ -202,13 +252,9 @@ class FetchLogs {
|
|||
//get new settings data
|
||||
this.setSettings();
|
||||
//two cases
|
||||
if (this.isLiveUpdate) {
|
||||
//live update is checked, get data since last update or all if undefined
|
||||
return this.getLogsSinceLastUpdate();
|
||||
} else {
|
||||
//get data from the range from/to (defined or default)
|
||||
return this.getLogsFromToDate();
|
||||
}
|
||||
|
||||
//get data from the range from/to (defined or default)
|
||||
return this.getLogsFromToDate();
|
||||
});
|
||||
|
||||
//to date is disabled if live update is set
|
||||
|
|
@ -261,8 +307,6 @@ class FetchLogs {
|
|||
//set update delay
|
||||
this.updateDelay =
|
||||
this.updateDelayInp.value * 1000 ? this.updateDelayInp.value : 2000;
|
||||
//look if live update
|
||||
this.isLiveUpdate = this.liveUpdateInp.checked;
|
||||
}
|
||||
|
||||
goBottomList() {
|
||||
|
|
@ -282,7 +326,7 @@ class FetchLogs {
|
|||
`${location.href}/${this.instanceName}?from_date=${this.fromDate}&to_date=${this.toDate}`
|
||||
);
|
||||
const data = await res.json();
|
||||
return await this.showLogs(data);
|
||||
return await this.showLogsDate(data);
|
||||
}
|
||||
//case from date and to date defined
|
||||
if (!this.toDate) {
|
||||
|
|
@ -290,7 +334,7 @@ class FetchLogs {
|
|||
`${location.href}/${this.instanceName}?from_date=${this.fromDate}`
|
||||
);
|
||||
const data = await res.json();
|
||||
return await this.showLogs(data);
|
||||
return await this.showLogsDate(data);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -300,10 +344,42 @@ class FetchLogs {
|
|||
(this.lastUpdate ? `?last_update=${this.lastUpdate}` : "")
|
||||
);
|
||||
const data = await response.json();
|
||||
return await this.showLogs(data);
|
||||
return await this.showLogsLive(data);
|
||||
}
|
||||
|
||||
async showLogs(res) {
|
||||
async showLogsDate(res, type) {
|
||||
//get last update timestamp
|
||||
this.lastUpdate = res.last_update;
|
||||
//render logs
|
||||
res.logs.forEach((log) => {
|
||||
//container
|
||||
const logContainer = document.createElement("li");
|
||||
logContainer.className =
|
||||
"grid grid-cols-12 border-b border-gray-300 py-2";
|
||||
//type
|
||||
const typeEl = document.createElement("p");
|
||||
typeEl.className =
|
||||
"dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0";
|
||||
typeEl.textContent = log.type;
|
||||
typeEl.setAttribute("data-logs-type", "");
|
||||
logContainer.appendChild(typeEl);
|
||||
//content
|
||||
const contentEl = document.createElement("p");
|
||||
contentEl.className =
|
||||
"dark:text-gray-400 dark:opacity-80 text-sm col-span-9 m-0";
|
||||
contentEl.textContent = log.content;
|
||||
contentEl.setAttribute("data-logs-content", "");
|
||||
logContainer.appendChild(contentEl);
|
||||
//show on DOM
|
||||
this.logListContainer.appendChild(logContainer);
|
||||
});
|
||||
|
||||
//force scroll when no live update
|
||||
const logListEl = document.querySelector(`[data-${this.prefix}-list]`);
|
||||
logListEl.scrollTop = logListEl.scrollHeight;
|
||||
}
|
||||
|
||||
async showLogsLive(res, type) {
|
||||
//get last update timestamp
|
||||
this.lastUpdate = res.last_update;
|
||||
//render logs
|
||||
|
|
@ -331,7 +407,7 @@ class FetchLogs {
|
|||
});
|
||||
|
||||
//if live update, refetch to last update every defined delay
|
||||
if (this.isLiveUpdate) {
|
||||
if (this.submitLive.getAttribute("data-submit-live") === "yes") {
|
||||
setTimeout(() => {
|
||||
this.getLogsSinceLastUpdate();
|
||||
}, this.updateDelay);
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
|
|||
<h5
|
||||
class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
To date
|
||||
To date (default today)
|
||||
</h5>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -168,11 +168,20 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
|
|||
|
||||
<div class="col-span-12 w-full justify-center flex mt-2">
|
||||
<button
|
||||
data-submit-date
|
||||
type="button"
|
||||
id="submit-settings"
|
||||
class="tracking-wide dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
Submit
|
||||
Submit Date
|
||||
</button>
|
||||
<button
|
||||
data-submit-live="no"
|
||||
type="button"
|
||||
id="submit-settings"
|
||||
class="hidden tracking-wide dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
|
||||
>
|
||||
Go Live
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- end actions -->
|
||||
<!-- services container-->
|
||||
<div
|
||||
class="gap-3 p-4 grid grid-cols-12 col-span-12 relative min-w-0 break-words rounded-2xl bg-clip-border"
|
||||
class="gap-8 p-4 grid grid-cols-12 col-span-12 relative min-w-0 break-words rounded-2xl bg-clip-border"
|
||||
>
|
||||
{% if services|length == 0 %}
|
||||
<div class="col-span-12 sm:col-span-4 sm:col-start-5">
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
value="{{item}}"
|
||||
data-setting-select-dropdown-btn="{{value['id']}}"
|
||||
type="button"
|
||||
class="{% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
>
|
||||
{{item}}
|
||||
</button>
|
||||
|
|
@ -155,7 +155,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
value="{{item}}"
|
||||
data-setting-select-dropdown-btn="{{value['id']}}"
|
||||
type="button"
|
||||
class="{% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
>
|
||||
{{item}}
|
||||
</button>
|
||||
|
|
@ -358,7 +358,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
value="{{item}}"
|
||||
data-setting-select-dropdown-btn="{{value['id']}}"
|
||||
type="button"
|
||||
class="{% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-primary text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
>
|
||||
{{item}}
|
||||
</button>
|
||||
|
|
@ -368,7 +368,7 @@ data-plugin-item="{{plugin['id']}}"
|
|||
value="{{item}}"
|
||||
data-setting-select-dropdown-btn="{{value['id']}}"
|
||||
type="button"
|
||||
class="{% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
class="min-h-[38px] {% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b {% endif %} border-b border-l border-r border-gray-300 hover:brightness-90 bg-white text-gray-700 my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
|
||||
>
|
||||
{{item}}
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue