User bearbeiten, holt die daten des Users vom server (Bild und Name) Beides kommt an, aber nur der Name wird angezeigt, das Bild wird nicht gesetzt, aber kann manuell gesetzt werden, wenn man bei data einen link reinschreibt
49 lines
1.8 KiB
Plaintext
49 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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.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>
|
|
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div id="vue-app">
|
|
<!-- Square card -->
|
|
<style>
|
|
.demo-card-square.mdl-card {
|
|
width: 320px;
|
|
height: 320px;
|
|
}
|
|
.demo-card-square > .mdl-card__title {
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
{{dataPic}}
|
|
<div class="demo-card-image mdl-card mdl-shadow--2dp">
|
|
<img v-bind:src="dataPic" width="100%"/>
|
|
<div class="mdl-card__title mdl-card--expand"></div>
|
|
<div class="mdl-card__actions">
|
|
<label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
|
|
</div>
|
|
<div class="mdl-card__actions mdl-card--border">
|
|
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
|
Ändere Foto
|
|
</a>
|
|
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
|
Fertig
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="javascripts/user.js"></script>
|
|
</body>
|
|
</html> |