Merge pull request #258 from php-school/cloud-homepage-rory

Cloud homepage rory

Author: AydinHassan

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "semi": false,
+    "tabWidth": 2
+   
+}

app/config.php

@@ -182,8 +182,8 @@
             ]
         );
 
-        $renderer->addJs('jquery', '//code.jquery.com/jquery-1.12.0.min.js');
-        $renderer->addJs('highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js');
+        //$renderer->addJs('jquery', '//code.jquery.com/jquery-1.12.0.min.js');
+        //$renderer->addJs('highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js');
 
         $manifest = $c->get(ViteManifest::class);
         $renderer->addJs('main-js', $manifest->assetUrl('main.js'));

assets/cloud.js

@@ -19,6 +19,7 @@ import VueShepherdPlugin from './shepherd-plugin';
 import results from "./components/results/results.js";
 import StudentDropdown from "./components/StudentDropdown.vue";
 import ListWorkshops from "./components/ListWorkshops.vue";
+import Home from "./components/Home.vue";
 
 const components = {
     AceEditor,
@@ -32,7 +33,8 @@ const components = {
     ExerciseVerify,
     ExerciseEditor,
     StudentDropdown,
-    ListWorkshops
+    ListWorkshops,
+    Home
 }
 
 const app = createApp({

assets/components/AceEditor.vue

@@ -3,6 +3,8 @@
 import ace from 'ace-builds';
 import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-noconflict/mode-php';
+import 'ace-builds/src-noconflict/ext-language_tools';
+import 'ace-builds/src-noconflict/snippets/php';
 import {markRaw} from "vue";
 
 export default {
@@ -11,7 +13,10 @@ export default {
       default: false,
       type: Boolean
     },
-    file: Object,
+    value: {
+      type: String,
+      required: true,
+    },
     minLines: Number,
     maxLines: Number,
   },
@@ -25,31 +30,55 @@ export default {
       options.maxLines = this.maxLines;
     }
 
+    ace.require("ace/ext/language_tools");
     this._editor = markRaw(ace.edit(this.$el, options));
 
     this._editor.setOption('useWorker', false);
+    this._editor.setShowPrintMargin(false);
     this._editor.setTheme("ace/theme/monokai");
+    this._editor.container.style.lineHeight = 2
     this._editor.session.setMode("ace/mode/php");
-    this._editor.setValue(this.file.content, 1);
+
+    this._editor.setOptions({
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: false
+    });
+
+    this._editor.setValue(this.value, 1);
+    this._contentBackup = this.value;
+    this._isSettingContent = false;
 
     if (this.readonly) {
       this._editor.setReadOnly(true);
     } else {
       this._editor.session.on('change', this.change);
     }
   },
-  watch: {
-    'file.content'(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this._editor.setValue(newValue, 1);
-        }
-    }
-  },
   methods: {
       change() {
-        this.file.content = this._editor.session.getValue();
-        this.$emit('changeContent', this.file);
+        // ref: https://github.com/CarterLi/vue3-ace-editor/issues/11
+        if (this._isSettingContent) {
+          return;
+        }
+        const content = this._editor.session.getValue();
+        this._contentBackup = content;
+        this.$emit('update:value', content);
+      },
+  },
+  emits: ['update:value'],
+  watch: {
+    value(val) {
+      if (this._contentBackup !== val) {
+        try {
+          this._isSettingContent = true;
+          this._editor.setValue(val, 1);
+        } finally {
+          this._isSettingContent = false;
+        }
+        this._contentBackup = val;
       }
+    },
   },
   beforeUnmount() {
     this._editor.destroy();
@@ -58,5 +87,24 @@ export default {
 </script>
 
 <template>
-  <div class="h-full border-0"></div>
-</template>
+  <div class="h-full border-0 bg-gray-900"></div>
+</template>
+
+<style>
+.ace_gutter {
+  @apply !bg-gradient-to-b to-30% !from-gray-900 !to-[#0c1220];
+}
+
+.ace_marker-layer .ace_selection {
+  @apply !bg-gray-800;
+}
+
+.ace_gutter-active-line {
+  @apply !bg-gray-900;
+}
+
+.ace_active-line {
+  background-color: #0c1220 !important;
+}
+
+</style>

assets/components/ExerciseEditor.vue

@@ -13,7 +13,8 @@ import {
     MapIcon,
     HomeIcon,
     ChevronRightIcon,
-    ExclamationCircleIcon
+    ExclamationCircleIcon,
+    AcademicCapIcon
 } from '@heroicons/vue/24/solid';
 import {TrophyIcon} from '@heroicons/vue/24/outline'
 import PackageSearch from './PackageSearch.vue';
@@ -48,6 +49,7 @@ export default {
         HomeIcon,
         ChevronRightIcon,
         ExclamationCircleIcon,
+        AcademicCapIcon,
         OutputMismatch,
         Confirm,
     },
@@ -63,14 +65,7 @@ export default {
         links: Object
     },
     mounted() {
-        const files = this.getSavedFiles();
-        for (const fileName in files) {
-            const fileContent = files[fileName];
-            const folderParts = fileName.split("/");
 
-            this.createFileInFolderStructure(this.studentFiles, folderParts, fileContent);
-            this.studentFiles = this.toTree(this.studentFiles);
-        }
     },
     data() {
         //sort the initial files so entry point is at the top
@@ -82,7 +77,18 @@ export default {
         const initialFileCopy = this.initialFiles.map(file => {
             return {...file}
         });
-        const studentFiles = this.toTree(initialFileCopy);
+        let studentFiles = this.toTree(initialFileCopy);
+
+        const files = this.getSavedFiles();
+        for (const fileName in files) {
+            const fileContent = files[fileName];
+            const folderParts = fileName.split("/");
+
+            this.createFileInFolderStructure(studentFiles, folderParts, fileContent);
+        }
+
+        //make sure new files added from saved files have two way relationship
+        studentFiles = this.toTree(studentFiles);
 
         return {
             firstRunLoaded: false,
@@ -122,7 +128,7 @@ export default {
     methods: {
         getSavedFiles() {
             const items = { ...localStorage };
-            const key = this.currentExercise.workshop.code + '.' + this.currentExercise.exercise.slug;
+            const key = this.workshop.code + '.' + this.exercise.slug;
 
             const files = {};
             for (const localStorageKey in items) {
@@ -198,12 +204,12 @@ export default {
 
             return subdirectory;
         },
-        saveSolution(file) {
+        saveSolution(fileContent, file) {
             const filePath = toFilePath(file);
 
             localStorage.setItem(
                 this.currentExercise.workshop.code + '.' + this.currentExercise.exercise.slug + '.' + filePath,
-                file.content
+                fileContent
             );
         },
         resetState() {
@@ -244,6 +250,16 @@ export default {
                 return;
             }
 
+            if (!selectedFile.content) {
+                selectedFile.content = '';
+
+                if (selectedFile.name.endsWith('.php')) {
+                    selectedFile.content = '<?php\n\n';
+                }
+
+                this.saveSolution(selectedFile.content, selectedFile);
+            }
+
             const found = this.openFiles.find(file => file === selectedFile);
 
             if (!found) {
@@ -316,6 +332,10 @@ export default {
             this.loadingResults = false;
         },
         closeTab(tab) {
+            if (this.openFiles.length === 1) {
+                return;
+            }
+
             let index = this.openFiles.findIndex(file => file.name === tab);
 
             this.openFiles.splice(index, 1);
@@ -449,37 +469,37 @@ export default {
 
             <div class="h-full flex flex-col">
                 <div class="flex flex-1 h-full relative">
-                    <div class="w-1/5 p-4 min-w-[300px]">
-                        <file-tree
+                    <div class="w-3/12 xl:w-2/12">
+                        <FileTree
                                 :files="studentFiles"
                                 :file-select-function="studentSelectFile"
                                 :initial-selected-item="studentFiles[0]"
                                 :delete-function="deleteFileOrFolder"
                                 show-controls
                                 @reset="resetFiles"/>
                     </div>
-                    <div class="flex border-l border-solid border-gray-600 p-4 h-full"
-                         :class="[openResults ? 'w-3/5' : 'w-4/5']">
+                    <div class="flex border-l border-solid border-gray-600 h-full"
+                         :class="[openResults ? 'w-6/12 xl:w-7/12' : 'w-9/12 xl:w-10/12']">
                         <Tabs :tabList="openFiles.map(file => file.name)" @close-tab="closeTab" :active-tab="activeTab">
                             <template v-slot:[`tab-content-`+index] v-for="(file, index) in openFiles">
-                                <AceEditor :id="'editor-' + (index + 1)" :file="file" @changeContent="saveSolution"
+                                <AceEditor :id="'editor-' + (index + 1)" v-model:value="file.content" @update:value="(content) => saveSolution(content, file)"
                                            class="w-full h-full border-0"/>
                             </template>
                         </Tabs>
                     </div>
-                    <div v-if="openResults" id="results-col"
-                         class="w-1/5 flex flex-col border-l border-solid border-gray-600 p-4 h-full absolute right-0 overflow-y-scroll">
-                        <div class="ml-8 flex justify-between items-center">
-                            <h1 class="text-2xl pt-0 ">Results</h1>
+                    <div v-show="openResults" id="results-col"
+                         class="w-3/12 flex flex-col bg-gray-950 border-l border-solid border-gray-600 h-full absolute right-0 overflow-y-scroll">
+                        <div class="pl-4 pr-4 py-4 flex justify-between items-center border-solid border-b border-gray-600">
+                            <h1 class="text-2xl pt-0 flex items-center"><AcademicCapIcon class="h-5 w-5 mr-2"/> Results</h1>
                             <div>
                                 <button @click="openResults = false" type="button"
-                                        class="text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:bg-gray-600 hover:text-white">
+                                        class="text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:hover:text-white">
                                     <XMarkIcon class="w-5 h-5"/>
                                 </button>
                             </div>
                         </div>
 
-                        <div v-show="loadingResults" class="animate-pulse flex space-x-4 mt-4">
+                        <div v-show="loadingResults" class="animate-pulse flex space-x-4 mt-4 px-4">
                             <div class="flex-1 space-y-6 py-1">
                                 <div class="h-2 bg-slate-700 rounded"></div>
                                 <div class="space-y-3">

assets/components/FileTree.vue

@@ -71,16 +71,16 @@ export default {
 </script>
 
 <template>
-  <div class="border border-solid border-gray-600 rounded">
-    <div class="border-b border-solid border-gray-600 p-3 flex justify-between">
+  <div class="">
+    <div class="border-b border-solid border-gray-600 py-5 px-3  flex justify-between">
       <span class="text-white text-base font-mono">Files</span>
       <div v-if="showControls"  class="flex text-white">
         <XMarkIcon @click="reset" class="mr-2 h-5 w-5 cursor-pointer hover:text-pink-500" style="fill: none !important;"/>
         <FolderPlusIcon @click="addFolder" class="mr-2 h-5 w-5 cursor-pointer hover:text-pink-500" style="fill: none !important;"/>
         <PlusIcon @click="addFile" class="mr-2 h-5 w-5 cursor-pointer hover:text-pink-500" style="fill: none !important;"/>
       </div>
     </div>
-    <ul class="w-full text-gray-300 font-mono p-1">
+    <ul class="w-full text-gray-300 font-mono">
       <tree-item
           v-for="file in files"
           :parent="files"