add Vuex to project, refactor, WIP user login
This commit is contained in:
boyska
parent
9413862186
commit
88f6644518
7 changed files with 1621 additions and 57 deletions
|
|
@ -6,7 +6,21 @@
|
||||||
<body data-cid="0">
|
<body data-cid="0">
|
||||||
<div id="app">
|
<div id="app">
|
||||||
</div>
|
</div>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
|
<script type="module" src="/static/js/spa.js"></script>
|
||||||
<script type="application/javascript" src="/static/js/spa.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
<script type="importmap">
|
||||||
|
{ "imports": {
|
||||||
|
"vue": "/static/js/vue.esm-browser.min.js",
|
||||||
|
"vue-router": "/static/js/vuex.esm-browser.js"
|
||||||
|
} }
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.counter {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 1em 0.2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,42 @@
|
||||||
const { createApp } = Vue
|
import { createApp, defineAsyncComponent } from '/static/js/vue.esm-browser.min.js'
|
||||||
|
import { createStore } from '/static/js/vuex.esm-browser.js'
|
||||||
|
|
||||||
function range(start, end) {
|
|
||||||
var ans = [];
|
|
||||||
for (let i = start; i <= end; i++) {
|
// Create a new store instance.
|
||||||
ans.push(i);
|
const store = createStore({
|
||||||
|
state () {
|
||||||
|
return {
|
||||||
|
loggedIn: false,
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
}
|
}
|
||||||
return ans;
|
},
|
||||||
}
|
mutations: {
|
||||||
|
logIn(state, username, password) {
|
||||||
|
state.loggedIn = true
|
||||||
|
state.username = username
|
||||||
|
state.password = password
|
||||||
|
},
|
||||||
|
logOut(state) {
|
||||||
|
state.loggedIn = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
devtools: false,
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
var app = createApp({
|
var app = createApp({
|
||||||
components: {
|
components: {
|
||||||
'CounterList': Vue.defineAsyncComponent( () => import('/static/vue/counterlist.js') ),
|
'CounterList': defineAsyncComponent( () => import('/static/vue/counterlist.js') ),
|
||||||
|
'UserLogin': defineAsyncComponent( () => import('/static/vue/userlogin.js') ),
|
||||||
},
|
},
|
||||||
|
|
||||||
template: ` <CounterList></CounterList> `
|
template: ` <CounterList></CounterList>
|
||||||
|
<UserLogin></UserLogin>
|
||||||
|
`
|
||||||
})
|
})
|
||||||
|
app.use(store)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
||||||
function get_url(cid)
|
|
||||||
{
|
|
||||||
var url = "";
|
|
||||||
if(window.location.protocol == "http:") {
|
|
||||||
url += "ws://"
|
|
||||||
} else {
|
|
||||||
url = "wss://"
|
|
||||||
}
|
|
||||||
url += window.location.host + '/v1/ws/counter/';
|
|
||||||
url += cid
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
|
|
||||||
function do_websocket(cid, cb_on_new_value)
|
|
||||||
{
|
|
||||||
const socket = new WebSocket(get_url(cid));
|
|
||||||
socket.onmessage = function(evt) {
|
|
||||||
var msg = JSON.parse(evt.data)
|
|
||||||
cb_on_new_value(msg.value)
|
|
||||||
}
|
|
||||||
socket.onclose = function() {
|
|
||||||
setTimeout(do_websocket, 3000)
|
|
||||||
}
|
|
||||||
socket.onerror = socket.onclose
|
|
||||||
}
|
|
||||||
|
|
||||||
/* thanks, https://stackoverflow.com/a/60033403 */
|
|
||||||
var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
|
|
||||||
function printToLetter(number, recursive){
|
|
||||||
number--
|
|
||||||
if(number < 0) {
|
|
||||||
if(recursive === true) {
|
|
||||||
return alphabet[alphabet.length - 1]
|
|
||||||
} else {
|
|
||||||
return 'ø'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(number < alphabet.length) {
|
|
||||||
return alphabet[number]
|
|
||||||
}
|
|
||||||
var remainder = number % alphabet.length
|
|
||||||
var quotient = Math.floor((number-1)/alphabet.length)
|
|
||||||
return printToLetter(quotient, true) + printToLetter(remainder, true)
|
|
||||||
}
|
|
||||||
|
|
|
||||||
15
pizzicore/static/js/vue.esm-browser.min.js
vendored
Normal file
15
pizzicore/static/js/vue.esm-browser.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1461
pizzicore/static/js/vuex.esm-browser.js
Normal file
1461
pizzicore/static/js/vuex.esm-browser.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,7 @@
|
||||||
const template = `<div class="counter">Fila {{queue_desc}}: {{counter}}</div>`
|
const template = `
|
||||||
|
<div class="counter">Fila {{queue_desc}}: {{counter}}
|
||||||
|
<div v-if="loggedIn"><button @click="callNext">Prossimo</button></div></div>
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -14,6 +17,61 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
queue_desc: function() {
|
queue_desc: function() {
|
||||||
return printToLetter(parseInt(this.queue_num, 10) + 1)
|
return printToLetter(parseInt(this.queue_num, 10) + 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
loggedIn() {
|
||||||
|
return this.$store.state.loggedIn
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
callNext() {
|
||||||
|
console.log("I should call the next", this.$store.state.username, this.$store.state.password)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function get_url(cid)
|
||||||
|
{
|
||||||
|
var url = "";
|
||||||
|
if(window.location.protocol == "http:") {
|
||||||
|
url += "ws://"
|
||||||
|
} else {
|
||||||
|
url = "wss://"
|
||||||
|
}
|
||||||
|
url += window.location.host + '/v1/ws/counter/';
|
||||||
|
url += cid
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
function do_websocket(cid, cb_on_new_value)
|
||||||
|
{
|
||||||
|
const socket = new WebSocket(get_url(cid));
|
||||||
|
socket.onmessage = function(evt) {
|
||||||
|
var msg = JSON.parse(evt.data)
|
||||||
|
cb_on_new_value(msg.value)
|
||||||
|
}
|
||||||
|
socket.onclose = function() {
|
||||||
|
setTimeout(do_websocket, 3000)
|
||||||
|
}
|
||||||
|
socket.onerror = socket.onclose
|
||||||
|
}
|
||||||
|
|
||||||
|
/* thanks, https://stackoverflow.com/a/60033403 */
|
||||||
|
var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
|
||||||
|
function printToLetter(number, recursive){
|
||||||
|
number--
|
||||||
|
if(number < 0) {
|
||||||
|
if(recursive === true) {
|
||||||
|
return alphabet[alphabet.length - 1]
|
||||||
|
} else {
|
||||||
|
return 'ø'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(number < alphabet.length) {
|
||||||
|
return alphabet[number]
|
||||||
|
}
|
||||||
|
var remainder = number % alphabet.length
|
||||||
|
var quotient = Math.floor((number-1)/alphabet.length)
|
||||||
|
return printToLetter(quotient, true) + printToLetter(remainder, true)
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { defineAsyncComponent } from '/static/js/vue.esm-browser.min.js'
|
||||||
|
|
||||||
const template = `
|
const template = `
|
||||||
<CounterController v-for="q in queues" :queue_num="q"></CounterController>
|
<CounterController v-for="q in queues" :queue_num="q"></CounterController>
|
||||||
`
|
`
|
||||||
|
|
@ -6,7 +8,7 @@ export default {
|
||||||
template: template,
|
template: template,
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
'CounterController': Vue.defineAsyncComponent( () => import('/static/vue/counter.js') ),
|
'CounterController': defineAsyncComponent( () => import('/static/vue/counter.js') ),
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -39,3 +41,11 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function range(start, end) {
|
||||||
|
var ans = [];
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
ans.push(i);
|
||||||
|
}
|
||||||
|
return ans;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
27
pizzicore/static/vue/userlogin.js
Normal file
27
pizzicore/static/vue/userlogin.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
const template = `
|
||||||
|
<div>
|
||||||
|
<input name="user" :value="username" />
|
||||||
|
<input name="password" type="password" :value="password" />
|
||||||
|
<button @click="onSubmit" >Login</button>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
loggedIn: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
template: template,
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onSubmit: function() {
|
||||||
|
console.log('XXX should check now')
|
||||||
|
this.$root.$store.commit('logIn', 'ciccio', 'puzzio')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue