Skip to content

Instantly share code, notes, and snippets.

@edward1986

edward1986/form.html

Created May 25, 2021 01:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save edward1986/2f8d89bcb15fb8c34fc36f0624e7f6d5 to your computer and use it in GitHub Desktop.
Save edward1986/2f8d89bcb15fb8c34fc36f0624e7f6d5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons"/>
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css"/>
<style>
.disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
</style>
</head>
<body>
<template id="NotFoundPage">
<div>
<h1>404 Not Found</h1>
</div>
</template>
<template id="HomePage">
<md-table v-model="list" md-card>
<md-table-toolbar>
<h1 class="md-title">Users</h1>
</md-table-toolbar>
<md-progress-spinner v-if="loading" :md-diameter="30" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
<md-table-row v-if="!loading" slot="md-table-row" slot-scope="{ item }">
<md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
<md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
<md-table-cell md-label="Job Title" md-sort-by="title">{{ item.position }}</md-table-cell>
<md-table-cell md-label="Action" ><md-button class="md-primary" @click="onEdit(item)">Edit</md-button><md-button class="md-accent" @click="onDelete(item, index)">Delete</md-button></md-table-cell>
</md-table-row>
</md-table>
</template>
<template id="registerpage">
<div>
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<md-card class="md-layout-item ">
<md-card-header>
<div class="md-title">Register</div>
</md-card-header>
<md-card-content>
<md-field>
<label>Name</label>
<md-input v-model="register.name"></md-input>
</md-field>
<md-field>
<label>Email</label>
<md-input type="email" v-model="register.email"></md-input>
</md-field>
<md-field>
<label>Telephone</label>
<md-input v-model="register.tel"></md-input>
</md-field>
<md-field>
<label>Position</label>
<md-select v-model="register.position" name="movie" id="movie">
<md-option value="Assistance">Assistance</md-option>
<md-option value="Secretary">Secretary</md-option>
<md-option value="Head">Head</md-option>
<md-option value="Other">Other</md-option>
</md-select>
</md-field>
<md-field>
<label>File</label>
<md-file @change="onFileChange" />
</md-field>
<md-button v-if="!loading" @click="submitForm" class="md-raised md-primary">Submit</md-button>
<md-progress-spinner v-else :md-diameter="30" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
</md-card-content>
</md-card>
</form>
</div>
</template>
<div id="app">
<div class="page-container">
<md-app>
<md-app-toolbar class="md-primary">
<span class="md-title">Register</span>
<div class="md-toolbar-section-end">
<md-button @click="$router.push({path: '/'})">Home</md-button>
<md-button @click="$router.push({path: '/register'})">Register</md-button>
</div>
</md-app-toolbar>
<nav>
<div class="nav-wrapper">
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><router-link to="/" exact>Home</router-link></li>
<li><router-link to="/register" >Register</router-link></li>
</ul>
</div>
</nav>
<md-app-content>
<router-view></router-view>
</md-app-content>
</md-app>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.9/vue-router.min.js"></script>
<script src="https://unpkg.com/vue-material"></script>
<script>
Vue.use(VueMaterial.default)
var item = {}
var RegisterPage = Vue.component( 'registerpage', {
template: '#registerpage',
data(){
return{
loading: false,
redText: false,
process: '',
success: false,
forminner: true,
register:{
name: '' ,
pid: '',
email: '',
tel: '',
position: '',
images:[]
}
}
},
mounted(){
if(this.$route.params.id){
this.register = this.$route.params
}
},
beforeRouteEnter (to, from, next) {
next(vm => vm.setData(vm.$route.params))
},
methods:{
changeValue(e){
console.log("select");
},
setData(params){
if(params.pid){
console.log( params.position)
this.register.name = params.name;
this.register.pid = params.pid;
this.register.email = params.email;
this.register.tel = params.tel;
this.register.position = params.position;
}
},
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files);
},
showSuccess(e){
this.loading = false
if (e === "OK") {
this.forminner = false
this.success = true
} else {
this.showError(e);
}
},
showError(e) {
alert(e);
this.process = e;
this.redText = true
},
restartForm() {
this.forminner = true
this.success = false
// $('#success') .hide();
this.progress = "";
this.redText = false
},
createImage(files) {
var vm = this;
for (var index = 0; index < files.length; index++) {
var name = files[index].name
var reader = new FileReader();
reader.onload = function(event) {
var imageUrl = event.target.result
vm.register.images.push({name: name, image: imageUrl});
}
reader.readAsDataURL(files[index]);
}
},
submitForm(){
var vm = this
vm.loading = true;
if(vm.register.pid){
google.script.run
.withSuccessHandler(vm.showSuccess)
.update_value(vm.register.images, vm.register.pid, vm.register.name,
vm.register.email, vm.register.tel,
vm.register.position);
}else{
google.script.run
.withSuccessHandler(vm.showSuccess)
.uploadFileToGoogleDrive(vm.register.images, vm.register.name,
vm.register.email, vm.register.tel,
vm.register.position);
}
},
}
})
const NotFoundPage = {
name: 'NotFoundPage',
template: '#NotFoundPage'
}
const HomePage = {
name: 'HomePage',
template: '#HomePage',
data(){
return{
list:[],
loading: false,
}
},
mounted(){
this.loading = true
google.script.run
.withSuccessHandler(this.getData).read_value()
},
methods:{
onDelete(item, index){
console.log(item, index)
google.script.run
.withSuccessHandler((e) => { console.log(e)})
.delete_value(item.pid, item.name,
item.email, item.tel,
item.position);
},
onEdit(ev){
var vm = this
new Promise( (resolve,reject) => {
item = ev
resolve(ev);
}).then( (val) => {
this.$router.push({ name: 'register', params: ev})
});
},
getData(value){
this.loading = false;
var sheet = JSON.parse(value)
var rows = sheet[0]
for (var r = 1, l = sheet.length; r < l; r++) {
var record = {};
for (var p in rows) {
record[rows[p]] = sheet[r][p] ;
}
this.list.push(record);
}
}
}
}
const routes = [
{ path: '/', component: HomePage },
{ path: '/register/:id?', name: 'register', component: RegisterPage },
{ path: '*', component: NotFoundPage },
]
const router = new VueRouter({
routes
})
new Vue({
router,
data(){
return{
}
},
mounted(){
},
}).$mount("#app")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment