Progress for profile pages. (#389)

* Finishing profile pages.

* Warmup cache so that translation are available for Javascript.

* Warmup cache for test environment to be able to access database.

* Fixing code smells.

* Working on migration of database content and profile pages.

* Fixing code smells.

---------

Co-authored-by: thisismeonmounteverest <shevek@blafaselblubb.abcde.biz>

Author: thisismeonmounteverest

.github/workflows/ci.yml

@@ -92,6 +92,9 @@ jobs:
       - name: Create test database
         run: bin/console test:database:create --env=test
 
+      - name: Warmup cache
+        run: bin/console cache:clear --env=test
+
       - name: Setup Yarn
         uses: threeal/setup-yarn-action@v2.0.0
         with:

assets/js/accommodation_widget.js

@@ -0,0 +1,67 @@
+import {default as rangeSlider} from 'rangeslider-pure';
+import {trans} from './translator'
+
+export { initializeAccommodationWidget }
+
+const accommodationRadiobuttons = document.querySelectorAll(".js-accommodation");
+const hostingInterest = document.getElementById('hosting_interest');
+const radioHandler = (event) => {
+    if (event.target.type === 'radio') {
+        if (event.target.value === 'no') {
+            hostingInterest.classList.remove('u:block');
+            hostingInterest.classList.add('u:hidden');
+        } else {
+            hostingInterest.classList.remove('u:hidden');
+            hostingInterest.classList.add('u:block');
+        }
+        accommodationRadiobuttons.forEach( (radio) => {
+            radio.parentElement.classList.remove('u:bg-gray-400')
+        })
+        event.target.parentElement.classList.add('u:bg-gray-400');
+    }
+}
+
+const markers = [
+    trans('hosting_interest.select'),
+    trans('hosting_interest.very_low'),
+    trans('hosting_interest.low'),
+    trans('hosting_interest.lower'),
+    trans('hosting_interest.low_to_medium'),
+    trans('hosting_interest.medium'),
+    trans('hosting_interest.medium_to_high'),
+    trans('hosting_interest.high'),
+    trans('hosting_interest.higher'),
+    trans('hosting_interest.very_high'),
+    trans('hosting_interest.cant_wait')
+]
+
+const slider = document.querySelectorAll('input[type="range"]');
+
+function updateValueOutput(value) {
+    const valueOutput = document.getElementsByClassName('rangeSlider__value-output');
+    if (valueOutput.length) {
+        valueOutput[0].innerHTML = markers[value];
+    }
+}
+
+const initializeHostingInterestSlider = () => {
+    return rangeSlider.create(slider, {
+        onInit: function () {
+            updateValueOutput(0);
+        },
+        onSlide: function (value, percent, position) {
+            updateValueOutput(value);
+        }
+    });
+};
+
+const initializeAccommodationRadioButtons = () => {
+    accommodationRadiobuttons.forEach( (radio) => {
+        radio.addEventListener("click", radioHandler)
+    })
+}
+
+const initializeAccommodationWidget = () => {
+    initializeAccommodationRadioButtons()
+    initializeHostingInterestSlider()
+}

assets/js/calendar.js

@@ -0,0 +1,38 @@
+import { Calendar } from 'vanilla-calendar-pro';
+import 'vanilla-calendar-pro/styles/index.css';
+import * as dayjs from 'dayjs'
+
+export { initializeCalendar }
+
+const htmlTag = document.getElementsByTagName('html')[0];
+const lang = htmlTag.attributes['lang'].value;
+
+const minimumAge = dayjs().subtract(18, 'year');
+const maximumAge = minimumAge.subtract(122, 'year');
+
+const options = {
+    inputMode: true,
+    type: 'default',
+    onChangeToInput(self) {
+        if (!self.context.inputElement) return;
+        if (self.context.selectedDates[0]) {
+            self.context.inputElement.value = self.context.selectedDates[0];
+            self.hide();
+        } else {
+            self.context.inputElement.value = '';
+        }
+    },
+    lang: lang,
+    dateMin: maximumAge.format('YYYY-MM-DD'),
+    dateMax: minimumAge.format('YYYY-MM-DD'),
+    positionToInput: 'auto',
+    selectedTheme: 'light',
+    disabledDates: [],
+    dateToday: minimumAge.toDate(),
+};
+
+const initializeCalendar = (id) => {
+    const calendarAnchor = document.getElementById(id);
+    const calendar = new Calendar(calendarAnchor, options);
+    calendar.init();
+}

assets/js/profile/account.js

@@ -0,0 +1,3 @@
+import { initializeCalendar} from "../calendar";
+
+initializeCalendar('account_edit_form_birthdate')

assets/js/profile/edit_accommodation.js

@@ -1,41 +1,78 @@
-import { default as rangeSlider } from 'rangeslider-pure';
+import { initializeAccommodationWidget } from "../accommodation_widget";
 
-const slider = document.querySelectorAll('input[type="range"]');
+const hostingInterest = document.getElementById('accommodation_form_hosting_interest')
 
-function updateValueOutput(value) {
-    const valueOutput = document.getElementsByClassName('rangeSlider__value-output');
-    if (valueOutput.length) {
-        valueOutput[0].innerHTML = markers[value];
+initializeAccommodationWidget()
+
+// now register on change handler for the radio buttons to change state when the user clicks
+
+const updateAccommodation = async (e) => {
+    const accommodation = document.querySelector('input[name="accommodation_form[accommodation]"]:checked').value;
+    const newAccommodationValue = {
+        accommodation: accommodation,
+        hostingInterest: +hostingInterest.value
     }
-}
 
-const initializeSlider = () => {
-    return rangeSlider.create(slider, {
-        onInit: function() {
-            updateValueOutput(0);
+    await fetch('/members/update/accommodation',  {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
         },
-        onSlide: function(value, percent, position) {
-            updateValueOutput(value);
-        }
-    });
-};
-
-initializeSlider();
-
-const accommodationRadiobuttons = document.querySelectorAll(".btn-light");
-const hostingInterest = document.getElementById('hosting_interest');
-const radioHandler = (event) => {
-    if (event.target.type === 'radio') {
-        if (event.target.value === 'no') {
-            hostingInterest.classList.remove('u:block');
-            hostingInterest.classList.add('u:hidden');
-        } else {
-            hostingInterest.classList.remove('u:hidden');
-            hostingInterest.classList.add('u:block');
-        }
+        body: JSON.stringify(newAccommodationValue)
+    }).then((response) => {
+    })
+}
+
+const updateOffers = async (e) => {
+    const newOffers = {
+        dinner: offers[0].checked,
+        tour: offers[1].checked,
+        accessible: offers[2].checked
     }
+
+    await fetch('/members/update/offers',  {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(newOffers)
+    }).then((response) => {
+    })
 }
 
-for (let radio of accommodationRadiobuttons) {
-    radio.addEventListener("click", radioHandler)
+const updateRestrictions = async (e) => {
+    const newRestrictions = {
+        noAlcohol: restrictions[0].checked,
+        noSmoking: restrictions[1].checked,
+        noDrugs: restrictions[2].checked
+    }
+
+    await fetch('/members/update/restrictions',  {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(newRestrictions)
+    }).then((response) => {
+    })
 }
+
+const accommodationRadiobuttons = document.querySelectorAll(('.js-accommodation'))
+accommodationRadiobuttons.forEach( (radio) => {
+    radio.addEventListener("change", updateAccommodation)
+})
+
+hostingInterest.addEventListener("change", updateAccommodation)
+
+const offers = document.querySelectorAll('[data-offer]')
+offers.forEach( (offer) => {
+    offer.addEventListener("change", updateOffers)
+})
+
+const restrictions = document.querySelectorAll('[data-restrictions]')
+restrictions.forEach( (restriction) => {
+    restriction.addEventListener("change", updateRestrictions)
+})

assets/js/roxeditor.js

@@ -118,8 +118,9 @@ const config = {
         ]
     },
     autosave: {
+        waitingTime: 2000,
         save( editor ) {
-            return saveData( editor );
+            return saveData( editor, false );
         }
     },
     ckfinder: {
@@ -164,6 +165,24 @@ sourceElements.forEach( (element) => {
 
     editor
         .then( editor => {
+            editor.ui.focusTracker.on( 'change:isFocused', ( evt, data, isFocused ) => {
+                console.log(editor.sourceElement.id + " - " + isFocused)
+
+                const host = editor.sourceElement;
+                const editorType = host.dataset.editorType;
+
+                if (editorType === 'inline') {
+                    const progress = document.getElementById(host.dataset.progress)
+
+                    if (isFocused) {
+                        progress.classList.remove('u:hidden')
+                        progress.classList.add('u:bg-bewelcome')
+                    } else {
+                        saveData(editor, true)
+                    }
+                }
+            } );
+
             editors.set(element.id, editor)
 
             const form = editor.sourceElement.closest('form')
@@ -194,27 +213,49 @@ sourceElements.forEach( (element) => {
 
 function registerSubmitHandler( form ) {
     form.addEventListener('submit', function( form ) {
-        // get all editors and set data on hidden input for inline and decoupled editor
-        // then remove data from localeStorage
-        for (let [id, editor] of editors.entries()) {
+        // Remove data from localeStorage.
+        for (let [editor] of editors.entries()) {
             const element = editor.sourceElement
 
-            if (element.dataset.editorType === 'inline') {
-                const input = document.getElementById(element.dataset.input)
-                input.value = editor.getData()
-            }
-
             window.localStorage.removeItem(element.id);
         }
     })
 }
 
-function saveData( editor ) {
+async function saveData( editor, lostFocus ) {
+    const element = document.getElementById(editor.sourceElement.id)
+
     const lastChange = new Date();
+    const language = element.dataset.language;
+    const storageKey = editor.sourceElement.id + "-" + (language ? language : '');
 
-    window.localStorage.setItem(editor.sourceElement.id, JSON.stringify({
+    window.localStorage.setItem(storageKey, JSON.stringify({
         lastChange: lastChange,
         editorData: editor.getData()
     }));
-}
 
+    if (lostFocus) {
+        // Only triggered for inline editor: messages, forum posts, trips description stay keep the data till form submit
+        const progress = document.getElementById(element.dataset.progress);
+
+        if (progress) {
+            progress.classList.add('u:bg-bewelcome', 'u:animate-pulse')
+        }
+
+        // Post data to the server
+        const form = new FormData();
+        form.append('field', element.dataset.field);
+        form.append('language', element.dataset.language);
+        form.append('username', element.dataset.username);
+        form.append('content', editor.getData());
+
+        await fetch("/members/update/field", { method: 'POST', body: form })
+            .then(() => {
+                if (progress) {
+                    progress.classList.remove('u:animate-pulse', 'u:bg-bewelcome')
+                    progress.classList.add('u:hidden')
+                }
+                window.localStorage.removeItem(storageKey);
+            })
+    }
+}