Skip to content

vue_projects
vue_projects
Source
Select Git revision
...
Target
Select Git revision
 
Commits (2)
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 86501 additions and 0 deletions
vue_five/css/main.css 0 → 100644
View file @ d8b7bb4f
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;
}
vue_five/index.html 0 → 100644
View file @ d8b7bb4f
<!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
vue_five/js/lodash.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_five/js/marked.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_five/js/vue.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_five/readme.md 0 → 100644
View file @ d8b7bb4f
This Simple Vue.js project connects to deepstream hub to store data and sync this between client and datastore.
vue_four/css/main.css 0 → 100644
View file @ d8b7bb4f
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;
}
vue_four/index.html 0 → 100644
View file @ d8b7bb4f
<!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
vue_four/js/lodash.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_four/js/marked.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_four/js/vue.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_six/css/main.css 0 → 100644
View file @ d8b7bb4f
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;
}
vue_six/index.html 0 → 100644
View file @ d8b7bb4f
<!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
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
vue_six/js/lodash.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_six/js/marked.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_six/js/vue.js 0 → 100644
View file @ d8b7bb4f
This diff is collapsed.
vue_six/readme.md 0 → 100644
View file @ d8b7bb4f
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.