106 lines
2.3 KiB
Svelte
106 lines
2.3 KiB
Svelte
<iframe srcdoc={html} style="border: none; width: 100%; height: 100%">
|
|
</iframe>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import {setDefaultHeaders} from '../includes/Auth.svelte'
|
|
import {errorPage, withLoadingScreen} from '../js/util'
|
|
import {API_URL} from "../js/constants";
|
|
|
|
export let currentRoute;
|
|
export let params = {};
|
|
|
|
let guildId = currentRoute.namedParams.id;
|
|
let ticketId = currentRoute.namedParams.ticketid;
|
|
|
|
setDefaultHeaders();
|
|
|
|
let html = '';
|
|
|
|
async function loadData() {
|
|
const res = await axios.get(`${API_URL}/api/${guildId}/transcripts/${ticketId}/render`);
|
|
if (res.status !== 200) {
|
|
errorPage(res.data.error);
|
|
return;
|
|
}
|
|
|
|
html = res.data;
|
|
}
|
|
|
|
withLoadingScreen(loadData);
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #2e3136;
|
|
}
|
|
|
|
.discord-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
|
|
background-color: #2e3136;
|
|
font-family: 'Noto Sans', sans-serif !important;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.channel-header {
|
|
background-color: #1e2124;
|
|
height: 50px;
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.channel-name {
|
|
color: white;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
#message-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
align-items: center;
|
|
color: white !important;
|
|
word-wrap: break-word;
|
|
margin: 4px 0 4px 12px;
|
|
}
|
|
|
|
.username, .content, .avatar {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.avatar {
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.attachment {
|
|
margin-left: 12px;
|
|
color: white;
|
|
}
|
|
|
|
@media only screen and (max-width: 576px) {
|
|
.timestamp {
|
|
display: none;
|
|
}
|
|
}
|
|
</style> |