avana/numeretti
3
0
Fork 0
Code Issues 2 Pull requests Releases Activity

add Vuex to project, refactor, WIP user login

Browse source
This commit is contained in:
boyska 2022-08-20 19:19:35 +02:00
parent 9413862186
commit 88f6644518
7 changed files with 1621 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
pizzicore/pages/spa.html
View file

@ -6,7 +6,21 @@
<body data-cid="0">
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script type="application/javascript" src="/static/js/spa.js"></script>
<script type="module" src="/static/js/spa.js"></script>
</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>

85
pizzicore/static/js/spa.js
View file

@ -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++) {
ans.push(i);
// Create a new store instance.
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({
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')
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
View file

File diff suppressed because one or more lines are too long

1461
pizzicore/static/js/vuex.esm-browser.js Normal file
View file

File diff suppressed because it is too large Load diff

60
pizzicore/static/vue/counter.js
View file

@ -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 {
@ -14,6 +17,61 @@ export default {
computed: {
queue_desc: function() {
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)
}

12
pizzicore/static/vue/counterlist.js
View file

@ -1,3 +1,5 @@
import { defineAsyncComponent } from '/static/js/vue.esm-browser.min.js'
const template = `
<CounterController v-for="q in queues" :queue_num="q"></CounterController>
`
@ -6,7 +8,7 @@ export default {
template: template,
components: {
'CounterController': Vue.defineAsyncComponent( () => import('/static/vue/counter.js') ),
'CounterController': defineAsyncComponent( () => import('/static/vue/counter.js') ),
},
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
View 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')
}
}
}