libsoc/site-libsoc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
a-ill
2023-06-14 21:41:54 +03:00
parent 4d034eba7d
commit 9e8ee05bb6
128 changed files with 12242 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
Server/app/svelte/src/components/cookies-dialog.svelte Normal file
View File

@@ -0,0 +1,40 @@
<svelte:options tag="cookies-dialog" />
<script>
// Import libraries
import { onMount } from 'svelte'
//Export
// Main code
onMount(() => {
})
</script>
<div id="wrapper">
<div>
<p>We use cookies to improve your experience, personalise your content and analyse site usage. By clicking “OK”, you agree to the use of cookies.</p>
</div>
</div>
<style>
@import '/css/common.css';
#wrapper {
display: none;
position: relative;
height: 5rem;
width: 100%;
background: white;
box-shadow: 0 0 0.314rem rgb(187, 187, 187);;
}
</style>

107
Server/app/svelte/src/components/legend-component.svelte Normal file
View File

@@ -0,0 +1,107 @@
<svelte:options tag="legend-component" />
<script>
// Import libraries
import { onMount } from 'svelte'
import { pullLegendData } from '/js/predict/charts.js'
// Import components
//Export
export let option = null
export let chart = null
export let data = {}
// Main code
let legendData = []
let buttons = []
let dataKeys
function init() {
if (option==null || option==undefined || chart==null || chart==undefined) {
setTimeout(init,100)
}
else {
legendData = pullLegendData(legendData,option)
for (let obj of legendData) {
data[obj.name] = true
}
dataKeys = Object.keys(data)
}
}
function toggleSeries(i) {
data[dataKeys[i]] = !data[dataKeys[i]]
let inds = []
let ids = option.series.map((x) => x._id)
let id = ids[i]
for (let j=0;j<ids.length;j++) {
if (ids[j]==id) {
inds.push(j)
}
}
for (let i of inds) {
let series = option.series[i]
if (!series.tooltip.show) {
series.lineStyle.opacity = 1
series.itemStyle.opacity = 1
series.tooltip.show = true
buttons[inds[0]].style.opacity = 1
}
else {
series.lineStyle.opacity = 0
series.itemStyle.opacity = 0
series.tooltip.show = false
buttons[inds[0]].style.opacity = 0.5
}
}
chart.setOption(option)
}
onMount(() => {
init()
})
</script>
<div class="legend">
{#each legendData as item, i}
<button bind:this={buttons[i]} on:click={() => toggleSeries(i)}>
<div class="marker" style="background-color: {item.color}"></div>
<span>{item.name}</span>
</button>
{/each}
</div>
<style>
@import '/css/common.css';
@import '/css/test-basic.css';
button {
cursor: pointer;
}
.legend {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.legend * {
font-family: var(--sans-serif);
}
.marker {
position: relative;
display:inline-block;
margin-right: 0.5rem;
top: 0.1rem;
width: 1rem;
height: 1rem;
border-radius: 1rem;
}
</style>

27
Server/app/svelte/src/components/loadscreen-component.svelte Normal file
View File

@@ -0,0 +1,27 @@
<svelte:options tag="loadscreen-component" />
<script>
// Import libraries
import { onMount } from 'svelte'
// Import components
// Main code
let loadscreen
onMount(() => {
window.addEventListener('load', function() {
loadscreen.parentNode.host.style.display = "none"
})
})
</script>
<div bind:this={loadscreen} id="loadscreen" style="width:100%; height: 100%; background:white; position: absolute; z-index: 100000"></div>
<style>
</style>

181
Server/app/svelte/src/components/pane-aligner.svelte Normal file
View File

@@ -0,0 +1,181 @@
<svelte:options tag="pane-aligner" />
<script>
// Import libraries
import { getContext, setContext, onMount } from 'svelte'
import { debounce } from "/js/libraries/miscTools.js"
// Import components
// Export statements
// Main code
let root
let mainPane
let sidebarLeft
let sidebarLeft2
let sidebarRight
let parentProps = getContext("alignerParent")
let switchView = parentProps!=undefined ? getContext("alignerParent").switchView : undefined
let leftReplaced = false
let left2Replaced = false
let rightReplaced = false
let switchViewReplaced = false
function adjustSlotted() {
if (root.parentNode!=null) {
let slotted = root.parentNode.host.childNodes
if (slotted.length==0) {
setTimeout(adjustSlotted, 50)
}
else {
let changed = false
let html = root.parentNode.innerHTML
for (let item of slotted) {
if (item.slot=="sidebar-left" && !leftReplaced) {
html = html.replace("#sidebar-left{display:none}","")
leftReplaced = true
changed = true
}
else if (item.slot=="sidebar-left2" && !left2Replaced) {
html = html.replace("#sidebar-left2{display:none}","")
left2Replaced = true
changed = true
}
else if (item.slot=="sidebar-right" && !rightReplaced){
html = html.replace("#sidebar-right{display:none;","#sidebar-right{")
rightReplaced = true
changed = true
}
}
if (switchView!=undefined && !switchViewReplaced) {
html = html.replace("1880px",switchView)
changed = true
}
if (changed) {
root.parentNode.innerHTML = html
}
}
}
}
window.addEventListener("resize", debounce(adjustSlotted,100))
onMount(() => {
adjustSlotted()
})
</script>
<div bind:this={root} id="root" class="pane-centering">
<div class="pane-container">
<div id="sidebars-left" class="sidebar">
<div bind:this={sidebarLeft} id="sidebar-left" class="pane">
<slot name="sidebar-left"></slot>
</div>
<div bind:this={sidebarLeft2} id="sidebar-left2" class="pane">
<slot name="sidebar-left2"></slot>
</div>
</div>
<div bind:this={sidebarRight} id="sidebar-right" class="pane sidebar">
<slot name="sidebar-right"></slot>
</div>
<div bind:this={mainPane} id="main-pane" class="pane">
<slot name="main" id="main-slot"></slot>
</div>
</div>
</div>
<style>
@import '/css/common.css';
.pane-container {
display: block;
margin-left: var(--total-margin-left,0rem);
}
#root {
min-height: var(--min-height,auto);
}
#main-pane {
position: relative;
padding-left: var(--padding-left,0rem);
padding-right: var(--padding-right,0rem);
padding-top: var(--padding-top,0rem);
padding-bottom: var(--padding-bottom,0rem);
text-align: justify;
background: var(--background,white);
box-shadow: var(--box-shadow,0 0 0.314rem rgb(187, 187, 187));
margin: auto;
height: min-content;
max-width: var(--width-main,66rem);
width: var(--width-main,66rem);
z-index: 1;
overflow-x: var(--overflow-x,hidden);
}
.sidebar {
position: absolute;
}
#sidebars-left {
display: flex;
flex-direction: column;
gap: 1rem;
margin-left: calc(-1*var(--width-left,22.5rem) - 1rem - 4rem);
width: calc(var(--width-left,22.5rem) + 4rem);
}
#sidebar-left,#sidebar-left2 {
position: relative;
background-color: white;
padding: 2rem 2rem;
}
#sidebar-left {
display:none;
}
#sidebar-left2 {
display:none;
}
#sidebar-right {
display:none;
margin-left: calc(var(--width-main,66rem) + 1rem);
width: var(--width-right,auto);
background-color: white;
padding: 2rem 2rem;
}
@media only screen and (max-width: 1880px) {
#main-pane {
max-width: initial;
width: 100%;
max-width: var(--width-main,66rem);
padding-left: var(--padding-left-mobile,1.8rem);
padding-right: var(--padding-right-mobile,1.8rem);
padding-top: var(--padding-top-mobile,1.8rem);
padding-bottom: var(--padding-bottom-mobile,1.8rem);
}
#sidebars-left, #sidebar-right {
position: relative;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
max-width: var(--width-main,66rem);
width: 100%;
}
.pane-container {
width: 95%;
justify-items: center;
grid-auto-flow: row;
margin-left: 0;
}
}
</style>

256
Server/app/svelte/src/components/select-component.svelte Normal file
View File

@@ -0,0 +1,256 @@
<svelte:options tag="select-component" />
<script>
// Import libraries
import { onMount } from 'svelte'
import { px2rem,getTextWidth,getCanvasFont } from "/js/libraries/miscTools.js"
//Export
export let callback = null
export let options = [""]
export let value = null
export let valueindex = null
// Main code
let root = arguments[0]
let select
let optionsHolder
let optionButtons = []
let currentOption
let currentOptionButton
let init = false
let key = 0
let obs = null
$: setKeyValue(value,options)
$: setKeyIndex(valueindex,options)
$: changeOptionsWidth(select,optionsHolder)
function setKeyValue(value,options) {
if (value!==null) {
if (options.includes(value)) {
let index = options.findIndex((element) => element==value)
currentOption.innerHTML = value
optionButtons[index].style.display = "none"
valueindex = index
}
key += 1
}
}
function setKeyIndex(valueindex,options) {
if (valueindex!=null && options!=undefined && options[valueindex]!=value) {
value = options[valueindex]
key += 1
}
}
function indexToValue(index) {
value = options[index]
}
function changeVisibility() {
if (optionsHolder.style.display=="none") {
optionsHolder.style.display = "initial"
}
else {
optionsHolder.style.display = "none"
}
}
function changeOption(index,callback) {
valueindex = index
value = options[index]
if (callback!=undefined && callback!=null) {
callback(index)
}
}
function hideSelect() {
optionsHolder.style.display = "none"
}
function changeOptionsWidth(select,optionsHolder) {
let selectWidth
if (select!=undefined && optionsHolder!=undefined) {
let selectWidthText = getComputedStyle(select).getPropertyValue('--width')
if (isNaN(selectWidthText) || selectWidthText=="") {
if (obs==null) {
obs = new ResizeObserver(() => changeOptionsWidth(select,optionsHolder))
obs.observe(currentOptionButton)
return
}
else {
selectWidthText = getComputedStyle(currentOptionButton).getPropertyValue('width')
selectWidth = px2rem(parseFloat(selectWidthText.slice(0,selectWidthText.length-2)))
}
}
else {
selectWidth = parseFloat(selectWidthText.slice(0,selectWidthText.length-2))
}
let spanWidths = []
for (let i=0;i<optionsHolder.children.length;i++) {
let span = optionsHolder.children[i].children[0]
let spanWidth = getTextWidth(span.innerHTML, getCanvasFont(span))
spanWidths.push(spanWidth)
}
let maxOptionsWidth = px2rem(Math.max(...spanWidths))
if (maxOptionsWidth>selectWidth) {
let width = 1.1*maxOptionsWidth+"rem"
optionsHolder.style.width = width
for (let i=0;i<optionsHolder.children.length;i++) {
let button = optionsHolder.children[i]
button.style.width = width
}
optionsHolder.style.marginLeft = - (1.1*maxOptionsWidth - selectWidth) /2 - 0.05 + "rem"
}
else {
let width = selectWidth + 0.1 + "rem"
for (let i=0;i<optionsHolder.children.length;i++) {
let button = optionsHolder.children[i]
button.style.width = width
}
}
}
}
onMount(() => {
init = true
root.addEventListener('focusout', hideSelect)
})
</script>
<div bind:this={select} class="select">
{#key key}
<button bind:this={currentOptionButton} id="current-option-button" on:click={changeVisibility}>
<div id="current-options-div">
<span bind:this={currentOption} id="current-options-span">{value!=null ? value : ""}</span>
</div>
<img id="arrow-down" src="../assets/arrow_down.svg" alt="arrow down">
</button>
<div bind:this={optionsHolder} id="options-holder" style="display: none">
{#each options as option, i}
<button bind:this={optionButtons[i]} value={i} on:click={() => changeOption(i,callback)}>
<span>{option}</span>
</button>
{/each}
</div>
{/key}
</div>
<style>
@import '/css/common.css';
#current-options-div {
position: relative;
overflow: hidden;
width: calc(100% - 2.5rem);
text-align: var(--text-align,left);
padding-top: 0.5rem;
}
#arrow-down {
right: 0.5rem;
width: 1.365rem;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.select {
position: relative;
margin-top: var(--margin-top,0);
width: var(--width);
max-width: var(--max-width);
height: var(--height,2.75rem);
border: var(--border,rgba(0,0,0,var(--opacity,1)) solid);
border-width: var(--border-width, 0.063rem);
border-radius: var(--border-radius,0.126rem);
}
.select button {
width: var(--width);
max-width: var(--max-width);
}
#current-option-button, #current-option-button * {
opacity: var(--opacity,1);
font-family: var(--font-family,var(--serif), serif);
font-size: var(--font-size, 1.3rem);
}
.select >:first-child {
margin-right: -2.75rem;
padding-right: 0.0rem;
}
.select span {
position: relative;
padding-top: 0.5rem;
white-space: nowrap;
}
#current-option-button {
display: flex;
width: 100%;
height: 100%;
padding-left: 0.341rem;
font-weight: var(--font-weight,400);
}
#options-holder {
position: absolute;
margin-top: calc(-1 * var(--border-width, 0.063rem));
background: white;
z-index: 1;
margin-left: -0.05rem;
border-radius: var(--border-radius-options,0.126rem);
}
#options-holder * {
font-size: var(--options-font-size, 1.2rem);
font-family: var(--font-family,var(--serif), serif);
}
#options-holder button {
display: flex;
position: relative;
width: var(--width);
background: white;
font-weight: 400;
text-align: var(--text-align,left);
padding-top: 0.341rem;
padding-bottom: 0.341rem;
padding-right: 3.515rem;
padding-left: 0.341rem;
}
#options-holder button:hover {
background: #cdcdcd;
}
#options-holder button {
border: black solid;
border-width: 0 var(--border-width-options,var(--border-width, 0.063rem)) 0 var(--border-width-options,var(--border-width, 0.063rem));
}
#options-holder >:first-child {
border-top: black solid var(--border-width-options,var(--border-width, 0.063rem));
border-top-left-radius: var(--border-radius-options,0.126rem);
border-top-right-radius: var(--border-radius-options,0.126rem);
}
#options-holder >:last-child {
border-bottom: black solid var(--border-width-options,var(--border-width, 0.063rem));
border-bottom-left-radius: var(--border-radius-options,0.126rem);
border-bottom-right-radius: var(--border-radius-options,0.126rem);
}
</style>

103
Server/app/svelte/src/components/switch-component.svelte Normal file
View File

@@ -0,0 +1,103 @@
<svelte:options tag="switch-component" />
<script>
// Import libraries
import { onMount } from 'svelte'
import { px2rem,getTextWidth,getCanvasFont } from "/js/libraries/miscTools.js"
//Export
export let callback = null
export let checked = false
export const toggle = () => {
let f = () => {
if (callback != null) {
checked = !checked
callback()
}
else {
toggle()
}
}
setTimeout(f,100)
}
function toggleClick() {
if (callback != null) {
checked = !checked
callback()
}
}
// Main code
onMount(() => {
})
</script>
<label class="switch">
<input type="checkbox" bind:checked={checked} on:click={toggleClick}>
<span class="switch-span"></span>
</label>
<style>
@import '/css/common.css';
.switch span {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: calc(2* 1.2rem);
}
.switch span:before {
position: absolute;
content: "";
height: calc(var(--height) - 0.5rem);
width: calc(var(--height) - 0.5rem);
left: calc(0.3rem);
bottom: 0.25rem;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
.switch input:checked + .switch-span {
background-color: var(--pink);
}
.switch input:hover + .switch-span {
box-shadow: 0 0 0 var(--pink);
}
.switch input:checked + .switch-span:before {
-webkit-transform: translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem));
-ms-transform: translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem));
transform: translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem));
}
.switch {
position: relative;
display: inline-block;
width: var(--width);
height: var(--height);
}
.switch input {
position: absolute;
width: var(--width);
height: var(--height);
opacity: 0;
}
</style>

34
Server/app/svelte/src/footer/footer-component.svelte Normal file
View File

@@ -0,0 +1,34 @@
<svelte:options tag="footer-component" />
<script>
// Import components
</script>
<footer>
<div id="footer-content-container">
<div id="footer-grid-content-container" class="logged">
<div id="contact-us-container">
<h2>CONTACT US</h2>
<p>Email: <a href="mailto:info@chiron.com">test@test</a></p>
</div>
</div>
<button on:click={() => {location.href='#'}} id="footer-up" aria-label="go up">
<svg xmlns="http://www.w3.org/2000/svg" width="42.545" height="72.601" viewBox="0 0 42.545 72.601">
<g id="Group_268" data-name="Group 268" transform="translate(-6.177 -2.399)">
<rect id="Rectangle_146" data-name="Rectangle 146" width="11" height="51" rx="5.5" transform="translate(22 24)" fill="var(--pink)"/>
<path id="Path_1145" data-name="Path 1145" d="M23.814,4.021a5,5,0,0,1,7.372,0l16.134,17.6c2.94,3.207,1.046,10.4-3.686,8.379S28.02,14.081,28.391,13.524,16.544,27.976,11.366,30,4.741,24.828,7.68,21.621Z" fill="var(--pink)"/>
</g>
</svg>
</button>
<p id="footer-copyright">© 2023 LibSoc</p>
</div>
</footer>
<style>
@import '/css/common.css';
@import '/css/footer.css';
</style>

26
Server/app/svelte/src/landing-component.svelte Normal file
View File

@@ -0,0 +1,26 @@
<svelte:options tag="landing-component" />
<script>
// Import statements
i
// Import components
// Main code
onMount(() => {
})
</script>
<!--HTML GOES HERE-->
<p>I AM A TEXT FOR TESTING</p>
<style>
@import '/css/common.css';
</style>

57
Server/app/svelte/src/navbar/navbar-component.svelte Normal file
View File

@@ -0,0 +1,57 @@
<svelte:options tag="navbar-component" />
<script>
// Import statements
import { onMount } from 'svelte'
// Main code
let hambInput
let navbar
function changeNavbar() {
if (hambInput.checked) {
navbar.style.background = "white"
navbar.style.boxShadow = "0 0 0.314rem rgb(187, 187, 187)"
}
else {
setTimeout(()=> {
navbar.style.position = "relative"
navbar.style.background = ""
navbar.style.boxShadow = ""
}
,510)
}
}
onMount(() => {
})
</script>
<!-- Navigation bar -->
<header bind:this={navbar} id="navbar">
<!-- Logo -->
<a id=logo-container href="/">
<img src="" id="navbar-logo" alt="iql logo">
<span id="navbar-logo-text">LibSoc</span>
</a>
<!-- Hamburger icon -->
<input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}>
<label id="hamb" for="side-menu"><span id="hamb-line"></span></label>
<!-- Menu -->
<nav id="nav">
<ul id="menu">
<li><a href="/test">test</a></li>
</ul>
</nav>
</header>
<style>
@import '/css/common.css';
@import '/css/navbar.css';
</style>