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

Router hinzugefügt - funktioniert noch nicht

Browse Source
This commit is contained in:
Edwina Barbalan
2018-11-29 11:40:23 +01:00
parent b41b7ab520
commit d21d11b622
23 changed files with 22536 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/createMessage.js
View File
public/files.js
+8
View File
@@ -0,0 +1,8 @@
Vue.component('Files', {
data: function() {
return {
count: 0
}
},
template: `<button v-on:click="count++"> You clicked me {{ count }} times. </button>`
})
public/home.js
+4 -3
View File
@@ -1,5 +1,6 @@
Vue.component('msg-item', {
template: `<div class="om-card card">
const ('Home', {
template: ` <div id="message-list" v-for="(msg, index) in messages" :key="msg.id" :subject="msg.subject" :message="msg.message" :tag="msg.tag" :user="msg.user">
<div class="om-card card">
<h6 class="msg-head">
<b>{{ subject }}</b>
<img src="favicon.ico" width=20px height=20px>
@@ -9,7 +10,7 @@ Vue.component('msg-item', {
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von {{ user }}
</div>`,
</div></div>`,
props: ['subject', 'message', 'tag', 'user']
})
public/index.html
+42 -105
View File
@@ -17,8 +17,9 @@
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<!-- NOTE: VUE.js und VueRouter -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src=lib/vue.js></script>
<script src=lib/vue-router.js></script>
<script src=lib/jquery-3.3.1.min.js></script>
<!-- CSS_Custom Design -->
<link rel="stylesheet" type="text/css" href="style.css">
@@ -28,6 +29,7 @@
</head>
<body>
<div id="app">
<div class="om-header-container">
<div class="om-header">
<a href="index.html"><img src="th_nbg_ohmicon_amp.png" width=55px height=55px></a>
@@ -38,123 +40,58 @@
</div>
<div class="om-content">
<router-view class="om-content">
<Home></Home>
<!--
<div id="message-list">
<msg-item
<Home
v-for="(msg, index) in messages"
:key="msg.id"
:subject="msg.subject"
:message="msg.message"
:tag="msg.tag"
:user="msg.user"
></msg-item>
></Home>
</div>
</div>
<!--first try of vue.js data-binding
<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}}
<a href="#">{{elements.tags}}</a></p>
{{elements.user}}
</div>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von
</div>
</div>
</div>
</div>
-->
<!--HTML Mockup
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.<br>
<a href="#">#efi</a> <a href="#">#me</a> <a href="#">#projekt</a></p>
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User1
</div>
</div>
</div>
-->
-->
</router-view>
<nav class="nav nav-tabs nav-justified om-nav ">
<a class="nav-item nav-link" href="#"><i class="material-icons">home</i></a>
<a class="nav-item nav-link" href="#"><i class="material-icons">folder</i></a>
<a class="nav-item nav-link outlined" href="message.html"><i class="material-icons">add_circle</i></a>
<a class="nav-item nav-link" href="#"><i class="material-icons">bookmark</i></a>
<a class="nav-item nav-link" href="#"><i class="material-icons">person</i></a>
<router-link to="/home" class="nav-item nav-link"><i class="material-icons">home</i></router-link>
<router-link to="/files" class="nav-item nav-link"><i class="material-icons">folder</i></router-link>
<router-link to="/createMessage" class="nav-item nav-link outlined"><i class="material-icons">add_circle</i></router-link>
<router-link to="/bookmark" class="nav-item nav-link"><i class="material-icons">bookmark</i></router-link>
<router-link to="/profil" class="nav-item nav-link"><i class="material-icons">person</i></router-link>
</nav>
</div>
<script>
const routes = [
{ path: "/home", component: Home },
{ path: "/files", component: Files },
{ path: "/createMessage", component: CreateMsg },
{ path: "/bookmark", component: Bookmark },
{ path: "/profil", component: Profil },
];
const router = new VueRouter({
routes
});
var app = new Vue({
router,
el: '#app'
});
</script>
<!-- NOTE: JavaScript Libs & Files -->
<!-- NOTE: Call home.js -->
<!-- NOTE: Call Vue Components -->
<script src="home.js"></script>
<!-- <script src="files.js"></script> -->
<script src="createMessage.js"></script>
<script src="bookmark.js"></script>
<script src="profil.js"></script>
<!-- CDN_Vue.js developmement lib -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- CDN_Vue.js minified lib -->
public/lib/jquery-3.3.1.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
public/lib/vue-router.js
+2631
View File
File diff suppressed because it is too large Load Diff
public/lib/vue.js
+10947
View File
File diff suppressed because it is too large Load Diff