File size: 1,473 Bytes
32f0b26
 
 
48122fa
32f0b26
 
 
48122fa
32f0b26
 
 
70ab0be
32f0b26
 
70ab0be
32f0b26
 
70ab0be
 
48122fa
 
32f0b26
 
 
 
 
 
 
 
 
 
48122fa
 
 
 
 
 
 
 
32f0b26
 
 
 
 
70ab0be
48122fa
70ab0be
 
32f0b26
48122fa
70ab0be
32f0b26
48122fa
 
 
 
70ab0be
32f0b26
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script lang="ts">
	import Labeling from "./Labeling.svelte";
	import Auditing from "./Auditing.svelte";
	import About from "./About.svelte";

	import Tab, { Label } from "@smui/tab";
	import TabBar from "@smui/tab-bar";
	import { Icon } from "@smui/common";

	export let model;
	export let error_type;
	export let cur_user;

	// Handle routing
	let active = "labeling";
    let searchParams = new URLSearchParams(window.location.search);
    let tab = searchParams.get("tab");
	if (tab == "auditing") {
		active = "auditing";
	} else if (tab == "about") {
		active = "about";
	}
	
</script>

<svelte:head>
	<title>IndieLabel</title>
</svelte:head>

<div class="auditing_panel">
	<div class="tab_header">
		<TabBar tabs={["labeling", "auditing", "about"]} let:tab bind:active>
			<Tab {tab} minWidth={tab == "about"}>
				{#if tab == "about"}
					<Icon class="material-icons">info_outlined</Icon>
				{:else}
					<Label>{tab}</Label>
				{/if}
				
			</Tab>
		</TabBar>
	</div>

	<div class="panel_contents">
		<div>
			<div id="labeling" hidden={active != "labeling"} >
				<Labeling cur_user={cur_user}/>	
			</div>

			<div id="auditing" hidden={active != "auditing"} >
				<Auditing bind:personalized_model={model} bind:cur_error_type={error_type} cur_user={cur_user} on:change/>	
			</div>

			<div id="about" hidden={active != "about"} >
				<About />
			</div>
		</div>

	</div>
</div>

<style>
	.panel_contents {
		padding: 50px;
		margin-top: 50px;
	}
</style>