You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.0 KiB
101 lines
3.0 KiB
{% extends "settings_page.html" %}
|
|
|
|
{% block header_script_files %}
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block settings_pane %}
|
|
|
|
<div id="app">
|
|
<users ref="users" v-bind:users="users"></users>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
|
|
Vue.component('user',{
|
|
props:['user'],
|
|
template: `
|
|
<tr>
|
|
<td><a :href="'{{ url_for('settings_single_user_page', user_id='USERID') }}'.replace('USERID', user.id)">[[ user.id ]]</a></td>
|
|
<td><a :href="'{{ url_for('settings_single_user_page', user_id='USERID') }}'.replace('USERID', user.id)">[[ user.username ]]</a></td>
|
|
<td>[[ user.role ]]</td>
|
|
<td>[[ user.age_rating_title.rating_long ]]</td>
|
|
</tr>
|
|
`,
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
Vue.component('users', {
|
|
props:['users'],
|
|
template: `
|
|
<div>
|
|
<div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
|
|
<div class="row w-100 m-0 p-3">
|
|
<div class="col-sm-12 col-md-6 text-center text-md-start text-white ">
|
|
<h2>Users</h2>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 text-center text-md-end">
|
|
<a type="button" class="btn btn-info" href="{{ url_for('settings_new_user_page') }}">New User</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-grid w-100 m-0 p-0">
|
|
<div class="row w-100 m-0 p-3">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scop="col">ID</th>
|
|
<th scop="col">Username</th>
|
|
<th scop="col">Role</th>
|
|
<th scop="col">Age Rating</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="tablebody">
|
|
<user
|
|
v-for="user in users"
|
|
v-bind:user="user"
|
|
v-bind:key="user.id"
|
|
></user>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
users: [],
|
|
},
|
|
created() {
|
|
this.getUsers()
|
|
},
|
|
methods: {
|
|
getUsers() {
|
|
console.log('Getting Users');
|
|
axios.get('{{ url_for('api.api_get_users') }}', {
|
|
params: {
|
|
offset: this.users.length
|
|
}
|
|
})
|
|
.then(res => {
|
|
if(res.data.number_of_page_results > 0) {
|
|
res.data.results.forEach(result => {
|
|
this.users.push(result)
|
|
})
|
|
if(this.users.length < res.data.number_of_total_results) {
|
|
this.getUsers()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
delimiters: ["[[","]]"]
|
|
})
|
|
|
|
{% endblock %} |