hopfma/om
4
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Erik Römmelt 2018-11-22 16:42:32 +01:00
commit 1de994c4e0
2 changed files with 118 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
public/home.js Normal file
View File

@ -0,0 +1,60 @@
/* First try of vue-componetn -> does not work
Vue.component('home', {
data: function () {
return {
}
},
template:
`<div id="sample">
<div v-for="msgs in private.messages">
<div class="om-card card" v-for="elements in msgs.message">
<h6 class="msg-head">
<b>{{elements.subject}}</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>{{elements.msg}}<br>
<a href="#">{{elements.tags}}</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von {{elements.user}}
</div>
</div>
</div>
</div>`
})
new Vue({
el: '#sample',
data: {
private: {
messages : [
{
message : [
{subject : 'Betreff_1'},
{ msg : 'Nachricht_1' },
{ tags : '#tag_1' },
{ user : 'user_1' }
]
},
{
message : [
{subject : 'Betreff_2'},
{ msg : 'Nachricht_2' },
{ tags : '#tag_2' },
{ user : 'user_2' }
]
},
{
message : [
{subject : 'Betreff_3'},
{ msg : 'Nachricht_3' },
{ tags : '#tag_3' },
{ user : 'user_3' }
]
}
]
}
}
})
*/

63
public/index.html
View File

@ -18,6 +18,7 @@
<!-- CSS_Custom Design --> <!-- CSS_Custom Design -->
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script src=home.js></script>
<title>OMApp</title> <title>OMApp</title>
</head> </head>
@ -33,7 +34,29 @@
</div> </div>
</div> </div>
<!--first try of vue.js data-binding
<div class="om-content"> <div class="om-content">
<div id="sample">
<div class="om-card card" v-for="msgs in private.messages">
<div v-for="elements in msgs.message">
<h6 class="msg-head">
<b>{{elements.subject}}</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>{{elements.msg}}<br>
<a href="#">{{elements.tags}}</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von {{elements.user}}
</div>
</div>
</div>
</div>
-->
<!--HTML Mockup
<div class="om-card card"> <div class="om-card card">
<h6 class="msg-head"> <h6 class="msg-head">
<b>Betreff</b> <b>Betreff</b>
@ -100,11 +123,6 @@
</div> </div>
</div> </div>
<!--
<button type="button" class="btn btn-secondary bmd-btn-fab add-msg-button">
<i class="material-icons">add</i>
</button>
--> -->
<nav class="nav nav-tabs nav-justified om-nav "> <nav class="nav nav-tabs nav-justified om-nav ">
@ -128,6 +146,41 @@
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<!-- NOTE: Call main.js --> <!-- NOTE: Call main.js -->
<script src="main.js"></script> <script src="main.js"></script>
<script>
new Vue({
el: '#sample',
data: {
private: {
messages : [
{
message : [
{subject : 'Betreff_1'},
{ msg : 'Nachricht_1' },
{ tags : '#tag_1' },
{ user : 'user_1' }
]
},
{
message : [
{subject : 'Betreff_2'},
{ msg : 'Nachricht_2' },
{ tags : '#tag_2' },
{ user : 'user_2' }
]
},
{
message : [
{subject : 'Betreff_3'},
{ msg : 'Nachricht_3' },
{ tags : '#tag_3' },
{ user : 'user_3' }
]
}
]
}
}
})
</script>
</body> </body>