Added loading animation.
Stefan Bohacek
rodzic
b15a697a89
commit
8c71a4fc3c
|
|
@ -1,21 +1,21 @@
|
|||
import sortArrayOfObjects from"/js/modules/sortArrayOfObjects.min.js";import loadEmbedScript from"/js/modules/loadEmbedScript.min.js";import Cookie from"/js/cookies/main.min.js";const cookieManager=new Cookie,fileInput=document.getElementById("file-input"),introElement=document.getElementById("intro"),resultsElement=document.getElementById("results"),userInfo=document.getElementById("user-info"),userAvatar=document.getElementById("user-avatar"),userDescription=document.getElementById("user-description"),userDataBreakdown=document.getElementById("user-data-breakdown"),chartElement=document.getElementById("chart"),handleUpload=()=>{fileInput&&fileInput.addEventListener("change",async e=>{var n=new FormData;n.set("archive",fileInput.files[0]);n=await(await fetch("/extract-data",{method:"POST",body:n})).json();if(console.log(n),n&&n.data){introElement.classList.add("d-none"),resultsElement.classList.remove("d-none");n=n.data;let e="",t="",o=(n.actor?(e+=`
|
||||
import sortArrayOfObjects from"/js/modules/sortArrayOfObjects.min.js";import loadEmbedScript from"/js/modules/loadEmbedScript.min.js";import Cookie from"/js/cookies/main.min.js";const cookieManager=new Cookie,fileInput=document.getElementById("file-input"),introElement=document.getElementById("intro"),loadingAnimation=document.getElementById("loading-animation"),resultsElement=document.getElementById("results"),userInfo=document.getElementById("user-info"),userAvatar=document.getElementById("user-avatar"),userDescription=document.getElementById("user-description"),userDataBreakdown=document.getElementById("user-data-breakdown"),chartElement=document.getElementById("chart"),handleUpload=()=>{fileInput&&fileInput.addEventListener("change",async e=>{loadingAnimation.classList.remove("d-none");var s=new FormData;s.set("archive",fileInput.files[0]);s=await(await fetch("/extract-data",{method:"POST",body:s})).json();if(console.log(s),s&&s.data){introElement.classList.add("d-none"),resultsElement.classList.remove("d-none");s=s.data;let e="",t="",o=(s.actor?(e+=`
|
||||
<p class="mb-0">
|
||||
<strong>${n.actor.name||n.actor.preferredUsername}</strong>
|
||||
<strong>${s.actor.name||s.actor.preferredUsername}</strong>
|
||||
</p>
|
||||
${n.actor.summary.replaceAll('class="invisible"',"")}
|
||||
`,n.actor.attachment&&(e+=`
|
||||
${s.actor.summary.replaceAll('class="invisible"',"")}
|
||||
`,s.actor.attachment&&(e+=`
|
||||
<ul class="list-group">
|
||||
${n.actor.attachment.map(e=>`
|
||||
${s.actor.attachment.map(e=>`
|
||||
<li class="list-group-item">${e.name}: ${e.value.replace('class="invisible"',"")}</li>
|
||||
`).join("")}
|
||||
</ul>
|
||||
`),userDescription.innerHTML=`<div>${e}</div>`,userAvatar.innerHTML=`
|
||||
<img class="img-thumbnail" width="64" height="64" src="data:image/jpg;base64,${n.avatar}">
|
||||
`):(userInfo.remove(),userDescription.remove()),[]),a,r=0;n?.outbox?.orderedItems?o=n.outbox.orderedItems:n?.outbox&&(o=n.outbox),(r=o.length)&&(a=o[0]);var i={weekday:"long",year:"numeric",month:"long",day:"numeric"};n.actor&&(l=moment(n.actor.published),l=moment().diff(l,"days"),t+=`
|
||||
<img class="img-thumbnail" width="64" height="64" src="data:image/jpg;base64,${s.avatar}">
|
||||
`):(userInfo.remove(),userDescription.remove()),[]),a,n=0;s?.outbox?.orderedItems?o=s.outbox.orderedItems:s?.outbox&&(o=s.outbox),(n=o.length)&&(a=o[0]);var i={weekday:"long",year:"numeric",month:"long",day:"numeric"};s.actor&&(l=moment(s.actor.published),l=moment().diff(l,"days"),t+=`
|
||||
<p>
|
||||
You created your account on <strong>${new Date(n.actor.published).toLocaleDateString(void 0,i)}</strong>, which is <strong>${l.toLocaleString()} day(s) ago</strong>. Since then, you posted <strong>${r.toLocaleString()} times</strong>, or about ${Math.round(r/l).toLocaleString()} time(s) a day on average.
|
||||
You created your account on <strong>${new Date(s.actor.published).toLocaleDateString(void 0,i)}</strong>, which is <strong>${l.toLocaleString()} day(s) ago</strong>. Since then, you posted <strong>${n.toLocaleString()} times</strong>, or about ${Math.round(n/l).toLocaleString()} time(s) a day on average.
|
||||
</p>
|
||||
`);let s;"mastodon"===n.format?(a&&(i=a?.object?.id||a?.id,l=new URL(i),s=l.protocol+"//"+l.hostname,t=t+`
|
||||
`);let r;"mastodon"===s.format?(a&&(i=a?.object?.id||a?.id,l=new URL(i),r=l.protocol+"//"+l.hostname,t=t+`
|
||||
<p>
|
||||
Here's your <a href="${i}" target="_blank">first post</a>!
|
||||
</p>
|
||||
|
|
@ -33,5 +33,5 @@ import sortArrayOfObjects from"/js/modules/sortArrayOfObjects.min.js";import loa
|
|||
<p>
|
||||
Here's what your posting history looks like.
|
||||
</p>
|
||||
`,userDataBreakdown.innerHTML=t,"mastodon"===n.format&&loadEmbedScript(s);var l={labels:o.map(e=>moment(e.published||e.createdAt)),datasets:[{label:"Your posts in time",data:o.map((e,t)=>({x:moment(e.published||e.createdAt),y:new Date(e.published||e.createdAt).getHours()})),backgroundColor:["#ff6384"]}]};new Chart(chartElement,{type:"scatter",data:l,options:{scales:{x:{type:"time",position:"bottom",ticks:{beginAtZero:!1,stepSize:10}},y:{ticks:{beginAtZero:!1,display:!1},scaleLabel:{display:!1},minorTickInterval:null}}}})}})};export default handleUpload;
|
||||
`,userDataBreakdown.innerHTML=t,"mastodon"===s.format&&loadEmbedScript(r);var l={labels:o.map(e=>moment(e.published||e.createdAt)),datasets:[{label:"Your posts in time",data:o.map((e,t)=>({x:moment(e.published||e.createdAt),y:new Date(e.published||e.createdAt).getHours()})),backgroundColor:["#ff6384"]}]};new Chart(chartElement,{type:"scatter",data:l,options:{scales:{x:{type:"time",position:"bottom",ticks:{beginAtZero:!1,stepSize:10}},y:{ticks:{beginAtZero:!1,display:!1},scaleLabel:{display:!1},minorTickInterval:null}}}})}else loadingAnimation.classList.add("d-none")})};export default handleUpload;
|
||||
//# sourceMappingURL=handleUpload.min.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,7 @@ import Cookie from "/js/cookies/main.min.js";
|
|||
const cookieManager = new Cookie();
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const introElement = document.getElementById("intro");
|
||||
const loadingAnimation = document.getElementById("loading-animation");
|
||||
const resultsElement = document.getElementById("results");
|
||||
const userInfo = document.getElementById("user-info");
|
||||
const userAvatar = document.getElementById("user-avatar");
|
||||
|
|
@ -15,6 +16,7 @@ const chartElement = document.getElementById("chart");
|
|||
const handleUpload = () => {
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener("change", async (ev) => {
|
||||
loadingAnimation.classList.remove('d-none');
|
||||
const formData = new FormData();
|
||||
formData.set("archive", fileInput.files[0]);
|
||||
|
||||
|
|
@ -209,6 +211,8 @@ const handleUpload = () => {
|
|||
// }
|
||||
},
|
||||
});
|
||||
} else {
|
||||
loadingAnimation.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 text-center">
|
||||
<img
|
||||
loading="lazy"
|
||||
loading="lazy"
|
||||
width="300"
|
||||
height="389"
|
||||
src="/images/poser-illustrations/Files/PNG with transparency/Illustration 6.png"
|
||||
|
|
@ -19,23 +19,36 @@
|
|||
<p class="mt-5 mt-md-2 text-start">
|
||||
<ol>
|
||||
<li>
|
||||
Read the <a href="/privacy-policy">privacy policy</a>.
|
||||
Read the
|
||||
<a href="/privacy-policy">privacy policy</a>.
|
||||
</li>
|
||||
<li>
|
||||
Download your archive. (<a href="/how-to-export">See how.</a>)
|
||||
</li>
|
||||
<li>
|
||||
<label class="form-label" for="avatar">Upload it below.</label>
|
||||
<input class="d-block mt-3 form-control" type="file" id="file-input" name="export" accept="application/tar, application/tar+gzip" />
|
||||
<input
|
||||
class="d-block mt-3 form-control"
|
||||
type="file"
|
||||
id="file-input"
|
||||
name="export"
|
||||
accept="application/tar, application/tar+gzip"
|
||||
/>
|
||||
</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p id="loading-animation" class="d-none mt-4 card-text placeholder-wave">
|
||||
<span class="placeholder placeholder-lg col-12 rounded"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="results" class="container p-5 mb-5 d-none">
|
||||
<div class="row">
|
||||
<div id="user-info" class="col-sm-12 col-lg-6 text-center bg-light rounded">
|
||||
<div
|
||||
id="user-info"
|
||||
class="col-sm-12 col-lg-6 text-center bg-light rounded"
|
||||
>
|
||||
<div class="d-flex sticky-top pt-4 pb-4">
|
||||
<div id="user-avatar" class="flex-shrink-0">
|
||||
</div>
|
||||
|
|
@ -52,5 +65,5 @@
|
|||
<a class="btn btn-primary mt-5" href="/">Start over</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Ładowanie…
Reference in New Issue