For PR 1247 roles

app/views/AdminPanel.svelte

@@ -2,6 +2,7 @@
         import { onMount } from 'svelte'
 	import UserList from '../views/UserList'
 	import CharacterList from '../views/CharacterList'
+	import RoleList from '../views/RoleList'
 	import CharacterLink from '../components/CharacterLink'
 	import AccountLink from '../components/AccountLink'
         import { monitor_tabs } from '../util/navigation'
@@ -41,6 +42,9 @@
   <li class="nav-item">
     <a class="nav-link" id="characters-tab" data-toggle="tab" href="#characters" role="tab" aria-controls="profile" aria-selected="false">Characters</a>
   </li>
+  <li class="nav-item">
+    <a class="nav-link" id="roles-tab" data-toggle="tab" href="#roles" role="tab" aria-controls="profile" aria-selected="false">Roles</a>
+  </li>
 </ul>
 
 <div class="tab-content" id="tabs-tabContent">
@@ -74,4 +78,7 @@
   <div class="tab-pane" id="characters" role="tabpanel" aria-labelledby="characters-tab">
 	  <CharacterList setURLParam={true} {appAlert} />
   </div>
+  <div class="tab-pane" id="roles" role="tabpanel" aria-labelledby="roles-tab">
+	  <RoleList setURLParam={true} {appAlert} />
+  </div>
 </div>

app/views/CharacterList.svelte

@@ -6,7 +6,8 @@
 	import moment from 'moment'
         export let setURLParam = true;
 
-	export let appAlert
+	export let appAlert;
+    let characterList;
 
 	async function fetch(page) {
 		try {
@@ -20,7 +21,7 @@
 	}
 </script>
 
-<PaginatedList {setURLParam} URLSearchName='page_char' bind:fetch={fetch} let:data={characters} let:pagination={pagination}>
+<PaginatedList {setURLParam} URLSearchName='page_char' bind:this={characterList} bind:fetch={fetch} let:data={characters} let:pagination={pagination}>
 	<div slot="header">
 		<p>{pagination.item_count.toLocaleString()} characters in the database</p>
 	</div>

app/views/Profile.svelte

@@ -10,7 +10,9 @@
 	import LoginList from '../components/LoginList'
 	import AccountLink from '../components/AccountLink'
 	import ActionButtons from '../components/ActionButtons'
+    import PermissionButtons from '../components/PermissionButtons'
 	import ActionModal from '../components/ActionModal.svelte'
+	import RoleModal from '../components/RoleModal.svelte'
 
 	export let pageCtx;
 	export let appAlert;
@@ -86,7 +88,7 @@
 	{#if characters.length >= 1}
 	<div class="row">
 	{#each characters as char, i}
-		<div class="col-md-4 col-12"><CharacterLink character={char} /></div>
+		<div class="col-md-4 col-12">{char.name} <PermissionButtons avatar={char} /></div>
 	{/each}
 	</div>
 	{:else}
@@ -101,3 +103,4 @@
 {/if}
 
 <ActionModal on:action={() => refresh()} />
+<RoleModal on:action={() => refresh()} />

app/views/RoleList.svelte

@@ -0,0 +1,52 @@
+<script>
+	import { onMount } from 'svelte'
+	import axios from 'axios'
+	import CharacterLink from '../components/CharacterLink'
+	import PermissionButtons from '../components/PermissionButtons'
+	import PaginatedList from '../components/PaginatedList'
+    import RoleModal from '../components/RoleModal.svelte'
+
+	import moment from 'moment'
+        export let setURLParam = true;
+
+	export let appAlert;
+    let roleList;
+
+	async function fetch(page) {
+		try {
+			const resp = await axios.get("/api/roles?page="+page)
+			appAlert.message("")
+			return [resp.data.characters, resp.data.page];
+		} catch (e) {
+			appAlert.message(e.message)
+			return undefined;
+		}
+	}
+</script>
+
+<PaginatedList {setURLParam} URLSearchName='page_role' bind:this={roleList} bind:fetch={fetch} let:data={roles} let:pagination={pagination}>
+	<div slot="header">
+		<p>{pagination.item_count.toLocaleString()} characters in the database have a role assigned</p>
+	</div>
+
+	<table slot="body" class="table table-sm table-dark table-responsive-md table-striped table-hover">
+	  <thead class="thead-light">
+		<th>ID</th>
+		<th>Name</th>
+		<th>Last Played</th>
+		<th>Actions</th>
+	  </thead>
+	  <tbody>
+	  {#each roles as char, i}
+		<tr>
+			<td>#{char.id}</td>
+			<td><CharacterLink character={char} /></td>
+			<td>{moment(char.last_login).fromNow()}</td>
+			<td><PermissionButtons avatar={char} /></td>
+		</tr>
+	  {/each}
+	  </tbody>
+	</table>
+</PaginatedList>
+
+<RoleModal on:action={() => roleList.refresh()} />

app/views/UserList.svelte

@@ -110,7 +110,7 @@
 			<div class="form-check">
 			  <input type="checkbox" class="form-check-input" name="gm" id="userFilterGM">
 			  <label class="form-check-label" for="userFilterGM">
-			    GM
+			    Admin
 			  </label>
 			</div>
 			<div class="form-check">