vuetify eingebunden + erster Versuch Combobox

public/index.html

@@ -8,10 +8,8 @@
 	<meta name="keywords" content="">
 	<meta name="author" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<<<<<<< HEAD
     <!--for demonstration:-->
    <!-- <meta http-equiv="refresh" content="10">
-=======
 	<!-- <meta http-equiv="refresh" content="30"> -->
 
 	<!-- NOTE: Define Theme Color -->
@@ -27,8 +25,6 @@
 	<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
 	<meta name="msapplication-square310x310logo" content="icon_largetile.png">
 	<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
-
->>>>>>> 7a6d46c85b54e576ce552e15a8938291ab2fd22f
 	<!-- NOTE: iOS - Add to Homescreen -->
 	<!-- Hide Safari UI Components -->
 	<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -51,20 +47,28 @@
 	<link rel="apple-touch-startup-image" sizes="640x1136" href="ios-splash/apple_splash_640.png" /><!-- Phone -->
 
 	<!-- NOTE: CSS -->
+
 	<!-- CSS_Material Design for Bootstrap fonts and icons -->
 	<link rel="stylesheet" href="lib/bootstrap-font-and-icons.css">
 	<!-- CSS_Material Design for Bootstrap minified CSS -->
 	<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">
+	<!-- CSS_vuetify -->
+	<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
+	<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
     <!-- CSS_Custom Design -->
 	<link rel="stylesheet" type="text/css" href="style/style.css">
 
     <!-- NOTE: Call manifest.json -->
 	<link rel="manifest" href="manifest.json">
 
-    <!-- NOTE: Load JQuery, Vue.js, VueRouter -->
+    <!-- NOTE: Load JQuery, Vue.js, VueRouter, Vuetify -->
     <script src=lib/jquery-3.3.1.min.js></script>
     <script src=lib/vue.js></script>
     <script src=lib/vue-router.js></script>
+	<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js">
+
+	<!--Vuetify -->
+	<script src="routes/vuetifyImport.js"></script>
 
 	<!-- NOTE: JavaScript Libs & Files -->
     <script src="routes/home.js"></script>

public/main.js

@@ -23,3 +23,4 @@ window.addEventListener('load', () => {
 document.addEventListener("DOMContentLoaded", function () {
 	$('body').bootstrapMaterialDesign();
 }, false);
+

public/routes/createMessage.js

@@ -1,5 +1,5 @@
 const CreateMsgRouter = {
-    template: `
+	template: `
 <div class="card om-card">
 	<h4>Neue Nachricht erstellen</h4>
 	<form class="new-msg-form" @submit.prevent=createMsg>
@@ -15,6 +15,18 @@ const CreateMsgRouter = {
 			<label class="bmd-label-floating">Tags</label>
 			<input type="text" class="form-control" id="tag">
 		</div>
+
+
+
+				  <v-combobox
+					v-model="select"
+					:items="items"
+					label="I use chips"
+					multiple
+					chips
+				  ></v-combobox>
+
+
 		<div class="form-group">
 			<label class="bmd-label-floating">Nachricht*</label>
 			<textarea class="form-control" id="message" rows="5"></textarea>
@@ -22,30 +34,51 @@ const CreateMsgRouter = {
 		<button class="btn btn-default"><a @click="$router.go(-1)">ABBRECHEN </a></button>
 		<button type="submit" class="btn btn-raised om-btn"><a @click="$router.push('/home')">SENDEN</a></button>
 	</form>
+
+
 </div>
 `,
-    data: function () {
-		return {};
-    },
-    methods: {
-		createMsg: function() {
-			var subject=$("#subject").val();
-			var message=$("#message").val();
-			var tag=$("#tag").val();
-			var user=$("#user").val();
-			console.log ("Message Created: "+tag+" "+message+" "+user);
-			$.ajax ({ url: "api/createMsg", data: {sub: subject,  mess: message, use: user, ta: tag}, method: "POST" }) .done (have_result) .fail (have_error);
-			function have_result (res) {
-				console.log (res);
+	data: function () {
+		return {
+			select: ['Design', 'jj'],
+			items: [
+				'Programming',
+				'Design',
+				'Vue',
+				'Vuetify'
+      		]
+		};
+	},
+	methods: {
+		createMsg: function () {
+			var subject = $("#subject").val();
+			var message = $("#message").val();
+			var tag = $("#tag").val();
+			var user = $("#user").val();
+			console.log("Message Created: " + tag + " " + message + " " + user);
+			$.ajax({
+				url: "api/createMsg",
+				data: {
+					sub: subject,
+					mess: message,
+					use: user,
+					ta: tag
+				},
+				method: "POST"
+			}).done(have_result).fail(have_error);
+
+			function have_result(res) {
+				console.log(res);
 			}
-			function have_error (err) {
-				console.log ("error: " + err.responseText);
-				console.log (err);
+
+			function have_error(err) {
+				console.log("error: " + err.responseText);
+				console.log(err);
 			}
 		},
-    },
-    mounted: function() {
-        if ($(this).bootstrapMaterialDesign)
-            $(this).bootstrapMaterialDesign();
-    },
+	},
+	mounted: function () {
+		if ($(this).bootstrapMaterialDesign)
+			$(this).bootstrapMaterialDesign();
+	},
 };

public/routes/profil.js

@@ -11,6 +11,7 @@ const ProfilRouter = {
 	</div>
 	<div v-else-if="!isAuthentified">
 		<button v-on:click="showLoginModal=true" @clicked="logIn">Login</button>
+	 	<v-rating v-model="rating"></v-rating>
 		<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>
 	</div>
 </div>`,
@@ -19,6 +20,7 @@ const ProfilRouter = {
 			profilcard: _profilcard,
 			showLoginModal: false,
 			isAuthentified: false,
+			rating: 3,
 			};
     },
     methods: {
@@ -28,12 +30,10 @@ const ProfilRouter = {
         },
 
 		logIn (value) {
-
 			this.showLoginModal=false;
         },
 
 		logOut () {
-
 			this.isAuthentified=false;
         },
     },

public/routes/vuetifyImport.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+Vue.use(Vuetify)