Improvement: progress tracking

classes/wbInstaller.php

@@ -157,25 +157,25 @@ class_exists($installerclass) &&
     /**
      * Extract and save the zipped file.
      * @param string $jsonstring
-     * @return object
+     * @return array
      *
      */
-    public function set_current_step($jsonstring): object {
+    public function set_current_step($jsonstring): array {
         global $DB, $USER;
         $sql = "SELECT id, currentstep, maxstep
             FROM {tool_wbinstaller_install}
             WHERE " . $DB->sql_compare_text('content') . " = " . $DB->sql_compare_text(':content');
 
         $record = $DB->get_record_sql($sql, ['content' => $jsonstring]);
         $record->currentstep += 1;
-        $finished = (object) [
+        $finished = [
             'status' => false,
             'currentstep' => $record->currentstep,
             'maxstep' => $record->maxstep,
         ];
         if ($record->currentstep == $record->maxstep) {
             $DB->delete_records('tool_wbinstaller_install', ['id' => $record->id]);
-            $finished->status = true;
+            $finished['status'] = true;
         } else {
             $DB->update_record('tool_wbinstaller_install', $record);
         }

index.php

@@ -26,7 +26,7 @@
 require_once($CFG->libdir.'/adminlib.php');
 require_once($CFG->libdir.'/moodlelib.php');
 
-global $USER;
+global $USER, $CFG;
 
 admin_externalpage_setup('tool_wbinstaller');
 $pluginman = core_plugin_manager::instance();
@@ -91,6 +91,7 @@
 echo $OUTPUT->render_from_template('tool_wbinstaller/initview', [
   'userid' => $USER->id,
   'contextid' => $context->id,
+  'wwwroot' => $CFG->wwwroot,
 ]);
 
 echo $OUTPUT->footer();

lang/de/tool_wbinstaller.php

@@ -115,3 +115,7 @@
 $string['vuewarining'] = 'Warnung: ';
 $string['vueerror'] = 'Fehler: ';
 $string['vuesuccess'] = 'Erfolg: ';
+$string['vuestepcountersetp'] = 'Schritt ';
+$string['vuestepcounterof'] = ' von ';
+$string['vuerefreshpage'] = 'Lade die Seite neu um die Änderungen zu speichern. Lade anschliessend das Rezept erneut hoch um mit der Installation abzuschliessen.';
+$string['vuerefreshpagebtn'] = 'Seite neu laden';

lang/en/tool_wbinstaller.php

@@ -115,3 +115,8 @@
 $string['vuewarining'] = 'Warning: ';
 $string['vueerror'] = 'Error: ';
 $string['vuesuccess'] = 'Success: ';
+$string['vuestepcountersetp'] = 'Step ';
+$string['vuestepcounterof'] = ' of ';
+$string['vuerefreshpage'] = 'Refresh the page in order to initialize the changes. Afterwards upload the recipe again to finish the installation';
+$string['vuerefreshpagebtn'] = 'Refresh page';
+

templates/initview.mustache

@@ -29,6 +29,7 @@
   name="tool-wbinstaller-app"
   user="{{userid}}"
   contextid="{{contextid}}"
+  wwwroot="{{wwwroot}}"
 >
     <router-view></router-view>
 </div>

vue3/components/feedback/StepCounter.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="finished"
+    class="progress-container"
+  >
+    <div class="progress-bar-wrapper">
+      <div
+        class="progress-bar"
+        :style="{ width: progressWidth + '%' }">
+      </div>
+    </div>
+    <div class="progress-info">
+      {{store.state.strings.vuestepcountersetp}}{{ finished.currentstep }}{{store.state.strings.vuestepcounterof}}{{ finished.maxstep }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+const props = defineProps({
+  finished: {
+    type: Object,
+    required: true,
+  }
+});
+
+const progressWidth = ref(0);
+
+const updateProgress = () => {
+  if (props.finished) {
+    progressWidth.value = (props.finished.currentstep / props.finished.maxstep) * 100;
+    console.log(progressWidth.value)
+
+  }
+}
+
+// Watch for changes in the finished object to update the progress bar
+watch(() => props.finished, updateProgress);
+
+// Set the initial progress when the component mounts
+onMounted(() => {
+  updateProgress();
+});
+</script>
+
+<style scoped>
+.progress-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end; /* Aligns progress bar to the right */
+  padding: 10px;
+}
+
+.progress-bar-wrapper {
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+  height: 20px;
+  position: relative;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #4caf50; /* Color of the progress bar */
+  transition: width 0.5s ease; /* Smooth animation */
+  border-radius: 10px 0 0 10px; /* Rounded corners */
+}
+
+.progress-info {
+  margin-top: 10px;
+  font-size: 14px;
+  text-align: right;
+}
+</style>

vue3/components/nav_tabs/Install.vue

@@ -1,10 +1,27 @@
  <template>
   <div :class="{ 'loading-cursor': isInstalling }" class="container mt-4">
+    <div v-if="refreshpage && !finished.status">
+      <p>{{ store.state.strings.vuerefreshpage }}</p>
+      <a  :href="store.state.wwwroot">
+        <button class="btn btn-primary mt-4">
+          {{ store.state.strings.vuerefreshpagebtn }}
+        </button>
+      </a>
+    </div>
+    <StepCounter :finished/>
     <div class="form-group">
       <label for="zipFileUpload">
         {{ store.state.strings.vuechooserecipe }}
       </label>
-      <input type="file" class="form-control-file" id="zipFileUpload" @change="handleFileUpload" accept=".zip" ref="fileInput"/>
+      <input
+        type="file"
+        class="form-control-file"
+        id="zipFileUpload"
+        @change="handleFileUpload"
+        accept=".zip"
+        ref="fileInput"
+        :disabled="refreshpage"
+      />
     </div>
     <transition name="fade">
       <div v-if="isInstalling" class="waiting-screen mt-4">
@@ -13,7 +30,6 @@
           {{ store.state.strings.vuewaitingtext }}
         </p>
         <ProgressTracking :uploadedFileName/>
-
       </div>
     </transition>
     <transition name="fade">
@@ -146,6 +162,7 @@ import { notify } from "@kyvg/vue3-notification"
 import PluginFeedback from '../feedback/PluginFeedback.vue';
 import FeedbackReport from '../feedback/FeedbackReport.vue';
 import ProgressTracking from '../feedback/ProgressTracking.vue';
+import StepCounter from '../feedback/StepCounter.vue'
 
 // Reactive state for the list of links and courses
 const store = useStore();
@@ -155,6 +172,7 @@ const checkedOptionalPlugins = ref([]);
 let uploadedFile = null;
 let uploadedFileName = ref('');
 const fileInput = ref(null);
+let refreshpage = ref(false);
 
 const isInstalling = ref(false);
 const totalProgress = ref(0);
@@ -178,22 +196,25 @@ const installRecipe = async () => {
           selectedOptionalPlugins: selectedPlugins
         }
       );
-      const responseparsed = JSON.parse(response.feedback)
-      feedback.value = responseparsed.feedback
-      finished.value = responseparsed.finished
-      if (response.status == 0) {
+      feedback.value = JSON.parse(response.feedback)
+      finished.value = JSON.parse(response.finished)
+      if (!finished.value.status) {
+        refreshpage.value  = true
+      }
+
+      if (feedback.value.status == 0) {
         notify({
           title: store.state.strings.success,
           text: store.state.strings.success_description,
           type: 'success'
         });
-      } else if (response.status == 1) {
+      } else if (feedback.value.status == 1) {
         notify({
           title: store.state.strings.warning,
           text: store.state.strings.warning_description,
           type: 'warn'
         });
-      } else if (response.status == 2) {
+      } else if (feedback.value.status == 2) {
         notify({
           title: store.state.strings.error,
           text: store.state.strings.error_description,
@@ -245,8 +266,6 @@ const handleFileUpload = async (event) => {
       const responseparsed = JSON.parse(response.feedback)
       feedback.value = responseparsed.feedback
       finished.value = responseparsed.finished
-      console.log('respons')
-      console.log(responseparsed)
     } catch (error) {
       console.error('Error reading ZIP file:', error);
     }

vue3/main.js

@@ -51,6 +51,7 @@ function init() {
             store.state.user = userAttributeValue;
             const contextIdValue = toolWbinstallerAppElement.getAttribute('contextid');
             store.state.contextid = contextIdValue;
+            store.state.wwwroot = toolWbinstallerAppElement.getAttribute('wwwroot');
             app.mount(toolWbinstallerAppElement);
         }
     });