Feature: first API connection
This commit is contained in:
commit
8b849521af
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/target
|
||||||
2369
Cargo.lock
generated
Normal file
2369
Cargo.lock
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
Cargo.toml
Normal file
15
Cargo.toml
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
[package]
|
||||||
|
name = "ProjectD"
|
||||||
|
version = "0.1.0"
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
dioxus = "0.3.2"
|
||||||
|
dioxus-logger = "0.3.0"
|
||||||
|
dioxus-router = { version = "0.3.0", features = ["wasm-bindgen", "wasm_test", "web"] }
|
||||||
|
dioxus-web = "0.3.1"
|
||||||
|
log = "0.4.17"
|
||||||
|
ProjectF = { path = "../ProjectF" }
|
||||||
|
reqwest = { version = "0.11.16", features = ["json", "blocking"] }
|
||||||
1205
dist/assets/dioxus/dioxus.js
vendored
Normal file
1205
dist/assets/dioxus/dioxus.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
BIN
dist/assets/dioxus/dioxus_bg.wasm
vendored
Normal file
BIN
dist/assets/dioxus/dioxus_bg.wasm
vendored
Normal file
Binary file not shown.
180
dist/assets/dioxus/snippets/dioxus-interpreter-js-1676574062e4c953/inline0.js
vendored
Normal file
180
dist/assets/dioxus/snippets/dioxus-interpreter-js-1676574062e4c953/inline0.js
vendored
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
let m,p,ls,lss,sp,d,t,c,s,sl,op,i,e,z,tmpl_id,index,bubbles,root,event_name,id,ptr,n,many,field,ns,len,text,value;const evt = [];const attr = [];const ns_cache = [];
|
||||||
|
class ListenerMap {
|
||||||
|
constructor(root) {
|
||||||
|
// bubbling events can listen at the root element
|
||||||
|
this.global = {};
|
||||||
|
// non bubbling events listen at the element the listener was created at
|
||||||
|
this.local = {};
|
||||||
|
this.root = null;
|
||||||
|
this.handler = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
create(event_name, element, bubbles) {
|
||||||
|
if (bubbles) {
|
||||||
|
if (this.global[event_name] === undefined) {
|
||||||
|
this.global[event_name] = {};
|
||||||
|
this.global[event_name].active = 1;
|
||||||
|
this.root.addEventListener(event_name, this.handler);
|
||||||
|
} else {
|
||||||
|
this.global[event_name].active++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const id = element.getAttribute("data-dioxus-id");
|
||||||
|
if (!this.local[id]) {
|
||||||
|
this.local[id] = {};
|
||||||
|
}
|
||||||
|
element.addEventListener(event_name, this.handler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
remove(element, event_name, bubbles) {
|
||||||
|
if (bubbles) {
|
||||||
|
this.global[event_name].active--;
|
||||||
|
if (this.global[event_name].active === 0) {
|
||||||
|
this.root.removeEventListener(event_name, this.global[event_name].callback);
|
||||||
|
delete this.global[event_name];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const id = element.getAttribute("data-dioxus-id");
|
||||||
|
delete this.local[id][event_name];
|
||||||
|
if (this.local[id].length === 0) {
|
||||||
|
delete this.local[id];
|
||||||
|
}
|
||||||
|
element.removeEventListener(event_name, this.handler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
removeAllNonBubbling(element) {
|
||||||
|
const id = element.getAttribute("data-dioxus-id");
|
||||||
|
delete this.local[id];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function SetAttributeInner(node, field, value, ns) {
|
||||||
|
const name = field;
|
||||||
|
if (ns === "style") {
|
||||||
|
// ????? why do we need to do this
|
||||||
|
if (node.style === undefined) {
|
||||||
|
node.style = {};
|
||||||
|
}
|
||||||
|
node.style[name] = value;
|
||||||
|
} else if (ns !== null && ns !== undefined && ns !== "") {
|
||||||
|
node.setAttributeNS(ns, name, value);
|
||||||
|
} else {
|
||||||
|
switch (name) {
|
||||||
|
case "value":
|
||||||
|
if (value !== node.value) {
|
||||||
|
node.value = value;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "checked":
|
||||||
|
node.checked = value === "true";
|
||||||
|
break;
|
||||||
|
case "selected":
|
||||||
|
node.selected = value === "true";
|
||||||
|
break;
|
||||||
|
case "dangerous_inner_html":
|
||||||
|
node.innerHTML = value;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
|
||||||
|
if (value === "false" && bool_attrs.hasOwnProperty(name)) {
|
||||||
|
node.removeAttribute(name);
|
||||||
|
} else {
|
||||||
|
node.setAttribute(name, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function LoadChild(ptr, len) {
|
||||||
|
// iterate through each number and get that child
|
||||||
|
node = stack[stack.length - 1];
|
||||||
|
ptr_end = ptr + len;
|
||||||
|
for (; ptr < ptr_end; ptr++) {
|
||||||
|
end = m.getUint8(ptr);
|
||||||
|
for (node = node.firstChild; end > 0; end--) {
|
||||||
|
node = node.nextSibling;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
const listeners = new ListenerMap();
|
||||||
|
let nodes = [];
|
||||||
|
let stack = [];
|
||||||
|
const templates = {};
|
||||||
|
let node, els, end, ptr_end, k;
|
||||||
|
export function save_template(nodes, tmpl_id) {
|
||||||
|
templates[tmpl_id] = nodes;
|
||||||
|
}
|
||||||
|
export function set_node(id, node) {
|
||||||
|
nodes[id] = node;
|
||||||
|
}
|
||||||
|
export function initilize(root, handler) {
|
||||||
|
listeners.handler = handler;
|
||||||
|
nodes = [root];
|
||||||
|
stack = [root];
|
||||||
|
listeners.root = root;
|
||||||
|
}
|
||||||
|
function AppendChildren(id, many){
|
||||||
|
root = nodes[id];
|
||||||
|
els = stack.splice(stack.length-many);
|
||||||
|
for (k = 0; k < many; k++) {
|
||||||
|
root.appendChild(els[k]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const bool_attrs = {
|
||||||
|
allowfullscreen: true,
|
||||||
|
allowpaymentrequest: true,
|
||||||
|
async: true,
|
||||||
|
autofocus: true,
|
||||||
|
autoplay: true,
|
||||||
|
checked: true,
|
||||||
|
controls: true,
|
||||||
|
default: true,
|
||||||
|
defer: true,
|
||||||
|
disabled: true,
|
||||||
|
formnovalidate: true,
|
||||||
|
hidden: true,
|
||||||
|
ismap: true,
|
||||||
|
itemscope: true,
|
||||||
|
loop: true,
|
||||||
|
multiple: true,
|
||||||
|
muted: true,
|
||||||
|
nomodule: true,
|
||||||
|
novalidate: true,
|
||||||
|
open: true,
|
||||||
|
playsinline: true,
|
||||||
|
readonly: true,
|
||||||
|
required: true,
|
||||||
|
reversed: true,
|
||||||
|
selected: true,
|
||||||
|
truespeed: true,
|
||||||
|
};
|
||||||
|
export function create(r){d=r;c=new TextDecoder('utf-8',{fatal:true})}export function update_memory(r){m=new DataView(r.buffer)}export function set_buffer(b){m=new DataView(b)}export function run(){t=m.getUint8(d,true);if(t&1){ls=m.getUint32(d+1,true)}p=ls;if(t&2){lss=m.getUint32(d+5,true)}if(t&4){sl=m.getUint32(d+9,true);if(t&8){sp=lss;s="";e=sp+(sl/4|0)*4;while(sp<e){t=m.getUint32(sp,true);s+=String.fromCharCode(t&255,(t&65280)>>8,(t&16711680)>>16,t>>24);sp+=4}while(sp<lss+sl){s+=String.fromCharCode(m.getUint8(sp++));}}else{s=c.decode(new DataView(m.buffer,lss,sl))}sp=0}for(;;){op=m.getUint32(p,true);p+=4;z=0;while(z++<4){switch(op&255){case 0:{AppendChildren(root, stack.length-1);}break;case 1:{stack.push(nodes[m.getUint32(p,true)]);}p+=4;break;case 2:id=m.getUint32(p,true);p += 4;{AppendChildren(id, m.getUint32(p,true));}p+=4;break;case 3:{stack.pop();}break;case 4:id=m.getUint32(p,true);p += 4;{root = nodes[id]; els = stack.splice(stack.length-m.getUint32(p,true)); if (root.listening) { listeners.removeAllNonBubbling(root); } root.replaceWith(...els);}p+=4;break;case 5:id=m.getUint32(p,true);p += 4;{nodes[id].after(...stack.splice(stack.length-m.getUint32(p,true)));}p+=4;break;case 6:id=m.getUint32(p,true);p += 4;{nodes[id].before(...stack.splice(stack.length-m.getUint32(p,true)));}p+=4;break;case 7:{node = nodes[m.getUint32(p,true)]; if (node !== undefined) { if (node.listening) { listeners.removeAllNonBubbling(node); } node.remove(); }}p+=4;break;case 8:{stack.push(document.createTextNode(s.substring(sp,sp+=m.getUint32(p,true))));}p+=4;break;case 9:text=s.substring(sp,sp+=m.getUint32(p,true));p += 4;{node = document.createTextNode(text); nodes[m.getUint32(p,true)] = node; stack.push(node);}p+=4;break;case 10:{node = document.createElement('pre'); node.hidden = true; stack.push(node); nodes[m.getUint32(p,true)] = node;}p+=4;break;case 11:id=m.getUint32(p,true);p += 4;i=m.getUint32(p,true);if((i&128)!=0){event_name=s.substring(sp,sp+=(i>>>8)&255);evt[i&127]=event_name;}else{event_name=evt[i&127];}node = nodes[id]; if(node.listening){node.listening += 1;}else{node.listening = 1;} node.setAttribute('data-dioxus-id', `${id}`); listeners.create(event_name, node, (i>>>16)&255);p+=3;break;case 12:i=m.getUint32(p,true);p += 3;if((i&128)!=0){event_name=s.substring(sp,sp+=(i>>>8)&255);evt[i&127]=event_name;}else{event_name=evt[i&127];}bubbles=(i>>>16)&255;{node = nodes[m.getUint32(p,true)]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); listeners.remove(node, event_name, bubbles);}p+=4;break;case 13:id=m.getUint32(p,true);p += 4;{nodes[id].textContent = s.substring(sp,sp+=m.getUint32(p,true));}p+=4;break;case 14:i=m.getUint32(p,true);p += 4;if((i&128)!=0){ns=s.substring(sp,sp+=(i>>>8)&255);ns_cache[i&127]=ns;}else{ns=ns_cache[i&127];}if((i&8388608)!=0){field=s.substring(sp,sp+=i>>>24);attr[(i>>>16)&127]=field;}else{field=attr[(i>>>16)&127];}id=m.getUint32(p,true);p += 4;{node = nodes[id]; SetAttributeInner(node, field, s.substring(sp,sp+=m.getUint32(p,true)), ns);}p+=4;break;case 15:i=m.getUint32(p,true);p += 4;if((i&128)!=0){ns=s.substring(sp,sp+=(i>>>8)&255);ns_cache[i&127]=ns;}else{ns=ns_cache[i&127];}if((i&8388608)!=0){field=s.substring(sp,sp+=i>>>24);attr[(i>>>16)&127]=field;}else{field=attr[(i>>>16)&127];}{name = field;
|
||||||
|
node = nodes[m.getUint32(p,true)];
|
||||||
|
if (ns == "style") {
|
||||||
|
node.style.removeProperty(name);
|
||||||
|
} else if (ns !== null && ns !== undefined && ns !== "") {
|
||||||
|
node.removeAttributeNS(ns, name);
|
||||||
|
} else if (name === "value") {
|
||||||
|
node.value = "";
|
||||||
|
} else if (name === "checked") {
|
||||||
|
node.checked = false;
|
||||||
|
} else if (name === "selected") {
|
||||||
|
node.selected = false;
|
||||||
|
} else if (name === "dangerous_inner_html") {
|
||||||
|
node.innerHTML = "";
|
||||||
|
} else {
|
||||||
|
node.removeAttribute(name);
|
||||||
|
}}p+=4;break;case 16:len=m.getUint8(p,true);p += 1;ptr=m.getUint32(p,true);p += 4;{nodes[m.getUint32(p,true)] = LoadChild(ptr, len);}p+=4;break;case 17:len=m.getUint8(p,true);p += 1;value=s.substring(sp,sp+=m.getUint32(p,true));p += 4;ptr=m.getUint32(p,true);p += 4;{
|
||||||
|
node = LoadChild(ptr, len);
|
||||||
|
if (node.nodeType == Node.TEXT_NODE) {
|
||||||
|
node.textContent = value;
|
||||||
|
} else {
|
||||||
|
let text = document.createTextNode(value);
|
||||||
|
node.replaceWith(text);
|
||||||
|
node = text;
|
||||||
|
}
|
||||||
|
nodes[m.getUint32(p,true)] = node;
|
||||||
|
}p+=4;break;case 18:len=m.getUint8(p,true);p += 1;ptr=m.getUint32(p,true);p += 4;{els = stack.splice(stack.length - m.getUint32(p,true)); node = LoadChild(ptr, len); node.replaceWith(...els);}p+=4;break;case 19:tmpl_id=m.getUint32(p,true);p += 4;index=m.getUint32(p,true);p += 4;{node = templates[tmpl_id][index].cloneNode(true); nodes[m.getUint32(p,true)] = node; stack.push(node);}p+=4;break;case 20:return true;}op>>>=8;}}}
|
||||||
46
dist/index.html
vendored
Normal file
46
dist/index.html
vendored
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>dioxus | ⛺</title>
|
||||||
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="main"></div>
|
||||||
|
<script type="module">
|
||||||
|
import init from "/./assets/dioxus/dioxus.js";
|
||||||
|
init("/./assets/dioxus/dioxus_bg.wasm").then(wasm => {
|
||||||
|
if (wasm.__wbindgen_start == undefined) {
|
||||||
|
wasm.main();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html><script>// Dioxus-CLI
|
||||||
|
// https://github.com/DioxusLabs/cli
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
var url = protocol + '//' + window.location.host + '/_dioxus/ws';
|
||||||
|
var poll_interval = 8080;
|
||||||
|
var reload_upon_connect = () => {
|
||||||
|
window.setTimeout(
|
||||||
|
() => {
|
||||||
|
var ws = new WebSocket(url);
|
||||||
|
ws.onopen = () => window.location.reload();
|
||||||
|
ws.onclose = reload_upon_connect;
|
||||||
|
},
|
||||||
|
poll_interval);
|
||||||
|
};
|
||||||
|
|
||||||
|
var ws = new WebSocket(url);
|
||||||
|
ws.onmessage = (ev) => {
|
||||||
|
if (ev.data == "reload") {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ws.onclose = reload_upon_connect;
|
||||||
|
})()</script>
|
||||||
333
src/components/nav/mod.rs
Normal file
333
src/components/nav/mod.rs
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
|
pub fn nav(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
section { class: "relative",
|
||||||
|
nav { class: "flex justify-between border-b",
|
||||||
|
div { class: "px-12 py-8 flex w-full items-center",
|
||||||
|
a { class: "hidden xl:block mr-16", href: "#", icons::icon_0 {} }
|
||||||
|
ul { class: "hidden xl:flex font-semibold font-heading",
|
||||||
|
li { class: "mr-12", a { class: "hover:text-gray-600", href: "#", "Category" } }
|
||||||
|
li { class: "mr-12", a { class: "hover:text-gray-600", href: "#", "Collection" } }
|
||||||
|
li { class: "mr-12", a { class: "hover:text-gray-600", href: "#", "Story" } }
|
||||||
|
li { a { class: "hover:text-gray-600", href: "#", "Brand" } }
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
class: "flex-shrink-0 xl:mx-auto text-3xl font-bold font-heading",
|
||||||
|
href: "#",
|
||||||
|
img {
|
||||||
|
class: "h-9",
|
||||||
|
width: "auto",
|
||||||
|
alt: "",
|
||||||
|
src: "https://shuffle.dev/yofte-assets/logos/yofte-logo.svg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div { class: "hidden xl:inline-block mr-14",
|
||||||
|
input {
|
||||||
|
class: "py-5 px-8 w-full placeholder-gray-400 text-xs uppercase font-semibold font-heading bg-gray-50 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md",
|
||||||
|
placeholder: "Search",
|
||||||
|
r#type: "text"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div { class: "hidden xl:flex items-center",
|
||||||
|
a { class: "mr-10 hover:text-gray-600", href: "#", icons::icon_1 {} }
|
||||||
|
a { class: "flex items-center hover:text-gray-600", href: "#",
|
||||||
|
icons::icon_2 {}
|
||||||
|
span { class: "inline-block w-6 h-6 text-center bg-gray-50 rounded-full font-semibold font-heading",
|
||||||
|
"3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
class: "hidden xl:flex items-center px-12 border-l font-semibold font-heading hover:text-gray-600",
|
||||||
|
href: "#",
|
||||||
|
icons::icon_3 {}
|
||||||
|
span { "Sign In" }
|
||||||
|
}
|
||||||
|
a { class: "xl:hidden flex mr-6 items-center text-gray-600", href: "#",
|
||||||
|
icons::icon_4 {}
|
||||||
|
span { class: "inline-block w-6 h-6 text-center bg-gray-50 rounded-full font-semibold font-heading",
|
||||||
|
"3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a { class: "navbar-burger self-center mr-12 xl:hidden", href: "#", icons::icon_5 {} }
|
||||||
|
}
|
||||||
|
div { class: "hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50",
|
||||||
|
div { class: "navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" }
|
||||||
|
nav { class: "relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto",
|
||||||
|
div { class: "flex items-center mb-8",
|
||||||
|
a { class: "mr-auto text-3xl font-bold font-heading", href: "#",
|
||||||
|
img {
|
||||||
|
class: "h-9",
|
||||||
|
src: "https://shuffle.dev/yofte-assets/logos/yofte-logo.svg",
|
||||||
|
width: "auto",
|
||||||
|
alt: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button { class: "navbar-close", icons::icon_6 {} }
|
||||||
|
}
|
||||||
|
div { class: "flex mb-8 justify-between",
|
||||||
|
a {
|
||||||
|
class: "inline-flex items-center font-semibold font-heading",
|
||||||
|
href: "#",
|
||||||
|
icons::icon_7 {}
|
||||||
|
span { "Sign In" }
|
||||||
|
}
|
||||||
|
div { class: "flex items-center",
|
||||||
|
a { class: "mr-10", href: "#", icons::icon_8 {} }
|
||||||
|
a { class: "flex items-center", href: "#",
|
||||||
|
icons::icon_9 {}
|
||||||
|
span { class: "inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading",
|
||||||
|
"3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
class: "block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none",
|
||||||
|
r#type: "search",
|
||||||
|
placeholder: "Search"
|
||||||
|
}
|
||||||
|
ul { class: "text-3xl font-bold font-heading",
|
||||||
|
li { class: "mb-8", a { href: "#", "Category" } }
|
||||||
|
li { class: "mb-8", a { href: "#", "Collection" } }
|
||||||
|
li { class: "mb-8", a { href: "#", "Story" } }
|
||||||
|
li { a { href: "#", "Brand" } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
mod icons {
|
||||||
|
use super::*;
|
||||||
|
|
||||||
|
pub(super) fn icon_0(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
class: "mr-3",
|
||||||
|
fill: "none",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
view_box: "0 0 23 23",
|
||||||
|
width: "23",
|
||||||
|
height: "23",
|
||||||
|
path {
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
d: "M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z",
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke_width: "1.5"
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
d: "M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linejoin: "round"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_1(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
height: "20",
|
||||||
|
view_box: "0 0 23 20",
|
||||||
|
width: "23",
|
||||||
|
fill: "none",
|
||||||
|
path {
|
||||||
|
d: "M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z",
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
stroke_linecap: "round"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_2(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
class: "mr-3",
|
||||||
|
fill: "none",
|
||||||
|
height: "31",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
width: "32",
|
||||||
|
view_box: "0 0 32 31",
|
||||||
|
path {
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
d: "M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke: "currentColor"
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
stroke_width: "1.5",
|
||||||
|
d: "M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963",
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke_linejoin: "round"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_3(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
class: "h-2 w-2 text-gray-500 cursor-pointer",
|
||||||
|
height: "10",
|
||||||
|
width: "10",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
fill: "none",
|
||||||
|
view_box: "0 0 10 10",
|
||||||
|
path {
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
d: "M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002",
|
||||||
|
stroke: "black",
|
||||||
|
stroke_linecap: "round"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_4(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
view_box: "0 0 20 12",
|
||||||
|
fill: "none",
|
||||||
|
width: "20",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
height: "12",
|
||||||
|
path {
|
||||||
|
d: "M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z",
|
||||||
|
fill: "#8594A5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_5(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
class: "mr-2",
|
||||||
|
fill: "none",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
width: "23",
|
||||||
|
height: "23",
|
||||||
|
view_box: "0 0 23 23",
|
||||||
|
path {
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
d: "M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z",
|
||||||
|
stroke: "currentColor"
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
d: "M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469",
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke: "currentColor"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_6(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
class: "mr-3",
|
||||||
|
height: "31",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
view_box: "0 0 32 31",
|
||||||
|
width: "32",
|
||||||
|
fill: "none",
|
||||||
|
path {
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
d: "M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke_linejoin: "round"
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
d: "M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_7(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
class: "mr-3",
|
||||||
|
view_box: "0 0 23 23",
|
||||||
|
fill: "none",
|
||||||
|
height: "23",
|
||||||
|
width: "23",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
path {
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
d: "M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z"
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
d: "M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linecap: "round",
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_linejoin: "round"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_8(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
height: "20",
|
||||||
|
width: "23",
|
||||||
|
fill: "none",
|
||||||
|
view_box: "0 0 23 20",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
path {
|
||||||
|
d: "M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z",
|
||||||
|
stroke_linejoin: "round",
|
||||||
|
stroke: "currentColor",
|
||||||
|
stroke_width: "1.5",
|
||||||
|
stroke_linecap: "round"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub(super) fn icon_9(cx: Scope) -> Element {
|
||||||
|
cx.render(rsx!(
|
||||||
|
svg {
|
||||||
|
view_box: "0 0 18 18",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
width: "18",
|
||||||
|
height: "18",
|
||||||
|
fill: "none",
|
||||||
|
path { fill: "black", d: "M18 15.4688H0V17.7207H18V15.4688Z" }
|
||||||
|
path { fill: "black", d: "M11.0226 7.87402H0V10.126H11.0226V7.87402Z" }
|
||||||
|
path { fill: "black", d: "M18 0.279297H0V2.53127H18V0.279297Z" }
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
38
src/main.rs
Normal file
38
src/main.rs
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
use dioxus::prelude::*;
|
||||||
|
use dioxus_router::{Route, Router};
|
||||||
|
use log::LevelFilter;
|
||||||
|
|
||||||
|
mod pages;
|
||||||
|
// use pages::{homepage, page_not_found};
|
||||||
|
use pages::{page_not_found, homepage};
|
||||||
|
|
||||||
|
mod components {
|
||||||
|
pub mod nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
// Launch Dioxus web app
|
||||||
|
dioxus_logger::init(LevelFilter::Trace).expect("failed to init logger");
|
||||||
|
dioxus_web::launch(app);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Our root component.
|
||||||
|
fn app(cx: Scope) -> Element {
|
||||||
|
// Render "Hello, wasm!" to the screen.
|
||||||
|
cx.render(rsx! {
|
||||||
|
head { link {
|
||||||
|
rel: "stylesheet",
|
||||||
|
href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css"
|
||||||
|
} }
|
||||||
|
components::nav::nav {}
|
||||||
|
Router {
|
||||||
|
Route { to: "/", pages::homepage {} }
|
||||||
|
Route { to: "/login", pages::login {} }
|
||||||
|
// Route { to: "/test", page_not_found{} }
|
||||||
|
Route { to: "/orange", "Oranges are not apples!" }
|
||||||
|
Route { to: "", pages::page_not_found {} }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
102
src/pages/mod.rs
Normal file
102
src/pages/mod.rs
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
use dioxus::prelude::*;
|
||||||
|
use dioxus::html::input_data::keyboard_types::Key;
|
||||||
|
use log::{info, LevelFilter};
|
||||||
|
use ProjectF::{Candidate, Login};
|
||||||
|
|
||||||
|
pub fn homepage(cx: Scope) -> Element {
|
||||||
|
// let search_input = use_state(cx, String::new);
|
||||||
|
let form_data = use_ref(cx, || Candidate::new());
|
||||||
|
cx.render( rsx!(
|
||||||
|
div {
|
||||||
|
h1 { "Homepage" }
|
||||||
|
input {
|
||||||
|
"type": "text",
|
||||||
|
value: "{form_data.read().name}",
|
||||||
|
placeholder: "Search for doggo",
|
||||||
|
oninput: move |evt| form_data.with_mut(|form_data| form_data.name = evt.value.clone()),
|
||||||
|
onkeydown: move |evt| {
|
||||||
|
if evt.key() == Key::Enter {
|
||||||
|
info!("searching for doggo {}", form_data.read().name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
"You searched for: "
|
||||||
|
b { "{form_data.read().name}" }
|
||||||
|
}
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn login(cx: Scope) -> Element {
|
||||||
|
// let login_data = use_ref(cx, || Login::new());
|
||||||
|
let login_data = use_ref(&cx, || Login::new());
|
||||||
|
let check_email = move |_| {
|
||||||
|
let login_data_copy = login_data.clone();
|
||||||
|
cx.spawn(async move {
|
||||||
|
let client = reqwest::Client::new();
|
||||||
|
let response = client.post("http://0.0.0.0:8777/api/login")
|
||||||
|
.json(&*login_data_copy.read())
|
||||||
|
.send()
|
||||||
|
.await;
|
||||||
|
// .unwrap()
|
||||||
|
// .text()
|
||||||
|
// .await;
|
||||||
|
|
||||||
|
match response.unwrap().status() {
|
||||||
|
reqwest::StatusCode::OK => info!("OK"),
|
||||||
|
reqwest::StatusCode::NOT_FOUND => info!("KO"),
|
||||||
|
reqwest::StatusCode::CONFLICT => info!("KO"),
|
||||||
|
_ => info!("Unknown response"),
|
||||||
|
}
|
||||||
|
// match response {
|
||||||
|
// Ok(response) => info!("Response {}", response),
|
||||||
|
// Err(e) => info!("Error {}", e),
|
||||||
|
// }
|
||||||
|
// info!("Login {} {}", login_data_copy.read().email, login_data_copy.read().ine);
|
||||||
|
// info!("Reponse {}", response.unwrap());
|
||||||
|
()
|
||||||
|
});
|
||||||
|
};
|
||||||
|
cx.render(rsx! {
|
||||||
|
input {
|
||||||
|
"type": "text",
|
||||||
|
value: "{login_data.read().email}",
|
||||||
|
placeholder: "Email",
|
||||||
|
oninput: move |evt| login_data.with_mut(|i| i.email = evt.value.clone()),
|
||||||
|
onkeydown: move |evt| {
|
||||||
|
if evt.key() == Key::Enter {
|
||||||
|
info!("Input Email {}", login_data.read().email);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
"type": "text",
|
||||||
|
value: "{login_data.read().ine}",
|
||||||
|
placeholder: "Numéro INE",
|
||||||
|
oninput: move |evt| login_data.with_mut(|i| i.ine = evt.value.clone()),
|
||||||
|
onkeydown: move |evt| {
|
||||||
|
if evt.key() == Key::Enter {
|
||||||
|
info!("Input INE {}", login_data.read().ine);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
onclick: check_email,
|
||||||
|
"Click to upload"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn other(cx: Scope) -> Element {
|
||||||
|
cx.render( rsx!(
|
||||||
|
div { h1 { "Other" } }
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn page_not_found(cx: Scope) -> Element {
|
||||||
|
cx.render( rsx!(
|
||||||
|
div { h1 { "Page not found" } }
|
||||||
|
))
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user