dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

User bearbeiten fertig

Browse Source
This commit is contained in:
Georg Reisinger
2019-03-24 15:59:22 +01:00
parent 524bf627e8
commit 187f81842e
4 changed files with 221 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
express-server/views/user.ejs
View File

@@ -4,21 +4,20 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- production version, optimized for size and speed -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-messaging.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="vue-app">
<!-- Square card -->
<div class="demo-card-image mdl-card mdl-shadow--2dp">
<img v-bind:src="this.dataPic" width="100%"/>
<div class="mdl-card__title mdl-card--expand"></div>
@@ -26,15 +25,26 @@
<label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
</div>
<div class="mdl-card__actions mdl-card--border">
<button @click="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Foto setzten
</button>
<button @click="updateUser" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Fertig
</button>
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" @change="onFileChange">
<button @click="fertig" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Fertig
</button>
</div>
<div v-else>
<button @click="removeImage" class="mdl-button mdl-button--raised mdl-button--accent">Remove image</button>
<button @click="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Foto setzten
</button>
</div>
</div>
</div>
Image: {{this.image}}<br> DataPic
{{this.dataPic}}
</div>
<style lang="scss">
.demo-card-square.mdl-card {
@@ -44,35 +54,14 @@
.demo-card-square > .mdl-card__title {
color: #fff;
}
.dropbox {
outline: 2px dashed grey; /* the dash box */
outline-offset: -10px;
background: lightcyan;
color: dimgray;
padding: 10px 10px;
min-height: 200px; /* minimum height */
position: relative;
cursor: pointer;
}
.input-file {
opacity: 0; /* invisible but it's there! */
width: 100%;
height: 200px;
position: absolute;
cursor: pointer;
}
.dropbox:hover {
background: lightblue; /* when mouse over to the drop zone, change color */
}
.dropbox p {
font-size: 1.2em;
text-align: center;
padding: 50px 0;
}
.fotochooserimg {
width: 30%;
margin: auto;
display: block;
margin-bottom: 10px;
}
</style>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="javascripts/user.js"></script>
</body>
</html>