erius/mathematical-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit, moved from mathematical repo

Browse source
This commit is contained in:
Egor 2024-05-26 23:02:55 +03:00
commit 1e4c5e700c
9 changed files with 1436 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
/target
/dist

1247
Cargo.lock generated Normal file
View file

File diff suppressed because it is too large Load diff

13
Cargo.toml Normal file
View file

@ -0,0 +1,13 @@
[package]
name = "mathematical-web"
version = "0.1.0"
edition = "2021"
[dependencies]
mathematical = { git = "https://git.obamna.ru/erius/mathematical" }
num = "0.4.3"
log = "0.4.21"
wasm-bindgen = "0.2.92"
wasm-logger = "0.2.0"
web-sys = "0.3.69"
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

3
Trunk.toml Normal file
View file

@ -0,0 +1,3 @@
[serve]
address = "127.0.0.1"
port = 8080

BIN
assets/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

11
index.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mathematical</title>
<link data-trunk rel="rust" />
<link data-trunk rel="scss" href="index.scss" />
<link data-trunk rel="icon" href="assets/favicon.ico" />
</head>
<body></body>
</html>

29
index.scss Normal file
View file

@ -0,0 +1,29 @@
$bg-color: #2b2927;
$text-color: #e2e19c;
$cell-color: #473b34;
body {
background-color: $bg-color;
color: $text-color;
}
.matrix {
display: grid;
gap: 50px;
grid-template-columns: auto 100px;
grid-template-rows: auto 100px;
justify-content: start;
input {
background-color: $cell-color;
color: $text-color;
border: solid 1px black;
width: 30pt;
}
button {
background-color: $cell-color;
color: $text-color;
border: solid 1px black;
}
}

18
src/main.rs Normal file
View file

@ -0,0 +1,18 @@
mod matrix;
use yew::prelude::*;
use matrix::MatrixComponent;
#[function_component]
fn App() -> Html {
html! {
<>
<MatrixComponent />
</>
}
}
fn main() {
wasm_logger::init(wasm_logger::Config::default());
yew::Renderer::<App>::new().render();
}

113
src/matrix.rs Normal file
View file

@ -0,0 +1,113 @@
use mathematical::matrix::Matrix;
use num::BigRational;
use yew::prelude::*;
use web_sys::HtmlInputElement;
use wasm_bindgen::JsCast;
pub enum MatrixMsg {
CellChange(Cell),
AddRow,
AddColumn,
RemoveRow,
RemoveColumn
}
#[derive(PartialEq, Clone)]
pub struct Cell {
i: usize, j: usize, value: BigRational
}
pub struct MatrixComponent {
matrix: Matrix<BigRational>
}
impl Component for MatrixComponent {
type Message = MatrixMsg;
type Properties = ();
fn create(_ctx: &Context<Self>) -> Self {
Self { matrix: Matrix::new_zeroes(3, 3) }
}
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
MatrixMsg::CellChange(cell) => self.matrix[cell.i][cell.j] = cell.value,
MatrixMsg::AddRow => self.matrix.append_row_zeroes(),
MatrixMsg::AddColumn => self.matrix.append_column_zeroes(),
MatrixMsg::RemoveRow => {
if self.matrix.height() > 2 {
self.matrix.remove_last_row();
}
},
MatrixMsg::RemoveColumn => {
if self.matrix.width() > 2 {
self.matrix.remove_last_column();
}
}
}
return true;
}
fn view(&self, ctx: &Context<Self>) -> Html {
let on_size_change = ctx.link().callback(|msg| msg);
html! {
<div class={classes!("matrix")}>
<table> {
self.matrix.iter_rows().enumerate().map(|(i, row)| html! {
<tr> {
row.iter().enumerate().map(|(j, _)| {
let oninput = ctx.link().batch_callback(move |e: InputEvent| {
let input = e.target().unwrap().unchecked_into::<HtmlInputElement>();
let Ok(value) = input.value().trim().parse::<BigRational>()
else { return None };
Some(MatrixMsg::CellChange(Cell{i, j, value}))
});
log::info!("{:?}", self.matrix);
html! {
<td>
<input type="text" {oninput}/>
</td>
}
}).collect::<Html>()
}
</tr>
}).collect::<Html>()
}
</table>
<MatrixSizeControls {on_size_change} />
</div>
}
}
}
#[derive(PartialEq, Properties)]
pub struct MatrixSizeControlsProps {
on_size_change: Callback<MatrixMsg>
}
#[function_component]
pub fn MatrixSizeControls(props: &MatrixSizeControlsProps) -> Html {
let on_click_add_row = props.on_size_change.reform(|_| MatrixMsg::AddRow);
let on_click_add_column = props.on_size_change.reform(|_| MatrixMsg::AddColumn);
let on_click_remove_row = props.on_size_change.reform(|_|MatrixMsg::RemoveRow);
let on_click_remove_column = props.on_size_change.reform(|_| MatrixMsg::RemoveColumn);
html! {
<div class={classes!("matrix-size-controls")}>
<div>
<button onclick={on_click_add_row}>{"Add row"}</button>
<button onclick={on_click_remove_row}>{"Remove row"}</button>
</div>
<div>
<button onclick={on_click_add_column}>{"Add column"}</button>
<button onclick={on_click_remove_column}>{"Remove column"}</button>
</div>
</div>
}
}
#[derive(PartialEq, Properties)]
pub struct MatrixCellProps {
contents: String,
cell: Cell,
on_cell_change: Callback<Cell>
}