Vue examples 3-6

Created some more examples building on each other in varying ways.

Vue examples 3-6
Created some more examples building on each other in varying ways.
861c70f0 · Adam Procter · e6083c73 · 861c70f0 · 861c70f0 · 861c70f0
Commit 861c70f0 authored Nov 07, 2017 by Adam Procter
20 changed files
--- a/vue_five/css/main.css
+++ b/vue_five/css/main.css
+body {
+
+   font-size: 22px;
+   line-height:28px;
+   font-family: "Chaparral W01";
+   font-weight: 400;
+   font-style: normal;
+	color:  rgba(51, 51, 51, 1);
+
+}
+
+h1 {
+   font-family: "Galano Classic W00";
+   font-weight: 700;
+   font-style: bold;
+   font-size: 45px;
+   line-height: 62px;
+}
+
+li{
+	font-family: "Pica 10 Pitch W01";
+	font-weight: 400;
+	font-style: bold;
+	font-size: 16px;
+	line-height: 20px;
+	
+}
+
+
+textarea {
+  width: 90%;
+  height: 400px;
+  border: none;
+  border-right: 1px solid #ccc;
+  resize: none;
+  outline: none;
+  background-color: #f6f6f6;
+  font-size: 14px;
+  font-family: 'Monaco', courier, monospace;
+  padding: 20px;
+}
+
--- a/vue_five/index.html
+++ b/vue_five/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Vue 5 app</title>
+  <script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/2.1.1/deepstream.js"></script>
+  
+  <script src="js/vue.js"></script>
+  <script src="js/marked.js"></script>
+  <script src="js/lodash.js"></script>
+  
+  <script src="js/main.js"></script>
+  
+ <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
+
+	
+</head>
+<body>
+	
+ <div id="app">
+<h1>Five Alive</h1>
+<p>Test Vue.js app attached to Deep Stream Hub</p>
+<div class="group connectionState">
+     Connection-State is: <em id="connection-state">{{connectionState}}</em>
+   </div>
+   <my-record :ds="ds"></my-record>
+
+ </div>
+	
+  <script>
+    
+     const Record = {
+        
+        template:'<div class="group realtimedb"><h2>Realtime Datastore</h2> <div class="input-group half left"><label>Field A</label><input type="text" v-model="fielda" @input="handleFAUpdate()" /></div><div class="input-group half"><label>Field B</label><input type="text" v-model="fieldb" @input="handleFBUpdate()" /><div class="input-group half"><label>Field C</label><input type="text" v-model="fieldc" @input="handleFCUpdate()" /></div><div class="input-group half"><label>Field D</label><input type="text" v-model="fieldd" @input="handleFDUpdate()" /></div></div>',
+        props: ['ds'],
+        data: function() {
+            return {
+                fielda: '',
+                fieldb: '',
+                fieldc: '',
+                fieldd: '',
+            }
+        },
+        created: function() {
+            this.record = this.ds.record.getRecord('vue5/datarecord');
+    
+            this.record.subscribe(values => {
+                this.fielda = values.fielda;
+                this.fieldb = values.fieldb;
+                this.fieldc = values.fieldc;
+                this.fieldd = values.fieldd;
+            })
+        },
+        methods: {
+            handleFAUpdate: function() {
+                this.record.set('fielda', this.fielda);
+            },
+            handleFBUpdate: function() {
+                this.record.set('fieldb', this.fieldb);
+            },
+            handleFCUpdate: function() {
+                this.record.set('fieldc', this.fieldc);
+            },
+            handleFDUpdate: function() {
+                this.record.set('fieldd', this.fieldd);
+            }
+        }
+    };
+    
+      
+      
+      new Vue({
+            el: '#app',
+            components: {
+              'my-record': Record,
+                          },
+            data: {
+              ds: null,
+              connectionState: 'INITIAL'
+            },
+            created: function() {
+                this.ds = deepstream('wss://154.deepstreamhub.com?apiKey=0c6811b0-afa5-40df-93c8-c71d6f1cc0b5')
+                .login()
+                .on('connectionStateChanged', connectionState => {
+                   this.connectionState =  connectionState;
+                });
+            },
+            methods: {
+              
+            }
+      })
+    
+    
+  
+  </script>
+
+ </body>
+</html>
\ No newline at end of file
--- a/vue_five/js/lodash.js
+++ b/vue_five/js/lodash.js
--- a/vue_five/js/main.js
+++ b/vue_five/js/main.js
--- a/vue_five/js/marked.js
+++ b/vue_five/js/marked.js
--- a/vue_five/js/vue.js
+++ b/vue_five/js/vue.js
--- a/vue_five/readme.md
+++ b/vue_five/readme.md
+This Simple Vue.js project connects to deepstream hub to store data and sync this between client and datastore.
--- a/vue_four/css/main.css
+++ b/vue_four/css/main.css
+body {
+
+   font-size: 22px;
+   line-height:28px;
+   font-family: "Chaparral W01";
+   font-weight: 400;
+   font-style: normal;
+	color:  rgba(51, 51, 51, 1);
+
+}
+
+h1 {
+   font-family: "Galano Classic W00";
+   font-weight: 700;
+   font-style: bold;
+   font-size: 45px;
+   line-height: 62px;
+}
+
+li{
+	font-family: "Pica 10 Pitch W01";
+	font-weight: 400;
+	font-style: bold;
+	font-size: 16px;
+	line-height: 20px;
+	
+}
+
+
+textarea {
+  width: 90%;
+  height: 400px;
+  border: none;
+  border-right: 1px solid #ccc;
+  resize: none;
+  outline: none;
+  background-color: #f6f6f6;
+  font-size: 14px;
+  font-family: 'Monaco', courier, monospace;
+  padding: 20px;
+}
+
--- a/vue_four/index.html
+++ b/vue_four/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My first Vue app</title>
+  <script src="js/vue.js"></script>
+  <script src="js/marked.js"></script>
+  <script src="js/lodash.js"></script>
+  
+  <script src="js/main.js"></script>
+  
+ <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
+	
+	 <script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
+	
+</head>
+<body>
+	
+ <div id="app">
+
+ <!-- index is used to check with current screen index -->
+  <div v-for="(screen, index) in mydata.screens">
+    <!-- Hide all screen info, show only the one with index === to current screen index -->
+       <div v-show="index === screenIndex">
+       		<h1>{{screen.text}}</h1>
+   <textarea  :value="input" @input="update" v-if="screenIndex == 0" ></textarea>
+   <div v-if="screenIndex == 1" v-html="compiledMarkdown"></div>
+       	</div>
+
+
+	</div>
+
+	<div v-show="screenIndex === mydata.screens.length">
+	   <h2>Finished</h2>
+
+	 </div>
+	 
+	<button v-if="screenIndex > 0" v-on:click="prev">Edit</button>
+	<button  v-if="screenIndex < 1" v-on:click="next">Preview</button>
+
+	
+ </div>
+
+  <script>
+    
+    	var mydata = {title: 'Welcome', screens:[{text: "Edit Mode"},{text: "Preview"}]
+    		};
+    	
+    
+    var vm = new Vue({
+      el: '#app',
+      data: {
+      	input: '# Hello', mydata : mydata, screenIndex: 0
+      }    ,
+      computed: {
+        compiledMarkdown: function () {
+          return marked(this.input, { sanitize: true })
+        }
+      },
+      methods: {
+        update: _.debounce(function (e) {
+          this.input = e.target.value
+        }, 300),
+        // Go to next screen
+        next: function() {
+          this.screenIndex++;
+        },
+        // Go to previous screen
+        prev: function() {
+          this.screenIndex--;
+        }
+        
+      }
+              
+    })
+    
+  
+  
+  </script>
+
+ </body>
+</html>
\ No newline at end of file
--- a/vue_four/js/lodash.js
+++ b/vue_four/js/lodash.js
--- a/vue_four/js/main.js
+++ b/vue_four/js/main.js
--- a/vue_four/js/marked.js
+++ b/vue_four/js/marked.js
--- a/vue_four/js/vue.js
+++ b/vue_four/js/vue.js
--- a/vue_six/css/main.css
+++ b/vue_six/css/main.css
+body {
+
+   font-size: 22px;
+   line-height:28px;
+   font-family: "Chaparral W01";
+   font-weight: 400;
+   font-style: normal;
+	color:  rgba(51, 51, 51, 1);
+
+}
+
+h1 {
+   font-family: "Galano Classic W00";
+   font-weight: 700;
+   font-style: bold;
+   font-size: 45px;
+   line-height: 62px;
+}
+
+li{
+	font-family: "Pica 10 Pitch W01";
+	font-weight: 400;
+	font-style: bold;
+	font-size: 16px;
+	line-height: 20px;
+	
+}
+
+
+textarea {
+  width: 90%;
+  height: 400px;
+  border: none;
+  border-right: 1px solid #ccc;
+  resize: none;
+  outline: none;
+  background-color: #f6f6f6;
+  font-size: 14px;
+  font-family: 'Monaco', courier, monospace;
+  padding: 20px;
+}
+
--- a/vue_six/index.html
+++ b/vue_six/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Vue 5 app</title>
+  <script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/2.1.1/deepstream.js"></script>
+  
+  <script src="js/vue.js"></script>
+  <script src="js/marked.js"></script>
+  <script src="js/lodash.js"></script>
+  <script src="js/main.js"></script>
+  
+ <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
+
+	
+</head>
+<body>
+	
+ <div id="app">
+<h1>SIX </h1>
+<p>Second test Vue.js app attached to Deep Stream Hub</p>
+<div class="group connectionState">
+     Connection-State is: <em id="connection-state">{{connectionState}}</em>
+   </div>
+   <my-record :ds="ds"></my-record>
+   
+
+ </div>
+	
+  <script>
+     var recordName = 5
+     const Record = {
+        
+        template:'<div><textarea v-model="textarea" @input="handleTEXTAREAUpdate()"></textarea><label>Author</label><input type="text" v-model="author" @input="handleAUTHORUpdate()"/><div v-html="compiledMarkdown"></div></div>',
+        props: ['ds'],
+        data: function() {
+            return {
+                textarea: '',
+                author:'',
+               
+            }
+        },
+        created: function() {
+            recordName = this.ds.getUid();
+            this.record = this.ds.record.getRecord('vue5/datarecord_'+recordName);
+    
+            this.record.subscribe(values => {
+                this.textarea = values.textarea;
+                this.author = values.author;
+               
+            })
+        },
+        
+          computed: {
+                  compiledMarkdown: function () {
+                   return marked(this.textarea , { sanitize: true })
+                      }
+                    },
+                    methods: {
+                      update: _.debounce(function (e) {
+                        this.textarea  = e.target.value
+                      }, 300),
+                      
+                      handleTEXTAREAUpdate: function() {
+                          this.record.set('textarea', this.textarea);
+                      },
+                      handleAUTHORUpdate: function() {
+                          this.record.set('author', this.author);
+                      }
+                    }
+        
+        
+    };
+    
+      
+      
+      new Vue({
+            el: '#app',
+            components: {
+              'my-record': Record,
+                          },
+            data: {
+              ds: null,
+              connectionState: 'INITIAL'
+            },
+            created: function() {
+                this.ds = deepstream('wss://154.deepstreamhub.com?apiKey=0c6811b0-afa5-40df-93c8-c71d6f1cc0b5')
+                .login()
+                .on('connectionStateChanged', connectionState => {
+                   this.connectionState =  connectionState;
+                });
+            }
+      })
+    
+    
+  
+  </script>
+
+ </body>
+</html>
\ No newline at end of file
--- a/vue_six/js/lodash.js
+++ b/vue_six/js/lodash.js
--- a/vue_six/js/main.js
+++ b/vue_six/js/main.js
--- a/vue_six/js/marked.js
+++ b/vue_six/js/marked.js
--- a/vue_six/js/vue.js
+++ b/vue_six/js/vue.js
--- a/vue_six/readme.md
+++ b/vue_six/readme.md
+More Advanced Vue.js project connecting to deepstream hub to store data and sync this between client and datastore. This example creates unique data records or "documents" when you load the page.