Dataset page states
This commit is contained in:
parent
4cbaa4f07f
commit
033e007758
@ -150,6 +150,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
form > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -160,7 +165,7 @@
|
||||
}
|
||||
|
||||
input[type="text"], textarea, select {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 6px;
|
||||
|
@ -4,4 +4,7 @@ namespace SessionZero.Pages.Library.Datasets;
|
||||
|
||||
public partial class DatasetEditor : ComponentBase
|
||||
{
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
@ -7,31 +7,71 @@
|
||||
@inject SzfGenerator SzfGenerator
|
||||
|
||||
|
||||
<NavLink class="button-secondary" href="/library/" style="align-self: flex-start;">
|
||||
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
|
||||
Back to Library
|
||||
</NavLink>
|
||||
@switch (_currentPageState)
|
||||
{
|
||||
case PageState.Main:
|
||||
<NavLink class="button-secondary" href="/library/" style="align-self: flex-start;">
|
||||
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
|
||||
Back to Library
|
||||
</NavLink>
|
||||
|
||||
<h1 class="page-title">Datasets</h1>
|
||||
<h1 class="page-title">Datasets</h1>
|
||||
|
||||
<div class="library-card-container">
|
||||
<div class="card" onclick="@(() => { })">
|
||||
<img src="res/icons/outline/general/plus.svg" class="icon"/>
|
||||
<h1>Create</h1>
|
||||
<p>Create a new datasets</p>
|
||||
</div>
|
||||
<div class="library-card-container">
|
||||
<div class="card" onclick="@(() => { SetPageState(PageState.Create); })">
|
||||
<img src="res/icons/outline/general/plus.svg" class="icon"/>
|
||||
<h1>Create</h1>
|
||||
<p>Create a new datasets</p>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="@(() => { })">
|
||||
<img src="res/icons/outline/general/edit.svg" class="icon"/>
|
||||
<h1>Manage</h1>
|
||||
<p>Manage and edit saved datasets</p>
|
||||
</div>
|
||||
<div class="card" onclick="@(() => { SetPageState(PageState.List); })">
|
||||
<img src="res/icons/outline/general/edit.svg" class="icon"/>
|
||||
<h1>Manage</h1>
|
||||
<p>Manage and edit saved datasets</p>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="@(() => { })">
|
||||
<img src="res/icons/outline/general/search.svg" class="icon"/>
|
||||
<h1>SessionZeroDB</h1>
|
||||
<p>Search online for new datasets (NOT FUNCTIONAL)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="@(() => { SetPageState(PageState.SessionZeroDB); })">
|
||||
<img src="res/icons/outline/general/search.svg" class="icon"/>
|
||||
<h1>SessionZeroDB</h1>
|
||||
<p>Search online for new datasets (NOT FUNCTIONAL)</p>
|
||||
</div>
|
||||
</div>
|
||||
break;
|
||||
case PageState.Create:
|
||||
<div class="button-secondary" href="/library/" style="align-self: flex-start;" onclick="@(() => { SetPageState(PageState.Main); })">
|
||||
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
|
||||
Go Back
|
||||
</div>
|
||||
<h1 class="page-title">Create Dataset</h1>
|
||||
<DatasetEditor/>
|
||||
break;
|
||||
case PageState.List:
|
||||
<div class="button-secondary" href="/library/" style="align-self: flex-start;" onclick="@(() => { SetPageState(PageState.Main); })">
|
||||
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
|
||||
Go Back
|
||||
</div>
|
||||
<h1 class="page-title">Manage Datasets</h1>
|
||||
<p>Here you can manage your saved datasets</p>
|
||||
break;
|
||||
case PageState.SessionZeroDB:
|
||||
<div class="button-secondary" href="/library/" style="align-self: flex-start;" onclick="@(() => { SetPageState(PageState.Main); })">
|
||||
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
|
||||
Go Back
|
||||
</div>
|
||||
<h1 class="page-title">SessionZeroDB</h1>
|
||||
<p>This is where you will be able to search online for new datasets</p>
|
||||
break;
|
||||
default:
|
||||
<NavLink class="button-secondary" href="/library/" style="align-self: flex-start;">
|
||||
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
|
||||
Back to Library
|
||||
</NavLink>
|
||||
<h1 class="page-title">Oops!</h1>
|
||||
<p>Something went wrong.</p>
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
<DatasetEditor></DatasetEditor>
|
@ -4,5 +4,20 @@ namespace SessionZero.Pages.Library.Datasets;
|
||||
|
||||
public partial class Datasets : ComponentBase
|
||||
{
|
||||
|
||||
private PageState _currentPageState = PageState.Main;
|
||||
|
||||
enum PageState
|
||||
{
|
||||
Main,
|
||||
Create,
|
||||
List,
|
||||
View,
|
||||
Edit,
|
||||
SessionZeroDB
|
||||
}
|
||||
|
||||
private void SetPageState(PageState state)
|
||||
{
|
||||
_currentPageState = state;
|
||||
}
|
||||
}
|
@ -104,13 +104,15 @@ html, body, #app {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
justify-content: flex-start;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.library-card-container .card {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
max-width: calc(50% - 0.75rem);
|
||||
flex: 1 1 300px;
|
||||
max-width: 300px;
|
||||
min-width: 300px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user