Merge branch 'dev' of https://github.com/stepbystepcode/flypen-frontend into dev

Author: stepbystepcode

.github/workflows/main.yml

@@ -33,7 +33,39 @@ jobs:
         tag_name: ${{ github.run_number }}
         release_name: Release ${{ github.run_number }}
         draft: false
-        prerelease: true
+        prerelease: false
+        
+    - name: Build Mac Package
+      run: |
+        quasar build -m electron -T mas -A arm64
+        cd dist/electron/Packaged
+        # app_path="/home/runner/work/flypen-frontend/flypen-frontend/dist/electron/Packaged/Flypen-mas-arm64/Flypen.app/"
+        # app_name="$(basename "$app_path" | sed -r "s/\.app$//g")"
+        # dmg_size="$(du -ms "$app_path" | grep -oP "^\d+")"
+        # dmg_path=$(sed -r "s/\.app\/?$/.dmg/g" <<< "$app_path")
+        # set -x
+        # dd if=/dev/zero "of=$dmg_path" bs=1M "count=$dmg_size"
+        # label=$(sed -r "s/\s/_/g" <<< "$app_name")
+        # label=$(sed -r "s/^(.{,27}).*$/\1/g" <<< "$label")
+        # sudo apt install hfsutils hfsprogs
+        # sudo hformat -l "$label" "$dmg_path"
+        # mount_point="$(sudo mktemp -d)"
+        # sudo mount -t hfs -o loop "$dmg_path" "$mount_point"
+        # cp -R "$app_path" "$mount_point"
+        # ls -l "$mount_point"
+        # umount "$mount_point"
+        zip -r flypen-mac-apple-chip.zip Flypen-mas-arm64
+        cd -
+    
+    - name: Upload Mac
+      uses: actions/upload-release-asset@v1
+      env:
+        GITHUB_TOKEN: ${{ secrets.AAA }}
+      with:
+        upload_url: ${{ steps.create_release.outputs.upload_url }}
+        asset_path: dist/electron/Packaged/flypen-mac-apple-chip.zip
+        asset_name: flypen-mac-apple-chip.zip
+        asset_content_type: application/zip
 
     - name: Build Linux Package
       run: |
@@ -69,7 +101,7 @@ jobs:
         upload_url: ${{ steps.create_release.outputs.upload_url }}
         asset_path: ./dist/electron/Packaged/Windows-x86_64.zip
         asset_name: flypen-windows-x86_64.zip
-        asset_content_type: application/application/zip
+        asset_content_type: application/zip
 
     - name: Set up jdk
       run: |

README.md

@@ -13,10 +13,12 @@
 ## C++ Course Design
 
 
-This is a cross-platform multi-end application built with Vue 3 and Quasar framework. It supports web, Android, iOS, Windows, Linux and macOS.
+This is a cross-platform multi-end application built with Vue3 and Quasar framework. It supports Web, Android, Windows, Linux and MacOS.
+
+Backend Project for Flypen is [Here](https://github.com/stepbystepcode/flypen)
 
 ## Features
-- Cross-platform support for Web and Android (iOS and other platforms coming soon)
+- Cross-platform support (iOS platforms coming soon)
 - Real-time chat and messaging
 - Friend management
 - Team collaboration
@@ -34,7 +36,7 @@ This is a cross-platform multi-end application built with Vue 3 and Quasar frame
 
 ## Develop from source 
 *node version v18.18.0*
-```shell
+```bash
 git clone https://github.com/stepbystepcode/flypen-frontend.git
 cd flypen-frontend
 npm i
@@ -44,7 +46,7 @@ quasar dev
 
 ## Build apk file from source 
 *node version v18.18.0*
-```shell
+```bash
 git clone https://github.com/stepbystepcode/flypen-frontend.git
 cd flypen-frontend
 npm i
@@ -64,8 +66,8 @@ java -jar uber-apk-signer-1.3.0.jar -a ./dist/capacitor/android/apk/release/app-
 you will find apk file in ```./signed/app-release-aligned-debugSigned.apk```
 
 ## Get Started
-### Download the app
-[Download Flypen App](https://github.com/stepbystepcode/flypen-frontend/releases/download/latests/app.apk)
+### Download
+[Download Flypen](https://github.com/stepbystepcode/flypen-frontend/releases)
 
 The GitHub release apk is automatically deployed via GitHub Actions on push to main branch.
 

src/pages/EditorPage.vue

@@ -13,18 +13,14 @@
       <q-tree v-if="final" ref="treeObj" :nodes="final" node-key="key"
               selected-color="primary" v-model:selected="key" @update:selected="select(key)" default-expand-all/>
     </div>
-    <div class="container">
-      <div class="content">
-        <div class="box">
-          <span>file name</span>
-          <input type="text" class="input" v-model="selectFile">
-        </div>
-        <div class="box">
-          <Editor style="z-index: 50" v-model="content" @imgAdd="imgAdd"/>
-          <div class="q-mt-md row justify-end">
-            <q-btn class="bg-primary text-white" style="width: 5rem;" @click="save()">Save</q-btn>
-          </div>
-        </div>
+    <div style="width: 100vw;display: flex">
+      <div class="q-ma-sm">file name</div>
+      <input type="text" class="input" v-model="selectFile">
+    </div>
+    <div style="width: 100vw">
+      <Editor style="z-index: 50" v-model="content" @imgAdd="imgAdd"/>
+      <div class="q-mt-md row justify-end">
+        <q-btn class="bg-primary text-white" style="width: 5rem;" @click="save()">Save</q-btn>
       </div>
     </div>
   </div>
@@ -37,6 +33,7 @@ import {ref, onMounted} from 'vue';
 import axios from 'axios';
 import Swal from 'sweetalert2'
 import {useQuasar} from 'quasar';
+
 const $q = useQuasar();
 const copyed = ref(false);
 const moved = ref(false);
@@ -49,7 +46,7 @@ const key = ref('');
 const treeObj = ref(null);
 const selectNode = ref(null);
 const selectFolder = ref('');
-const touch=()=>{
+const touch = () => {
   if (selectFolder.value === null) Swal.fire('Please select folder', '', 'warning')
   else {
     Swal.fire({
@@ -62,7 +59,7 @@ const touch=()=>{
       confirmButtonText: 'Create',
       showLoaderOnConfirm: true,
       preConfirm: (login) => {
-        commandReq(5, selectFolder.value+login,'').then(res => {
+        commandReq(5, selectFolder.value + login, '').then(res => {
           if (res.data.code === 200) Swal.fire('Success', '', 'success').then(() => {
             commandReq(0, '', '').then(res => {
               tree(JSON.parse(res.data.message));
@@ -72,7 +69,7 @@ const touch=()=>{
         })
       }
     })
-}
+  }
 
 }
 const addFolder = () => {
@@ -88,7 +85,7 @@ const addFolder = () => {
       confirmButtonText: 'Create',
       showLoaderOnConfirm: true,
       preConfirm: (login) => {
-        commandReq(4, selectFolder.value+login,'').then(res => {
+        commandReq(4, selectFolder.value + login, '').then(res => {
           if (res.data.code === 200) Swal.fire('Success', '', 'success').then(() => {
 
             commandReq(0, '', '').then(res => {
@@ -103,7 +100,7 @@ const addFolder = () => {
 }
 
 const deleteFile = () => {
-  if (selectFile.value === ''&&selectFolder.value==='') Swal.fire('Please select file or folder', '', 'warning')
+  if (selectFile.value === '' && selectFolder.value === '') Swal.fire('Please select file or folder', '', 'warning')
   else {
     Swal.fire({
       title: 'Confirm delete?',
@@ -116,7 +113,7 @@ const deleteFile = () => {
     }).then((result) => {
       if (result.isDismissed) return;
       commandReq(3, selectNode.value.path, '')
-      Swal.fire('Success', '', 'success').then(()=>{
+      Swal.fire('Success', '', 'success').then(() => {
 
         commandReq(0, '', '').then(res => {
           tree(JSON.parse(res.data.message));
@@ -142,7 +139,7 @@ const save = () => {
       if (result.isDismissed) return;
       const json = JSON.stringify({
         content: content.value,
-        filename: selectFolder.value+'/'+selectFile.value,
+        filename: selectFolder.value + '/' + selectFile.value,
         //time: new Date().getTime()
       });
       axios.post('http://8.130.48.157:8081/api/file/save', json, {
@@ -159,11 +156,11 @@ const save = () => {
 const select = (key) => {
   selectNode.value = treeObj.value.getNodeByKey(key);
   if (selectNode.value.icon === 'folder') {
-    selectFolder.value = selectNode.value.path+'/';
+    selectFolder.value = selectNode.value.path + '/';
     content.value = '';
   } else {
     selectFile.value = selectNode.value.label;
-    selectFolder.value = selectFolder.value === selectFile.value ? selectNode.value.path+'/' :selectNode.value.path.slice(0, selectNode.value.path.length - selectFile.value.length - 1) ;
+    selectFolder.value = selectFolder.value === selectFile.value ? selectNode.value.path + '/' : selectNode.value.path.slice(0, selectNode.value.path.length - selectFile.value.length - 1);
     commandReq(6, selectNode.value.path, '').then(res => {
       content.value = res.data.message.toString();
     })
@@ -176,7 +173,7 @@ onMounted(() => {
 })
 const tree = (res) => {
   raw.value = res;
-  transform(raw.value[0], '0','.');
+  transform(raw.value[0], '0', '.');
   raw.value.pop();
   final.value = raw.value;
 }
@@ -189,10 +186,11 @@ const transform = (item, key, path) => {
     item.key = key;
     item.children = item.contents;
     delete item.contents;
-    if (item.children){
-    item.children.forEach((child, index) => {
-      transform(child, key + '-' + index, path + '/' + child.name);
-    })}
+    if (item.children) {
+      item.children.forEach((child, index) => {
+        transform(child, key + '-' + index, path + '/' + child.name);
+      })
+    }
   } else {
     item.icon = 'insert_drive_file'
     item.key = key
@@ -247,10 +245,10 @@ const transform = (item, key, path) => {
 const cpmv = (n) => {
   if (n === 1) {
     copyed.value = true;
-    copyfile.value = selectFolder.value+'/'+selectFile.value;
+    copyfile.value = selectFolder.value + '/' + selectFile.value;
   } else {
     moved.value = true;
-    movefile.value = selectFolder.value+'/'+selectFile.value;
+    movefile.value = selectFolder.value + '/' + selectFile.value;
   }
 }
 const paste = (n) => {
@@ -287,7 +285,6 @@ const paste = (n) => {
 // }
 
 
-
 let content = ref('');
 const imgAdd = (pos, file) => {
   console.log(file);
@@ -307,57 +304,4 @@ const imgAdd = (pos, file) => {
 </script>
 
 <style lang="scss" scoped>
-.container{
-  flex:1;
-}
-.content {
-  padding: 24px;
-  .box {
-    padding: 24px;
-    border: 1px solid #e3e6e8;
-    border-radius: 3px;
-    display: flex;
-    flex-direction: column;
-    margin-top: 12px;
-
-    span {
-      padding-bottom: 1em;
-    }
-
-    .input {
-      flex: 1;
-      outline: rgb(107, 137, 147);
-      border: 1px solid #babfc4;
-      border-radius: 3px;
-      display: flex;
-
-      &:focus {
-        border: 1px solid #6bbbf7;
-        box-shadow: 0 0 0 4px hsla(206, 100%, 40%, .15);
-      }
-
-      input {
-        border: none;
-        outline: none;
-        flex: 1;
-        padding: .6em .7em;
-      }
-    }
-
-    input {
-      padding: .6em .7em;
-    }
-  }
-
-}
-
-.pill {
-  display: inline-block;
-  margin: 2px;
-  background: #e1ecf4;
-  padding: 8px;
-  color: #39739d;
-  border-radius: 3px;
-  font-size: 12px;
-}
 </style>