Merge pull request #101 from Mogztter/yelp-dataset-agreement

Add a Yelp Dataset Agreement component

Author: ElaineRosenberg

Courses/AppliedGraphAlgorithms/adoc/01_Setup.adoc

@@ -15,6 +15,7 @@
 :experimental:
 :imagedir: ../img
 :manual: http://neo4j.com/docs/operations-manual/3.5
+:uri-yelp-dataset-agreement-pdf: https://s3-media3.fl.yelpcdn.com/assets/srv0/engineering_pages/bea5c1e92bf3/assets/vendor/yelp-dataset-agreement.pdf
 
 To complete this course we will make use of the following tools:
 
@@ -92,12 +93,16 @@ The rest of the course will follow this structure:
 * Learn how to execute the algorithm using Cypher in Neo4j Browser.
 * Use the Cypher and updated graph to improve the application in Code Sandbox.
 
-
 == Exercise
 
 Your exercise for this module is to get all the tools up and running and talking to each other.
 
-. Create a https://sandbox.neo4j.com/?usecase=yelp[Yelp Neo4j Sandbox instance^].
+[#yelp-dataset-agreement]
+--
+Before creating a Yelp Neo4j Sandbox instance, you need to read and agree to the {uri-yelp-dataset-agreement-pdf}[Yelp Dataset License^].
+--
+
+. Create a https://sandbox.neo4j.com/?usecase=yelp[Yelp Neo4j Sandbox instance^,id=yelp-create-sandbox-link].
     *Note*: You must log in to the Neo4j Sandbox site. This may require you to register with Neo4j.
 . In Yelp Sandbox you just created, click the *Open Neo4j Browser* button to open a Neo4j Browser for the Yelp database. You will be using this Neo4j Browser window throughout this course.
 . In Neo4j Browser, complete the steps in the first Neo4j Browser Guide (:play applied_graph_algorithms), *Cypher Refresher*.

Courses/_lib/src/course.js

@@ -273,6 +273,56 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     })
   }
+
+  // Yelp dataset
+  const yelpDatasetAgreementElement = document.getElementById('yelp-dataset-agreement')
+  const yelpCreateSandboxLinkElement = document.getElementById('yelp-create-sandbox-link')
+
+  if (yelpDatasetAgreementElement && yelpCreateSandboxLinkElement) {
+    const neo4jYelpAgreement = localStorage.getItem('neo4j.yelp-agreement')
+    if (neo4jYelpAgreement === 'read-agreed') {
+      yelpDatasetAgreementElement.style.display = 'none'
+    } else {
+      const originalHref = yelpCreateSandboxLinkElement.getAttribute('href')
+      yelpCreateSandboxLinkElement.setAttribute('href', 'javascript:void(0)')
+      yelpCreateSandboxLinkElement.setAttribute('target', '_self')
+      const focusAgreementElementEvent = function () {
+        const top = yelpDatasetAgreementElement.getBoundingClientRect().top + window.pageYOffset - 140
+        window.scrollTo({ top: top, behavior: 'smooth' })
+        yelpDatasetAgreementElement.classList.add('has-focus')
+        setTimeout(function() {
+          yelpDatasetAgreementElement.classList.remove('has-focus')
+        }, 2000)
+      }
+      yelpCreateSandboxLinkElement.addEventListener('click', focusAgreementElementEvent)
+      // checkbox
+      const yelpDatasetAgreementInputCheckboxElement = document.createElement('input')
+      yelpDatasetAgreementInputCheckboxElement.type = 'checkbox'
+      yelpDatasetAgreementInputCheckboxElement.id = 'yelp-dataset-agreement-check'
+      // label
+      const yelpDatasetAgreementLabelElement = document.createElement('label')
+      yelpDatasetAgreementLabelElement.innerHTML = ' I have read and agree to the Dataset License'
+      yelpDatasetAgreementLabelElement.setAttribute('for', 'yelp-dataset-agreement-check')
+      // accept button
+      const continueButtonElement = document.createElement('button')
+      continueButtonElement.type = 'button'
+      continueButtonElement.innerText = 'Continue'
+      continueButtonElement.addEventListener('click', function (_) {
+        if (yelpDatasetAgreementInputCheckboxElement.checked) {
+          localStorage.setItem('neo4j.yelp-agreement', 'read-agreed')
+          yelpCreateSandboxLinkElement.removeEventListener('click', focusAgreementElementEvent)
+          yelpCreateSandboxLinkElement.setAttribute('target', '_blank')
+          yelpCreateSandboxLinkElement.setAttribute('href', originalHref)
+          yelpDatasetAgreementElement.style.display = 'none'
+        }
+      })
+      const paragraphElement = document.createElement('p')
+      paragraphElement.appendChild(yelpDatasetAgreementInputCheckboxElement)
+      paragraphElement.appendChild(yelpDatasetAgreementLabelElement)
+      paragraphElement.appendChild(continueButtonElement)
+      yelpDatasetAgreementElement.appendChild(paragraphElement)
+    }
+  }
 })
 
 //
@@ -326,7 +376,7 @@ $(document).ready(function () {
   if (CodeMirror.colorize) {
     CodeMirror.colorize(document.body.getElementsByTagName("pre"), 'cypher');
   }
-  Intercom('trackEvent', 'PAGE_VIEW', {course: window.trainingClassName, module: trainingPartIndex })
+  Intercom('trackEvent', 'PAGE_VIEW', { course: window.trainingClassName, module: trainingPartIndex })
 })
 
 // Intercom

Courses/_templates/course/document.html.erb

@@ -29,6 +29,30 @@
             display: none;
           }
         }
+        #yelp-dataset-agreement {
+          padding: 0.75em;
+          border: 1px solid #E0E0E0;
+          margin-bottom: 1em;
+          margin-right: 1em;
+        }
+        #yelp-dataset-agreement p {
+          padding: 0;
+          margin: 0;
+        }
+        #yelp-dataset-agreement .paragraph {
+          padding-bottom: 1em;
+        }
+        #yelp-dataset-agreement button {
+          display: block;
+        }
+        #yelp-dataset-agreement.has-focus {
+          background: white;
+          animation: highlight 1.5s ease;
+        }
+        @keyframes highlight {
+          0% { background: aliceblue; }
+          100% { background: white; }
+        }
       </style>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
       <link rel="shortcut icon" href="https://neo4j.com/wp-content/themes/neo4jweb/favicon.ico"></link>