Badges

_includes/loader.html

@@ -30,7 +30,8 @@
         var loader = document.getElementById('loader')
 
         if ( loader.className.includes('d-none') ) {
-            loader.className = loader.className.replace('d-none', '')
+            // loader.className = loader.className.replace('d-none', '')
+            console.log('tried to clear loader and loader was already hidden')
         } else {
             loader.className += ' d-none'
         }

assets/js/accountHandler.js

@@ -7,8 +7,10 @@
 //     }
 //   }, i*500)
 // }
-// window.serverUrl = "http://localhost:8888/user"
-window.serverUrl = "https://app.weteachblockchain.org/user"
+const MAGIC_PUBLIC_KEY = "pk_test_4429B9D857E9A6B7";
+
+// window.serverUrl = "http://localhost:8888/user";
+window.serverUrl = "https://app-staging.weteachblockchain.org/user"
 
 /* 3️⃣ Implement Render Function */
 console.log('setting RenderMagic')
@@ -263,7 +265,7 @@ function getCoursePageDetails() {
           slug: lesson.slug,
           title: lesson.title,
           course: window.lessonMap.slug,
-          totalLessons: getTotalLessonsCount()
+          totalLessons: getTotalLessonsCount(setUserData)
         }
     }
   }
@@ -368,7 +370,7 @@ function loadAndSetupMagic() {
   if (!window.magicLoaded) {
     window.magicLoaded = true
     console.log('window.magicloaded is !true ', window.magicLoaded)
-    magic = new Magic("pk_live_EA466C1563BC5CFF");
+    magic = new Magic(MAGIC_PUBLIC_KEY);
     console.log('about to render magic')
     renderMagic();
     const checkUserData = async () => {

userProfile.html

@@ -12,6 +12,95 @@
 
 {% include loader.html %}
 
+<style>
+    /* badge css*/
+    .col-sm-2.badgeIcon img {
+        max-width: 100%;
+    }
+    .badgeLock {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    background: rgba(0,0,0, .8);
+    color: white !important;
+    text-align: center;
+    padding-top: calc(50% - 0.05rem);
+    padding: 1em;
+    font-size: .9em;
+}
+.badgeLock a {
+    display: block;
+    background: #ed0744;
+    width: fit-content;
+    padding: 0.25rem 0.7rem 0.25rem 0.7rem;
+    color: white;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1rem;
+    text-transform: uppercase;
+    font-size: .9em;
+    font-family: 'Kanit';
+    font-weight: 500;
+}
+    .badgeLock a:hover {
+        background: white;
+        color: #ed0744;
+    }
+    .col-sm-2.badgeIcon {
+    max-width: 8rem;
+    text-align: center;
+    margin-right: 0.25rem;
+    margin-left: 0.25rem;
+    padding: 0em;
+    margin-bottom: 3em;
+}
+    .badgeIcon img {
+        margin: 1em 0em .5em 0em;
+    }
+    body {
+    color: black;
+    }
+    .badgeIcon span {
+    font-family: 'Kanit';
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+
+
+@media screen and (max-width: 800px) {
+.badgeIcon span {
+    font-size: .7em;
+}
+.col-sm-2.badgeIcon {
+    margin-right: 0em;
+    margin-left: 0em;
+}
+.badgeLock a {
+    padding: 0.25rem 0.85rem 0.25rem 0.85rem;
+    font-size: .5em;
+}
+
+}
+
+
+
+
+@media screen and (max-width: 600px) {
+    .col-sm-2.badgeIcon {
+    max-width: 9.75rem;
+}
+.badgeIcon span {
+    font-size: 1em;
+}
+
+
+}
+
+
+</style>
+
 <section class="userProfileHeader mustLogin">
     <div class="container row spacer">
 
@@ -27,6 +116,12 @@ <h1 id="userEmail"></h1>
     </div>
 </section>
 
+<section >
+    <div class="row container" id="badges">
+        <span>Loading...</span>
+    </div>
+</section>
+
 <section id="courseProgress" class="userDetails mustLogin">
     <div class="container row">
         <h2>Active Courses</h2>
@@ -54,6 +149,76 @@ <h2>Are you sure?</h2>
 
 <script>
 
+
+    async function getBadges () {
+        console.log('get badges started ')
+
+        try {   
+                console.log('window.localstorage.didtoken', window.localStorage.didToken, window.serverUrl)
+                if (!window.serverUrl) window.serverUrl = "http://localhost:8888/user"
+                await fetch(`${window.serverUrl}/getBadges`, {
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': 'Bearer ' + window.localStorage.didToken,
+                    },
+                    method: "GET"
+                })
+                    .then(handleAuthErrors)
+                    .then(response => response.json())
+                    .then((responseJSON) => {
+                        console.log('Get badges response:', responseJSON);
+                        if (responseJSON) {
+                           window.badges = responseJSON
+                           console.log('set window.badges:', window.badges)
+                           displayBadges()
+                        } else {
+                            console.log('Get user badges failed - try again.')
+                        }
+                    })
+            } catch (err) {
+                console.log('uncaught exception in update call', err)
+            }
+
+    }
+
+    function displayBadges () {
+        document.getElementById('badges').innerHTML = ""
+
+        for (var badge of window.badges) {
+            var div = document.createElement('div')
+                div.className = "col-sm-2 badgeIcon"
+
+            var img = document.createElement('img')
+                img.src = badge.image
+                img.alt = badge.description
+                img.title = badge.description
+
+            var title = document.createElement('span')
+                title.innerHTML = badge.name
+
+            if ( !badge.hasBadge ) {
+                var toolTip = document.createElement('div')
+                    toolTip.className = "badgeLock"
+
+                var tipText = document.createElement('span')
+                    tipText.innerText = badge.description
+
+                var tipLink = document.createElement('a')
+                    tipLink.href = badge.helpLink
+                    tipLink.target = "_blank"
+                    tipLink.innerText = "Get Started"
+                toolTip.appendChild(tipText)
+                toolTip.appendChild(tipLink)
+                div.appendChild(toolTip)
+            }
+
+            div.appendChild(img)
+            div.appendChild(title)
+
+            document.getElementById('badges').appendChild(div)
+        } 
+    }
+
     function deleteAccount() {
         document.getElementById('confirmDeleteEmail').placeholder = JSON.parse(window.localStorage.userMetaData).email
         document.getElementById('deleteConfirmation').className += " shown"
@@ -101,6 +266,7 @@ <h2>Are you sure?</h2>
 
         if (window.userData) {
 
+            setTimeout(getBadges, 1000)
             console.log('window userdata is good')
 
             var divsToShow = document.getElementsByClassName('mustLogin')