Commit 7b462918 authored by TOUZE Francois's avatar TOUZE Francois
Browse files

add the upload method

parent 2b212e29
......@@ -14,11 +14,32 @@ app = Flask(__name__, template_folder='.')
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
curdir = os.getcwd()
print( "current directory => ", curdir)
#print( "current directory => ", curdir)
pkgRoot = curdir.split('pspa.git')
print( "root directory => ", pkgRoot[0])
upath = os.path.join(pkgRoot[0],'workZone/')
wpath = os.path.join(pkgRoot[0],'pspa.git/softwares/')
upath = os.path.join(pkgRoot[0],'workZone/')
@app.route('/api/upload', methods=['GET', 'POST'])
def upload():
x= request.json
if not os.path.exists(upath): os.makedirs(upath)
"""write the file x['fileName'] into the upath directory
"""
###data= os.path.join(upath,x['fileName'])
data= os.path.join(curdir,x['fileName'])
with open(data,"w") as f:
for item in x['content']:
f.write(item)
status= "failure"
if os.path.exists( data ): status= "success"
response = {
'upload': status
}
return jsonify(response)
@app.route('/api/importe', methods=['GET', 'POST'])
def importe():
......
......@@ -13,13 +13,30 @@ from flask_cors import CORS
app = Flask(__name__, template_folder='.')
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
curdir = os.getcwd()
print( "current directory => ", curdir)
pkgRoot = curdir.split('pspa')
print( "root directory => ", pkgRoot[0])
upath = os.path.join(pkgRoot[0],'workZone/')
wpath = os.path.join(pkgRoot[0],'pspa/softwares/')
curdir= os.getcwd()
#print( "current directory => ", curdir)
pkgRoot= curdir.split('pspa')
wpath= os.path.join(pkgRoot[0],'pspa/softwares/')
upath= os.path.join(pkgRoot[0],'workZone/')
@app.route('/api/upload', methods=['GET', 'POST'])
def upload():
x= request.json
if not os.path.exists(upath): os.makedirs(upath)
data= os.path.join(upath,x['fileName'])
with open(data,"w") as f:
for item in x['content']:
f.write(item)
status= "failure"
if os.path.exists( data ): status= "success"
response = {
'upload': status
}
return jsonify(response)
@app.route('/api/importe', methods=['GET', 'POST'])
def importe():
......@@ -118,7 +135,7 @@ def plots():
ptr.settings( x_bytes )
data= os.path.join(upath,'simulator-plot.txt')
f=open(data,encoding="utf-8")
f= open(data,encoding="utf-8")
ofi= json.load(f)
response = {
......
<template>
<div id="project-area">
<span class="project-options d-flex flex-row">
<span class="project-name" @click="isElementNameModalVisible = true">{{projectName}} <p class="edit-icon">&#9998;</p></span>
<a href="#" class="project-subtext text-capitalize" @click="showImportModal">Import</a>
<div class="modal-backdrop" v-show="isImportModalVisible" @close="closeImportModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold" id="modalTitle">
<slot name="header">
Import
<button type="button" class="btn-close" @click="closeImportModal" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body" id="modalDescription">
<slot name="body">
<input type="file" id="importFile" multiple size="50" v-on:change="importFile($event)">
</slot>
</section>
</div>
</div>
<a href="#" v-b-modal="'myModal'" @click="showSaveModal" class="project-subtext mr-5 text-capitalize">Save as</a>
<div class="modal-backdrop" v-show="isSaveModalVisible" @close="closeSaveModal">
<div class="saveModal" role="dialog" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold">
<slot name="header">
<span>Save as</span>
<button type="button" class="btn-close" @click="closeSaveModal" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body" id="modalDescription">
<slot name="body">
<div class="dialog-save">
<label for="input-version">File name</label>
<b-form-input
v-model="fileNameSave"
type="text">
</b-form-input>
<button class="mt-3" @click="save" :class="{'disabled': !fileNameSave}">Save</button>
<button class="mt-3 cancel" @click="closeSaveModal">Cancel</button>
</div>
</slot>
</section>
</div>
</div>
</span>
<span class="project-nav">
<span v-bind:class="{ 'selected': $route.name == DESIGN}">
<router-link to="/Design">Design</router-link>
</span>
<span v-bind:class="{ 'selected': $route.name == SIMULATE}">
<router-link to="/Simulate">Simulate</router-link>
</span>
<span v-bind:class="{ 'selected': $route.name == ANALYZE}">
<router-link to="/Analyze">Analyze</router-link>
</span>
</span>
<div class="modal-backdrop" v-show="isElementNameModalVisible" @close="closeEditModal()">
<div class="saveModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold" id="modalTitle">
<slot name="header">
<span>Edit element's name</span>
<button type="button" class="btn-close" @click="closeEditModal()" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body" id="modalDescription">
<slot name="body">
<div class="dialog-save" title ="Edit project name">
<label for="input-version">Name</label>
<input type="text" id="input-element-name" v-model="projectName" pattern="([A-z0-9À-ž\s]){2,}">
<button class="mt-3" @click="closeEditModal()">OK</button>
</div>
</slot>
</section>
</div>
</div>
</div>
<div id="project-area">
<span class="project-options d-flex flex-row">
<!-- ********************* SPAN ************************** -->
<span class="project-name"
@click="isElementNameModalVisible = true">
{{projectName}}
<p class="edit-icon">&#9998;</p>
</span>
<!-- ********************* IMPORT ************************** -->
<a href="#" class="project-subtext text-capitalize"
@click="showImportModal">
Import
</a>
<div class="modal-backdrop"
v-show="isImportModalVisible"
@close="closeImportModal">
<div class="resultModal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription">
<header class="modal-header font-weight-bold"
id="modalTitle">
<slot name="header">
Import
<button type="button"
class="btn-close"
@click="closeImportModal"
aria-label="Close modal">
x
</button>
</slot>
</header>
<section class="modal-body"
id="modalDescription">
<slot name="body">
<input type="file"
id="importFile"
multiple size="50"
v-on:change="importFile($event)">
</slot>
</section>
</div>
</div>
<!-- ********************* UPLOAD ************************** -->
<a href="#"
class="project-subtext text-capitalize"
@click="showUploadFile">
Upload
</a>
<div class="modal-backdrop"
v-show="isUploadFileVisible"
@close="closeUploadFile">
<div class="resultModal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription">
<header class="modal-header font-weight-bold"
id="modalTitle">
<slot name="header">
Upload
<button type="button"
class="btn-close"
@click="closeUploadFile"
aria-label="Close modal">
x
</button>
</slot>
</header>
<section class="modal-body"
id="modalDescription">
<slot name="body">
<input type="file"
id="uploadFile"
multiple size="50"
v-on:change="uploadFile($event)">
</slot>
</section>
</div>
</div>
<!-- ********************* SAVE AS ************************** -->
<a href="#"
v-b-modal="'myModal'"
@click="showSaveModal"
class="project-subtext mr-5 text-capitalize">
Save as
</a>
<div class="modal-backdrop"
v-show="isSaveModalVisible"
@close="closeSaveModal">
<div class="saveModal"
role="dialog"
aria-describedby="modalDescription">
<header class="modal-header font-weight-bold">
<slot name="header">
<span>Save as</span>
<button type="button"
class="btn-close"
@click="closeSaveModal"
aria-label="Close modal">
x
</button>
</slot>
</header>
<section class="modal-body"
id="modalDescription">
<slot name="body">
<div class="dialog-save">
<label for="input-version">
File name
</label>
<b-form-input v-model="fileNameSave"
type="text">
</b-form-input>
<button class="mt-3"
@click="save" :class="{'disabled': !fileNameSave}">
Save
</button>
<button class="mt-3 cancel"
@click="closeSaveModal">
Cancel
</button>
</div>
</slot>
</section>
</div>
</div>
<!-- ********************* /SPAN ************************** -->
</span>
<span class="project-nav">
<span v-bind:class="{ 'selected': $route.name == DESIGN}">
<router-link to="/Design">Design</router-link>
</span>
<span v-bind:class="{ 'selected': $route.name == SIMULATE}">
<router-link to="/Simulate">Simulate</router-link>
</span>
<span v-bind:class="{ 'selected': $route.name == ANALYZE}">
<router-link to="/Analyze">Analyze</router-link>
</span>
</span>
<div class="modal-backdrop"
v-show="isElementNameModalVisible"
@close="closeEditModal()">
<div class="saveModal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription">
<header class="modal-header font-weight-bold"
id="modalTitle">
<slot name="header">
<span>Edit element's name</span>
<button type="button"
class="btn-close"
@click="closeEditModal()"
aria-label="Close modal">
x
</button>
</slot>
</header>
<section class="modal-body"
id="modalDescription">
<slot name="body">
<div class="dialog-save"
title ="Edit project name">
<label for="input-version">
Name
</label>
<input type="text"
id="input-element-name"
v-model="projectName"
pattern="([A-z0-9À-ž\s]){2,}">
<button class="mt-3"
@click="closeEditModal()">
OK
</button>
</div>
</slot>
</section>
</div>
</div>
<!-- ********************* END ************************** -->
</div>
</template>
<script>
......@@ -85,108 +217,161 @@ import { DESIGN, SIMULATE, ANALYZE } from '@/utils/constants/pages.js';
import axios from 'axios'
export default {
data() {
data() {
return {
isImportModalVisible: false,
isUploadFileVisible: false,
isSaveModalVisible: false,
isImportModalVisible: false,
isElementNameModalVisible: false,
fileNameSave: null,
projectName: 'Project Name',
DESIGN,
SIMULATE,
ANALYZE,
projectName: 'Project Name',
isElementNameModalVisible: false
};
ANALYZE
};
},
methods: {
closeEditModal () {
this.isElementNameModalVisible = false;
this.$store.commit('setProjectName', this.projectName)
this.isElementNameModalVisible = false;
this.$store.commit('setProjectName', this.projectName)
},
save: function() {
const machineSession = this.$store.state.machine;
const simulationParameters = this.$store.state.simulationParameters;
const content = JSON.stringify({machine: machineSession, simulations: simulationParameters, name: this.projectName});
const blob = new Blob([content], {type: "application/json"});
const url = URL.createObjectURL(blob);
let hiddenLink = document.createElement('a');
hiddenLink.download = `${this.fileNameSave}.json`;
hiddenLink.href = url;
hiddenLink.click();
this.closeSaveModal();
const machineSession = this.$store.state.machine;
const simulationParameters = this.$store.state.simulationParameters;
const content = JSON.stringify({machine: machineSession, simulations: simulationParameters, name: this.projectName});
const blob = new Blob([content], {type: "application/json"});
const url = URL.createObjectURL(blob);
let hiddenLink = document.createElement('a');
hiddenLink.download = `${this.fileNameSave}.json`;
hiddenLink.href = url;
hiddenLink.click();
this.closeSaveModal();
},
showSaveModal: function() {
this.isSaveModalVisible = true;
this.fileNameSave = this.projectName;
this.isSaveModalVisible = true;
this.fileNameSave = this.projectName;
},
closeSaveModal: function() {
this.isSaveModalVisible = false;
this.fileNameSave = null;
this.isSaveModalVisible = false;
this.fileNameSave = null;
},
showImportModal: function() {
this.isImportModalVisible = true;
this.isImportModalVisible = true;
},
closeImportModal: function() {
this.isImportModalVisible = false;
this.isImportModalVisible = false;
},
importFile: function(evt) {
const file = evt.target.files[0];
const fileType = file.type;
if (fileType === 'application/json') {
this.$importJsonFile(file)
} else {
this.$parseFileFormat(file)
}
// Clean input
evt.target.value = '';
this.closeImportModal();
this.$router.replace({path: '/Design'})
const file= evt.target.files[0];
const fileType = file.type;
if (fileType === 'application/json') {
this.importJsonFile(file)
} else {
this.importXFile(file.name)
}
// Clean input
evt.target.value = '';
this.closeImportModal();
this.$router.replace({path: '/Design'})
},
$importJsonFile: function(file) {
const fileReader = new FileReader();
fileReader.onload = (function(fileLoadedEvent) {
const textFromFileLoaded = fileLoadedEvent.target.result;
this.$loadProjectFromJsonString(textFromFileLoaded, file.name)
}).bind(this);
fileReader.readAsText(file, "UTF-8");
importJsonFile: function(file) {
const fileReader= new FileReader();
fileReader.onload= (function(fileLoadedEvent) {
const textFromFileLoaded= fileLoadedEvent.target.result;
this.$loadProjectFromJsonString(textFromFileLoaded,file.name)
}).bind(this);
fileReader.readAsText(file, "UTF-8");
},
importXFile: function(selectedFile) {
const path = `http://localhost:5000/api/importe`
axios.post(path, {
fileName: selectedFile
}).then((response) => {
const f= response.data.import
this.$loadProjectFromJsonString(f,selectedFile)
})
},
$parseFileFormat: function(file) {
// TODO call backend to parse specific file format
const path = `http://localhost:5000/api/importe`
axios.post(path, {
fileName: file.name
}).then((response) => {
const f= response.data.import
this.$loadProjectFromJsonString(f, file.name)
})
$loadProjectFromJsonString (jsonString,fileName) {
fileName= fileName.split('.').slice(0, -1).join('.')
const jsonFromFile = JSON.parse(jsonString);
this.projectName = fileName || jsonFromFile.name || 'Project Name'
this.$store.commit('setProjectName', this.projectName)
this.$store.commit('setMachine', jsonFromFile.machine || [])
this.$store.commit('setSimulationParameters',jsonFromFile.simulations || [])
},
$loadProjectFromJsonString (jsonString, fileName) {
fileName = fileName.split('.').slice(0, -1).join('.')
const jsonFromFile = JSON.parse(jsonString);
this.projectName = fileName || jsonFromFile.name || 'Project Name'
this.$store.commit('setProjectName', this.projectName)
this.$store.commit('setMachine', jsonFromFile.machine || [])
this.$store.commit('setSimulationParameters', jsonFromFile.simulations || [])
showUploadFile: function() {
console.log('showUploadFile')
this.isUploadFileVisible = true;
},
closeUploadFile: function() {
console.log('closeUploadFile')
this.isUploadFileVisible = false;
},
uploadFile: function(evt) {
var selectedFile= evt.target.files[0];
var reader= new FileReader();
reader.onload = (function(f) {
const textFromFileLoaded = f.target.result;
this.handleFile(textFromFileLoaded,selectedFile.name)
}).bind(this);
reader.readAsText(selectedFile,"UTF-8");
evt.target.value = '';
this.closeUploadFile();
this.$router.replace({path: '/Design'})
},
handleFile: function(textLoaded,selectedFile) {
const path= `http://localhost:5000/api/upload`
axios.post(path, {
fileName: selectedFile,
content: textLoaded
}).then((response) => {
const status= response.data.upload
if (status === "success") {
if (confirm("Do you import " + selectedFile + ' ?' )) {
this.importXFile(selectedFile)
}
} else {
var msg= 'upload file ' + selectedFile + ' was unsuccessful...'
alert( msg )
}
})
}
}
};
</script>
<style lang="scss">
.saveModal {
width: 450px;
.dialog-save {
background: white;
color: #ffffff;
font-weight: 900;
font-family: "Roboto", "Lucida Grande", "Lucida Sans Unicode", Tahoma,
Sans-Serif;
input,