Skip to content

Commit

Permalink
Merge pull request #258 from php-school/cloud-homepage-rory
Browse files Browse the repository at this point in the history 
Cloud homepage rory
  • Loading branch information
@AydinHassan
AydinHassan authored Oct 16, 2023
2 parents 9a7e64b + 93a4df5 commit 3a1c8e2
Show file tree
Hide file tree
Showing 59 changed files with 4,359 additions and 1,546 deletions.
6 changes: 6 additions & 0 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"singleQuote": true,
"semi": false,
"tabWidth": 2

}
4 changes: 2 additions & 2 deletions app/config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
4 changes: 3 additions & 1 deletion assets/cloud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -32,7 +33,8 @@ const components = {
ExerciseVerify,
ExerciseEditor,
StudentDropdown,
ListWorkshops
ListWorkshops,
Home
}

const app = createApp({
Expand Down
74 changes: 61 additions & 13 deletions assets/components/AceEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -11,7 +13,10 @@ export default {
default: false,
type: Boolean
},
file: Object,
value: {
type: String,
required: true,
},
minLines: Number,
maxLines: Number,
},
Expand All @@ -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();
Expand All @@ -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>
66 changes: 43 additions & 23 deletions assets/components/ExerciseEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -48,6 +49,7 @@ export default {
HomeIcon,
ChevronRightIcon,
ExclamationCircleIcon,
AcademicCapIcon,
OutputMismatch,
Confirm,
},
Expand All @@ -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
Expand All @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions assets/components/FileTree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 3a1c8e2

Please sign in to comment.