Merge tag 'vsprint2' into develop

2.0

css/styles.css

@@ -36,13 +36,12 @@ html {
 	height: 150px;
 	width: 150px;
 	border-radius: 5px;
-	display: none;
+	/* display: none; */
 	font-size: 1.25rem;
 	align-items: center;
 	justify-content: center;
-	background-color: rgba(0, 0, 0, 0.5);
+	/* background-color: rgba(0, 0, 0, 0.5); */
 	z-index: 9;
-	animation: loading 1s linear infinite;
 }
 
 .lds-ring {

html/profile.html

@@ -45,6 +45,15 @@
       <i class="material-icons position-absolute d-none" id="save">save</i>
       <i class="material-icons position-absolute d-none" id="cancel">cancel</i>
       <i class="material-icons position-absolute d-none text-danger" id="remove">delete</i>
+      <div id="loader" class="bg-secondary d-none p-4" style="width: 250px; height: 150px; font-size:1.12rem;">
+        <p class="text-white">Are you sure you want to delete this user?</p>
+        <div class="row">
+          <div class="container d-flex justify-content-between">
+            <button class="btn btn-link text-light" id="delete-cancel">Cancel</button>
+            <button class="btn btn-danger" id="delete-confirm">Delete</button>
+          </div>
+        </div>
+      </div>
       <div class="jumbotron">
         <div class="row">
           <div class="container d-flex justify-content-center">

index.html

@@ -44,7 +44,7 @@
   </nav>
   <main class="container d-flex flex-wrap justify-content-center align-items-start" id="cards-container">
   </main>
-  <div id="loader">
+  <div id="loader" class="bg-secondary d-none">
     <div class="lds-ring">
       <div></div>
       <div></div>

js/edit-profile.js

@@ -0,0 +1,14 @@
+function edit() {
+    var Button = document.getElementById("edit");
+    if (!Button.className.includes('editing')) {
+        Button.innerHTML = "Save";
+        Button.classList.add('editing');
+        document.querySelectorAll('p').forEach(el => el.setAttribute('contenteditable', true));
+        document.querySelector('h2').setAttribute('contenteditable', true);
+    } else {
+        document.querySelectorAll('p').forEach(el => { el.setAttribute('contenteditable', false); console.log(el.textContent); });
+        document.querySelector('h2').setAttribute('contenteditable', false);
+        Button.classList.remove('editing');
+        Button.innerHTML = "Edit";
+    }
+};

js/infinite_scroll.js

@@ -92,11 +92,12 @@ function createBadges(skills) {
 }
 
 function showLoader() {
-  loader.style.display = 'block';
+  loader.classList.remove('d-none');
 }
 
 function hideLoader() {
-  loader.style.display = 'none';
+  // loader.style.display = 'none';
+  loader.classList.add('d-none');
 }
 
 cardsContainer.addEventListener('scroll', () => {

js/user-profile.js

@@ -74,11 +74,7 @@ edit.addEventListener('click', openEditMode);
 function changeForSelect(property, options, multiple) {
   const optionsArray = [];
 
-  if (property === 'experience') {
     options.map( option => optionsArray.push(returnOptionElement(option)));
-  } else {
-    options.map( option => optionsArray.push(returnOptionElement(option.label)));
-  }
 
   $(`#${property}`).replaceWith(
     `<select class="w-100 user-info" id="${property}" style="border:none; color: #05c643;" ${multiple ? 'multiple' : ''}>` +
@@ -87,7 +83,7 @@ function changeForSelect(property, options, multiple) {
   );
 
   function returnOptionElement(option) {
-    return `<option value="${option}" ${currentUserInfo[property].includes(option) ? 'selected' : ''}>${option}</option>`;
+    return `<option value="${option.value}" ${currentUserInfo[property].includes(option.value) || currentUserInfo[property] === option.value ? 'selected' : ''}>${option.label}</option>`;
   }
 }
 
@@ -98,10 +94,28 @@ function openEditMode() {
   // Save profile changes functionality
   save.addEventListener('click', saveProfileChanges);
   // Remove user profile functionality
-  remove.addEventListener('click', removeUser);
+  remove.addEventListener('click', removeConfirmation);
 
   // Replace experience and languages for inputs of type select
-  changeForSelect('experience', ["- 1 year", "1 - 3 years", "3 - 5 years", "+ 5 years"], false);
+  let experienceOptions = [
+    {
+      value: "- 1 year",
+      label: "- 1 year"
+    },
+    {
+      value: "1 - 3 years",
+      label: "1 - 3 years"
+    },
+    {
+      value: "3 - 5 years",
+      label: "3 - 5 years"
+    },
+    {
+      value: "+ 5 years",
+      label: "+ 5 years"
+    }
+  ]
+  changeForSelect('experience', experienceOptions, false);
 
   // Get all available languages from the api to create the select input dynamically
   fetch(`https://cv-mobile-api.herokuapp.com/api/langs`)
@@ -120,6 +134,7 @@ function openEditMode() {
 
 // Close edit mode and return user info to the initial state
 function closeEditMode() {
+  loader.classList.add('d-none');
   if (editModeStatus) {
     changeEditModeStatus();
     document.querySelectorAll('.user-info').forEach(el => {
@@ -181,6 +196,17 @@ function saveProfileChanges() {
   }
 }
 
+function removeConfirmation() {
+  // Show the context menu
+  loader.classList.remove('d-none');
+  // Confirm delete of user
+  $('#delete-confirm').on('click', removeUser);
+  // Cancel delete action
+  $('#delete-cancel').on('click', () => {
+    loader.classList.add('d-none');
+  });
+}
+
 function removeUser() {
   if (editModeStatus) {
     fetch(`https://cv-mobile-api.herokuapp.com/api/users/${userID}`, {