load raw data from JSON per discussion

This avoids loading the data synchronously as a JavaScript snippet, which improves performance when opening the page.
This commit is contained in:
Jesse Plamondon-Willard 2022-04-09 16:01:32 -04:00
parent 26d29a1070
commit 07d07c79e0
No known key found for this signature in database
GPG Key ID: CF8B1456B3E29F49
2 changed files with 36 additions and 17 deletions

View File

@ -42,27 +42,40 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1" crossorigin="anonymous"></script>
<script src="~/Content/js/file-upload.js"></script>
<script src="~/Content/js/log-parser.js"></script>
<script id="serializedData" type="application/json">
@if (!Model.ShowRaw)
{
<text>
{
"messages": @this.ForJson(log?.Messages),
"sections": @this.ForJson(logSections),
"logLevels": @this.ForJson(logLevels),
"modSlugs": @this.ForJson(log?.Mods.DistinctBy(p => p.Name).Select(p => new {p.Name, Slug = Model.GetSlug(p.Name)}).Where(p => p.Name != p.Slug).ToDictionary(p => p.Name, p => p.Slug)),
"screenIds": @this.ForJson(screenIds)
}
</text>
}
else
{
<text>
{
"messages": [],
"sections": {},
"logLevels": {},
"modSlugs": {},
"screenIds": []
}
</text>
}
</script>
<script>
$(function() {
smapi.logParser(
{
logStarted: new Date(@this.ForJson(log?.Timestamp)),
@if (!Model.ShowRaw)
{
<text>
data: {
messages: @this.ForJson(log?.Messages),
sections: @this.ForJson(logSections),
logLevels: @this.ForJson(logLevels),
modSlugs: @this.ForJson(log?.Mods.DistinctBy(p => p.Name).Select(p => new { p.Name, Slug = Model.GetSlug(p.Name) }).Where(p => p.Name != p.Slug).ToDictionary(p => p.Name, p => p.Slug)),
screenIds: @this.ForJson(screenIds)
},
</text>
}
else
{
<text>data: null,</text>
}
dataElement: "script#serializedData",
showPopup: @this.ForJson(log == null),
showMods: @this.ForJson(log?.Mods.Select(p => Model.GetSlug(p.Name)).Distinct().ToDictionary(slug => slug, _ => true)),
showSections: @this.ForJson(Enum.GetNames(typeof(LogSection)).ToDictionary(section => section, _ => false)),

View File

@ -162,8 +162,14 @@ smapi.logParser = function (state) {
}
}
// load raw log data
{
const dataElement = document.querySelector(state.dataElement);
state.data = JSON.parse(dataElement.textContent.trim());
}
// preprocess data for display
state.messages = state.data?.messages || [];
state.messages = state.data.messages || [];
if (state.messages.length) {
const levels = state.data.logLevels;
const sections = state.data.sections;