fix: taibol taxon tree loading

moogoo78 · Jun 26, 2024 · 74a5a4e · 74a5a4e
1 parent c4deb73
commit 74a5a4e
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 76 deletions.
diff --git a/app/static/sites/taibol/css/taxon-tree.css b/app/static/sites/taibol/css/taxon-tree.css
@@ -19,3 +19,107 @@ div.taxonTree__title.opened:before {
   content: "-";
   margin-right: 4px;
 }
+
+#loading {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+  opacity: 0.4;
+  display: none;
+}
+
+
+
+.lds-spinner,
+.lds-spinner div,
+.lds-spinner div:after {
+  box-sizing: border-box;
+}
+.lds-spinner {
+  color: currentColor;
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  z-index: 9998;
+  display: none;
+}
+.lds-spinner div {
+  transform-origin: 40px 40px;
+  animation: lds-spinner 1.2s linear infinite;
+}
+.lds-spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 13.2px;
+  left: 36.8px;
+  width: 6.4px;
+  height: 17.6px;
+  border-radius: 20%;
+  background: currentColor;
+}
+.lds-spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.lds-spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.lds-spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.lds-spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.lds-spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.lds-spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.lds-spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.lds-spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.lds-spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.lds-spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.lds-spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.lds-spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
diff --git a/app/static/sites/taibol/js/taxon-tree.js b/app/static/sites/taibol/js/taxon-tree.js
@@ -3,9 +3,16 @@
 
   const taxonTree = document.getElementById('taxonTree');
   const loading = document.getElementById('loading');
+  const spinner = document.getElementById('spinner');
 
-  const hide = (elem) => { elem.style.display = 'none'; };
-  const show = (elem) => { elem.style.display = 'block'; };
+  const hideLoading = () => {
+    loading.style.display = 'none';
+    spinner.style.display = 'none';
+  };
+  const showLoading = () => {
+    loading.style.display = 'block';
+    spinner.style.display = 'block';
+  };
 
   const fetchData = async (url) => {
     try {
@@ -100,7 +107,7 @@
   };
 
   const fetchChildren = async (rootElem, rank, value) => {
-    show(loading);
+    showLoading();
     let aggregateIndex = (TAXON_RANKS.indexOf(rank) >= 0 && TAXON_RANKS.indexOf(rank) < TAXON_RANKS.length) ? TAXON_RANKS.indexOf(rank) + 1 : '';
     let childField = TAXON_RANKS[aggregateIndex];
     let filtr = {
@@ -178,80 +185,11 @@
       li.appendChild(title);
       return li;
     }));
-    hide(loading);
+    hideLoading();
     childrens.forEach( x => {
       ul.appendChild(x);
     });
     rootElem.insertAdjacentElement('afterend', ul);
-    /*
-    fetch(`/api/v1/search?filter=${JSON.stringify(filtr)}`)
-      .then( resp => resp.json())
-      .then( result => {
-        console.log(result);
-        //let children = await Promise.all(result.data.map( async (item) => {
-        //   console.log(item);
-        // }));
-        result.data.forEach(async (item) => {
-          const li = document.createElement('li');
-          const title = document.createElement('div');
-          title.classList.add('taxonTree__title', 'closed');
-          title.dataset.rankKey = `${childField}:${item[1]}`;
-          //console.log(`${childField}:${item[1]}`);
-          if (childField === 'species_name') {
-            const taxonLink = document.createElement('a');
-            taxonLink.textContent = item[1];
-            taxonLink.href = `/data?kingdom=${item[0]}&collection=${params.get('collection')}&q=${item[1]}`;
-            taxonLink.target = '_blank';
-            title.classList.remove('closed');
-            title.appendChild(taxonLink);
-          } else {
-            const taxonToggle = document.createElement('span');
-            show(loading);
-            let rankLabel = await getRankLabels(childField, item[1]);
-
-            let filter_zh = {
-              sourceData: {
-                filters: {
-                  [`${childField}`]: item[1],
-                  [`${childField}_zh`]: '__NOT_NULL__',
-                },
-                response: 'source_data',
-              },
-              collection_id: [COL_MAP[params.get('collection')]],
-            };
-            let zhRes = await fetchData(`/api/v1/search?filter=${JSON.stringify(filter_zh)}&range=${JSON.stringify([0, 1])}`);
-            let zhLabel = '';
-            if (zhRes.data.length > 0 && zhRes.data[0].source_data[`${childField}_zh`]) {
-              zhLabel = zhRes.data[0].source_data[`${childField}_zh`];
-          }
-            hide(loading);
-            taxonToggle.textContent = `${zhLabel} ${item[1]} | ${rankLabel}`;
-            taxonToggle.onclick = (e) => {
-              e.preventDefault();
-              const children = title.nextElementSibling;
-              //console.log(children, title.dataset);
-              if (children === null) {
-                fetchChildren(title, childField, item[1]);
-              } else {
-                if (children.style.display === 'none') {
-                  children.style.display = 'block';
-                  title.classList.remove('closed');
-                  title.classList.add('opened');
-                } else {
-                  children.style.display = 'none';
-                  title.classList.remove('opened');
-                  title.classList.add('closed');
-                }
-              }
-            };
-            title.appendChild(taxonToggle);
-          }
-          li.appendChild(title);
-          ul.appendChild(li);
-        });
-        rootElem.insertAdjacentElement('afterend', ul);
-        });
-        */
   };
   const initKingdoms = async (rootElem) => {
     let ul = document.createElement('ul');
@@ -291,8 +229,6 @@
       ul.appendChild(x);
     })
     rootElem.insertAdjacentElement('afterend', ul);
-
-    hide(loading);
   }
   initKingdoms(taxonTree);
 

diff --git a/app/templates/sites/taibol/taxa-index.html b/app/templates/sites/taibol/taxa-index.html
@@ -13,7 +13,10 @@
 <div class="specimen-list-container">
   <h5 class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom">{% if request.args.collection == "material_sample" %}遺傳物質{% elif request.args.collection == "barcode" %}生命條碼{% endif %} - 典藏現況</h5>
   <!-- insprired from: https://suryasankar.medium.com/a-simple-nested-tree-menu-with-vanilla-js-and-css-d30159f14096 -->
-  <div id="loading">🧬 loading...</div>
+  <div id="loading"></div>
+  {# via: https://loading.io/css/ #}
+  <div class="lds-spinner" id="spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+
   <div id="taxonTree"></div>
 </div>
 {% endblock %}