SSR for the Dashboard
This commit is contained in:
parent
6ed2c97e0a
commit
522d344372
8 changed files with 59 additions and 56 deletions
|
|
@ -1,17 +1,17 @@
|
|||
<script context="module">
|
||||
import { EditorView, minimalSetup, basicSetup } from "codemirror";
|
||||
import { ViewPlugin } from "@codemirror/view";
|
||||
import { StateEffect } from "@codemirror/state";
|
||||
export { minimalSetup, basicSetup };
|
||||
</script>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, createEventDispatcher } from "svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let dom;
|
||||
let dom: any;
|
||||
|
||||
let _mounted = false;
|
||||
|
||||
onMount(() => {
|
||||
_mounted = true;
|
||||
return () => {
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
};
|
||||
});
|
||||
|
||||
export let view = null;
|
||||
export let view: any = null;
|
||||
|
||||
/* `doc` is deliberately made non-reactive for not storing a reduntant string
|
||||
besides the editor. Also, setting doc to undefined will not trigger an
|
||||
update, so that you can clear it after setting one. */
|
||||
export let doc;
|
||||
export let doc: string;
|
||||
|
||||
/* Set this if you would like to listen to all transactions via `update` event. */
|
||||
export let verbose = false;
|
||||
|
||||
/* Cached doc string so that we don't extract strings in bulk over and over. */
|
||||
let _docCached = null;
|
||||
let _docCached: string = "";
|
||||
|
||||
/* Overwrite the bulk of the text with the one specified. */
|
||||
function _setText(text) {
|
||||
function _setText(text: string) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: view.state.doc.length, insert: text },
|
||||
});
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
return () => void subscribers.delete(cb);
|
||||
},
|
||||
set(newValue) {
|
||||
set(newValue: string) {
|
||||
if (!_mounted) {
|
||||
throw new Error(
|
||||
"Cannot set docStore when the component is not mounted."
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
$: extensions, _reconfigureExtensions();
|
||||
|
||||
function _editorTxHandler(tr) {
|
||||
function _editorTxHandler(tr: any) {
|
||||
this.update([tr]);
|
||||
|
||||
if (verbose) {
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
|
||||
if (tr.docChanged) {
|
||||
_docCached = null;
|
||||
_docCached = "";
|
||||
if (subscribers.size) {
|
||||
dispatchDocStore((_docCached = tr.newDoc.toString()));
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
|
||||
// the view will be inited with the either doc (as long as that it is not `undefined`)
|
||||
// or the value in docStore once set
|
||||
function _initEditorView(initialDoc) {
|
||||
function _initEditorView(initialDoc: string) {
|
||||
if (view !== null) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
}
|
||||
|
||||
$: if (_mounted && doc !== undefined) {
|
||||
const inited = _initEditorView(doc);
|
||||
_initEditorView(doc);
|
||||
dispatchDocStore(doc);
|
||||
}
|
||||
|
||||
|
|
@ -137,37 +137,3 @@
|
|||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- <script lang="ts"> -->
|
||||
<!-- import { EditorView, basicSetup, minimalSetup } from "codemirror"; -->
|
||||
<!-- import { EditorState } from "@codemirror/state"; -->
|
||||
|
||||
<!-- import { onMount, createEventDispatcher } from "svelte"; -->
|
||||
|
||||
<!-- const dispatch = createEventDispatcher(); -->
|
||||
|
||||
<!-- let view; -->
|
||||
<!-- let dom; -->
|
||||
|
||||
<!-- onMount(() => { -->
|
||||
<!-- let startState = EditorState.create({ -->
|
||||
<!-- doc: "Hello World", -->
|
||||
<!-- }); -->
|
||||
|
||||
<!-- view = new EditorView({ -->
|
||||
<!-- state: startState, -->
|
||||
<!-- extensions: [minimalSetup], -->
|
||||
<!-- parent: dom, -->
|
||||
<!-- }); -->
|
||||
<!-- }); -->
|
||||
<!-- </script> -->
|
||||
|
||||
<!-- <div> -->
|
||||
<!-- <div class="codemirror" bind:this="{dom}"></div> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <style> -->
|
||||
<!-- .codemirror { -->
|
||||
<!-- display: contents; -->
|
||||
<!-- } -->
|
||||
<!-- </style> -->
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
const _identity = get(identity);
|
||||
</script>
|
||||
|
||||
<!-- -------------------------------------------------------------------------->
|
||||
<section id="welcome">
|
||||
<h1>Probo</h1>
|
||||
|
||||
|
|
|
|||
24
frontend/src/routes/dashboard/+page.server.ts
Normal file
24
frontend/src/routes/dashboard/+page.server.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
type Question = {
|
||||
text: string;
|
||||
};
|
||||
|
||||
type Answer = {
|
||||
text: string;
|
||||
};
|
||||
|
||||
type Quiz = {
|
||||
uid: string;
|
||||
question: Question;
|
||||
answers: Answer[];
|
||||
};
|
||||
|
||||
/** @type {import('./$types').PageLoad} */
|
||||
export async function load() {
|
||||
const res = await fetch("http://localhost:8080/quizzes");
|
||||
const response = await res.json();
|
||||
|
||||
console.log(response);
|
||||
if (response.status === "success") {
|
||||
return { quizzes: (await response.content) as Quiz[] };
|
||||
}
|
||||
}
|
||||
|
|
@ -3,27 +3,39 @@
|
|||
import { get } from "svelte/store";
|
||||
import identity from "$lib/stores/kratos/identity";
|
||||
import CodeMirror, { basicSetup } from "$lib/components/codemirror/codemirror.svelte";
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
$: quizzes = data.quizzes;
|
||||
|
||||
const _identity = get(identity);
|
||||
let email = "";
|
||||
let store;
|
||||
let store: any;
|
||||
|
||||
if (_identity && _identity.traits) email = _identity.traits.email;
|
||||
|
||||
function changeHandler({ detail: {tr} }) {
|
||||
function changeHandler({ detail: {tr: any} }) {
|
||||
console.log('change', tr.changes.toJSON())
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<section id="dashboard">
|
||||
<h2>Dashboard</h2>
|
||||
<h2>Probo Dashboard</h2>
|
||||
|
||||
<p>Hello {email}</p>
|
||||
|
||||
<CodeMirror doc={'Edit me!\nAnd here is the second line!!'}
|
||||
{#each quizzes as quiz}
|
||||
<ul>
|
||||
<li>{quiz.Question.Text}</li>
|
||||
</ul>
|
||||
{/each}
|
||||
|
||||
<CodeMirror doc={'Testo della domanda\n\n* Risposta 1\n* Risposta 2\n* Risposta 3'}
|
||||
bind:docStore={store}
|
||||
extensions={basicSetup}
|
||||
on:change={changeHandler}></CodeMirror>
|
||||
on:change={changeHandler}>
|
||||
</CodeMirror>
|
||||
|
||||
<p><a href="{APP}/auth/settings">Settings</a></p>
|
||||
<p><a href="{APP}/auth/logout">Logout</a></p>
|
||||
|
|
|
|||
2
main.go
2
main.go
|
|
@ -9,7 +9,7 @@ import (
|
|||
"github.com/sirupsen/logrus"
|
||||
)
|
||||
|
||||
const port = "3000"
|
||||
const port = "8080"
|
||||
|
||||
func main() {
|
||||
// logger.SetLevel(logger.DebugLevel)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import (
|
|||
"git.andreafazzi.eu/andrea/probo/models"
|
||||
"git.andreafazzi.eu/andrea/probo/store"
|
||||
"github.com/julienschmidt/httprouter"
|
||||
"log"
|
||||
)
|
||||
|
||||
type ProboCollectorServer struct {
|
||||
|
|
@ -100,6 +101,7 @@ func (ps *ProboCollectorServer) updateQuizHandler(w http.ResponseWriter, r *http
|
|||
}
|
||||
|
||||
func (ps *ProboCollectorServer) readAllQuiz(w http.ResponseWriter, r *http.Request) ([]*models.Quiz, error) {
|
||||
log.Println(r)
|
||||
quizzes, err := ps.store.ReadAllQuizzes()
|
||||
if err != nil {
|
||||
return nil, err
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
POST http://localhost:3000/quizzes/create
|
||||
POST http://localhost:8080/quizzes/create
|
||||
{
|
||||
"question": {"text": "Text of Question 1"},
|
||||
"answers": [
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
GET http://localhost:3000/quizzes
|
||||
GET http://localhost:8080/quizzes
|
||||
|
|
|
|||
Loading…
Reference in a new issue