So I am trying to render a loading spinner page, for example on testview.html, before rendering my dynamically created report template, report.html.
I was thinking of a fork, with one rendering the loading spinner and the other one loading and processing my data. Then, when the loading and processing is done, I want to use the context created with my data and inject it into my report template before initializing and rendering it.
The problem is that I can’t load report.html without the context since I need to initialize variables and functions in order to initialize the page.
Here is an abstract of my report.html file:
<body>
<div class="navbar">
<p>{{eng_job}} - {{event_name}}</p>
<a href="/index/"><i class="bx bxs-home" style="color:#ffffff"></i></a>
{% for sheet in sheets %}
{% if sheet == sheet_name %}
<a class="selected" href="/{{eng_job}}/{{event_name}}/{{sheet}}/">{{ sheet }}</a>
{% else %}
<a href="/{{eng_job}}/{{event_name}}/{{sheet}}/">{{ sheet }}</a>
{% endif %}
{% endfor %}
<div class="subnav">
<button class="subnavbtn">Save <i class='bx bxs-chevron-down' style='color:#ffffff' ></i></button>
<div class="subnav-content">
<button type="submit" id="templateButton" form="templateForm">Save Template & Data</button>
<button type="submit" id="saveButton" form="chartForm">Save Data</button>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Add <i class='bx bxs-chevron-down' style='color:#ffffff' ></i></button>
<div class="subnav-content">
<button id="addtablebutton" onclick="openFilterPopup()">Add Table</button>
<button id="addimagebutton" onclick="toggleImageUpload()">Add Image</button>
<button id="addchartbutton" onclick="addChart()">Add Chart</button>
<button id="addtextbutton" onclick="addTextArea()">Add Text</button>
</div>
</div>
<div class="subnav">
<button class="subnavbtn" id="editModeButton">Edit</button>
</div>
</div>
<div class="body">
<h1>{{eng_job}} - {{event_name}} - {{sheet_name}}</h1>
<form id="templateForm" method="post">
{% csrf_token %}
<input type="hidden" name="form_id" value="templateForm">
<input type="hidden" name="chart_info" value="">
<input type="hidden" name="text_info" value="{}">
</form>
<form id="chartForm" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="hidden" name="text_info" value="{}">
<input type="hidden" name="form_id" value="chartForm">
<input type="hidden" name="chart_info" value="">
</form>
<div id="imageUploadContainer" class="upload-container" style="display: none;">
<div class="image-upload-drop-zone" id="imageUploadDropZone"
ondragover="handleDragOver(event)"
ondragleave="handleDragLeave(event)"
ondrop="handleDrop(event)">
<span class="upload-text">Drop images here, paste from clipboard or <a href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('document_attachment_doc').click()">browse files</a>
</span>
<form id="new_document_attachment" method="post" enctype="multipart/form-data" >
{% csrf_token %}
<input type="file" name="document_attachment_doc" id="document_attachment_doc" multiple accept="image/*" style="display:none">
</form>
<div id="previewContainer"></div>
<button type="submit" id="saveButton" form="new_document_attachment" class="button">Add to report</button>
</div>
<div id="closeIcon" class="close-icon" onclick="closeUploadZone()">
<i class='bx bx-x-circle'></i>
</div>
</div>
<div id="filterPopupContainer" class="upload-container" style="display: none;">
<div class="popup-content">
<h3>Select Filters</h3>
<div id="sessionFilters" class="filter-section">
<h4>Sessions</h4>
</div>
<div id="driverFilters" class="filter-section">
<h4>Drivers</h4>
</div>
<div id="columnFilters" class="filter-section">
<h4>Columns</h4>
<input id="columnInput" list="columnDatalist">
<datalist autocomplete="off" id="columnDatalist"></datalist>
<div id="chosenColumnsList" class="chosen-columns-list"></div>
</div>
<div class="popup-buttons">
<button id="validateFilters" class="button">Validate</button>
</div>
<div id="closeIcon" class="close-icon" onclick="closeFilterZone()">
<i class='bx bx-x-circle'></i>
</div>
</div>
</div>
<div id="filterPopupContainerUpdate" class="upload-container" style="display: none;">
<div class="popup-content">
<h3>Select Filters</h3>
<div id="sessionFiltersUpdate" class="filter-section">
<h4>Sessions</h4>
</div>
<div id="driverFiltersUpdate" class="filter-section">
<h4>Drivers</h4>
</div>
<div id="columnFiltersUpdate" class="filter-section">
<h4>Columns</h4>
<input id="columnInputUpdate" list="columnDatalistUpdate">
<datalist autocomplete="off" id="columnDatalistUpdate"></datalist>
<div id="chosenColumnsListUpdate" class="chosen-columns-list"></div>
</div>
<div class="popup-buttons">
<button id="updateFilters" class="button">Update</button>
</div>
<div id="closeIconUpdate" class="close-icon" onclick="closeFilterZone()">
<i class='bx bx-x-circle'></i>
</div>
</div>
</div>
<div id="conclusion" class="form-container">
<div id="conclusionEditor" class="quill-editor"></div>
</div>
<div id="chartSection">
{% for chart_id in chart_info_list %}
<div class="container">
<div class="chart-container">
<canvas id="{{ chart_id.chartId }}"></canvas>
<div class="values-container">
<div class="dropdown-container">
<label for="scope">Scope:</label>
<select id="scope_{{ chart_id.chartId }}" name="scope_{{ chart_id.chartId }}" onchange="updateChart(charts.find(chart => chart.chartId === '{{ chart_id.chartId }}'))">
<option value="event">Event</option>
{% for session in sessions %}
{% if session in sheet_name %}
<option value="{{ session }}" selected>{{ session }}</option>
{% else %}
<option value="{{ session }}">{{ session }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="dropdown-container">
<label for="xAxis">X-Axis:</label>
<input autocomplete="off" list="xAxisList" id="xAxis_{{ chart_id.chartId }}" name="xAxis_{{ chart_id.chartId }}" onchange="updateChart(charts.find(chart => chart.chartId === '{{ chart_id.chartId }}'))" placeholder="Select X-Axis">
<datalist id="xAxisList">
{% for column in columns_names %}
{% if column != 'id' %}
<option value="{{ column }}">
{% endif %}
{% endfor %}
</datalist>
</div>
<div class="dropdown-container">
<label for="yAxis">Y-Axis:</label>
<input autocomplete="off" list="yAxisList" id="yAxis_{{ chart_id.chartId }}" name="yAxis_{{ chart_id.chartId }}" onchange="updateChart(charts.find(chart => chart.chartId === '{{ chart_id.chartId }}'))" placeholder="Select Y-Axis">
<datalist id="yAxisList">
{% for column in columns_names %}
{% if column != 'id' %}
<option value="{{ column }}">
{% endif %}
{% endfor %}
</datalist>
</div>
<div class="dropdown-container">
<label for="xScale">X-Scale:</label>
<input type="number" id="xMinScale_{{ chart_id.chartId }}" class="scale-input" name="xMinScale_{{ chart_id.chartId }}" value="" placeholder="Min X" onchange="updateChart(charts.find(chart => chart.chartId === '{{ chart_id.chartId }}'))">
<input type="number" id="xMaxScale_{{ chart_id.chartId }}" class="scale-input" name="xMaxScale_{{ chart_id.chartId }}" value="" placeholder="Max X" onchange="updateChart(charts.find(chart => chart.chartId === '{{ chart_id.chartId }}'))">
</div>
<div class="dropdown-container">
<label for="yScale">Y-Scale:</label>
<input type="number" id="yMinScale_{{ chart_id.chartId }}" class="scale-input" name="yMinScale_{{ chart_id.chartId }}" value="" placeholder="Min Y" onchange="updateChart(charts.find(chart => chart.chartId === '{{ chart_id.chartId }}'))">
<input type="number" id="yMaxScale_{{ chart_id.chartId }}" class="scale-input" name="yMaxScale_{{ chart_id.chartId }}" value="" placeholder="Max Y" onchange="updateChart(charts.find(chart => chart.chartId === '{{ chart_id.chartId }}'))">
</div>
<div id="comments_{{ chart_id.chartId }}" class="form-container">
<div id="comments_{{ chart_id.chartId }}Editor" class="quill-editor1"></div>
</div>
</div>
</div>
<div class="table-container">
<button onclick="toggleTableVisibility('{{ chart_id.chartId }}')" class="button">Toggle Table</button>
<table id="table_{{ chart_id.chartId }}"></table>
</div>
</div>
{% endfor %}
</div>
<div id="textAreasContainer" class="container"></div>
<div id="imageSection" class="container">
{% if attachments %}
{% for upload_id, attachment_list in attachments.items %}
<div class="image-row">
{% if attachment_list %}
{% for attachment in attachment_list %}
<img src="data:image/jpeg;base64,{{ attachment.file|b64encode }}" alt="{{ attachment.title }}">
{% endfor %}
<textarea id="comments_upload{{ upload_id }}" name="attachmentComments" placeholder="Write your comments" onchange="handleTextareaChange('{{ upload_id }}')">{{ attachment_list.0.upload.comments }}</textarea>
<input type="hidden" id="hidden_comments_{{ upload_id }}" name="comments_{{ upload_id }}" value="{{ attachment_list.0.upload.comments }}">
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
<div id="tableSection" class="container">
{% if display_tables %}
{% for table_id, tables in display_tables.items %}
<div class="container" id="table_{{ table_id }}"></div>
{% endfor %}
{% endif %}
</div>
</div>
</body>
<script>
const charts = [];
let images = [];
let myChart;
let chartData = JSON.parse('{{ chart_data|safe }}');
let chart_info = JSON.parse('{{ chart_info|escapejs|safe }}');
let text_info = JSON.parse('{{ text_info|escapejs|safe }}') || {};
let table_info = JSON.parse('{{ tables|safe }}') || {};
let textAreaCounter = Object.keys(text_info).length + 1;
let hiddenDatasets = {};
let datasets = [];
let chartId;
let chartIdCounter = 1;
let DriverMinMax = {};
...
</script>
here is my Django view:
@csrf_protect
def report(request, eng_job, event_name, sheet_name):
if request.method == 'GET':
if event_name and sheet_name:
if not chartdata.objects.using("write_db").filter(eng_job=eng_job, event=event_name, sheet=sheet_name).exists():
# Duplicate the template if the page does not exist
template = generate_template(eng_job, event_name, sheet_name)
context = enm_report.enm_report(eng_job, event_name, sheet_name)
if context:
return render(request, 'ENM/report.html', context)
redirect_url = f'/{eng_job}/{event_name}/{sheet_name}/'
return HttpResponseRedirect(redirect_url)
elif request.method == 'POST':
charts_json = request.POST.get('chart_info')
charts = json.loads(charts_json)
conclusion = request.POST.get('conclusion')
text_json = request.POST.get('text_info')
images = request.FILES.getlist('image')
uploads = request.POST.getlist('uploadId')
tables_json = request.POST.getlist('tables')
tables = [json.loads(tables) for tables in tables_json] if tables_json else []
comments = [request.POST.get(f'comments_upload{upload_id}', '') for upload_id in uploads]
text = json.loads(text_json)
if request.POST.get('form_id') == 'chartForm':
if charts_json:
chart_info = chartdata.objects.using("write_db").get_or_create(eng_job=eng_job, event=event_name, sheet=sheet_name)[0]
chart_info.charts = charts
if conclusion != None:
chart_info.conclusion = conclusion
if text_json != '{}':
chart_info.text = text_json
if tables:
for table in tables:
if type(table) == list:
for tbl in table:
upload_obj, _ = tableau.objects.using("write_db").get_or_create(
chartdata=chart_info,
tableId=tbl.get('tableId')
)
upload_obj.table_info = tbl
upload_obj.save()
elif type(table) == dict:
upload_obj, _ = tableau.objects.using("write_db").get_or_create(
chartdata=chart_info,
tableId=table.get('tableId')
)
upload_obj.table_info = table
upload_obj.save()
chart_info.save()
if images:
# Iterate over both images, uploads, and comments simultaneously
for img, upload_id, comment in zip(images, uploads, comments):
# Get or create the upload object based on the upload ID
upload_obj, _ = upload.objects.using("write_db").get_or_create(
chartdata=chart_info,
uploadId=upload_id,
)
# Set the comment for the upload object
upload_obj.comments = comment
upload_obj.save()
img_content = img.read()
# Associate each image with its corresponding upload object
attachment.objects.create(
title=img.name,
file=img_content,
upload=upload_obj
)
elif comments and not images:
for upload_id, comment in zip(uploads, comments):
upload_obj = upload.objects.using("write_db").get_or_create(
chartdata=chart_info,
id=upload_id
)[0]
upload_obj.comments = comment
upload_obj.save()
elif request.POST.get('form_id') == 'templateForm':
if charts_json:
chart_info = chartdata.objects.using("write_db").get_or_create(eng_job=eng_job, event=event_name, sheet=sheet_name)[0]
chart_info.charts = charts
chart_info.conclusion = conclusion
chart_info.text = text_json
chart_info.save()