mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
add demo application (benchmark)
This commit is contained in:
Géry Debongnie
@@ -0,0 +1,37 @@
|
||||
.main {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
}
|
||||
|
||||
.left-thing {
|
||||
background-color: gray;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.left-thing button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right-thing {
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Message widget */
|
||||
.message .author {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 400px;
|
||||
background-color: lightblue;
|
||||
margin: 10px 5px;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Message } from "./message.js";
|
||||
import { messages } from "./data.js";
|
||||
|
||||
const template = `
|
||||
<div class="main">
|
||||
<div class="left-thing">
|
||||
<button t-on-click="setMessageCount(10)">10 messages</button>
|
||||
<button t-on-click="setMessageCount(200)">200 messages</button>
|
||||
<button t-on-click="setMessageCount(500)">500 messages</button>
|
||||
<button t-on-click="setMessageCount(5000)">5000 messages</button>
|
||||
</div>
|
||||
<div class="right-thing">
|
||||
<div class="content">
|
||||
<t t-foreach="state.messages" t-as="message">
|
||||
<t t-widget="Message" t-props="message" t-on-remove_message="removeMessage"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export class App extends odoo.core.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.inlineTemplate = template;
|
||||
this.widgets = { Message };
|
||||
this.state = {
|
||||
messages: messages.slice(0, 10)
|
||||
};
|
||||
}
|
||||
|
||||
setMessageCount(n) {
|
||||
this.setState({
|
||||
messages: messages.slice(0, n)
|
||||
});
|
||||
}
|
||||
|
||||
removeMessage(data) {
|
||||
const index = this.state.messages.findIndex(m => m.id === data.id);
|
||||
this.state.messages.splice(index, 1);
|
||||
this.setState({ messages: this.state.messages });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
const template = `
|
||||
<div>
|
||||
<button t-on-click="increment(-1)">-</button>
|
||||
<span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
|
||||
<button t-on-click="increment(1)">+</button>
|
||||
</div>`;
|
||||
|
||||
export class Counter extends odoo.core.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.inlineTemplate = template;
|
||||
this.state = {
|
||||
counter: props.initialState || 0
|
||||
};
|
||||
}
|
||||
|
||||
increment(delta) {
|
||||
this.setState({ counter: this.state.counter + delta });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
export const messages = [];
|
||||
|
||||
const authors = ["Aaron", "David", "Vincent"];
|
||||
const content = [
|
||||
"Lorem ipsum dolor sit amet",
|
||||
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
|
||||
"Excepteur sint occaecat cupidatat non proident"
|
||||
];
|
||||
|
||||
function chooseRandomly(array) {
|
||||
const index = Math.floor(Math.random() * array.length);
|
||||
return array[index];
|
||||
}
|
||||
|
||||
for (let i = 1; i < 6000; i++) {
|
||||
messages.push({
|
||||
id: i,
|
||||
author: chooseRandomly(authors),
|
||||
msg: `${i}: ${chooseRandomly(content)}`,
|
||||
likes: 0
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Demo App</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<script src="/core.js"></script>
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
<script type="module" src="/main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { App } from "./app.js";
|
||||
import { Counter } from "./counter.js";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const env = {
|
||||
qweb: new odoo.core.QWeb()
|
||||
};
|
||||
const app = new App(env, { initialState: 13 });
|
||||
app.mount(document.body);
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
const template = `
|
||||
<div class="message">
|
||||
<span class="author"><t t-esc="props.author"/></span>
|
||||
<span class="msg"><t t-esc="props.msg"/></span>
|
||||
<button class="remove" t-on-click="removeMessage">Remove</button>
|
||||
</div>`;
|
||||
|
||||
export class Message extends odoo.core.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.inlineTemplate = template;
|
||||
}
|
||||
|
||||
removeMessage() {
|
||||
this.trigger("remove_message", {
|
||||
id: this.props.id
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
# Demo
|
||||
|
||||
This example is just a playground to experiment/showcase some features of
|
||||
the framework.
|
||||
+6
-1
@@ -16,7 +16,12 @@
|
||||
"example:web:minify": "uglifyjs dist/examples/web/main.js -o dist/examples/web/main.js --compress --mangle",
|
||||
"example:web:serve": "live-server --entry-file=index.html dist/examples/web/",
|
||||
"preexample:web:dev": "npm run example:web:build",
|
||||
"example:web:dev": "npm-run-all --parallel \"example:web:build:* -- --watch\" example:web:serve"
|
||||
"example:web:dev": "npm-run-all --parallel \"example:web:build:* -- --watch\" example:web:serve",
|
||||
"example:demo:build:core": "npm run build && cpx \"dist/core.js\" dist/examples/demo",
|
||||
"example:demo:build:js": "cpx \"examples/demo/{*.html,*.js,*.css}\" dist/examples/demo",
|
||||
"example:demo:build": "npm-run-all --parallel example:demo:build:*",
|
||||
"example:demo:serve": "live-server --entry-file=index.html dist/examples/demo/",
|
||||
"example:demo:dev": "npm-run-all --parallel \"example:demo:build:* -- --watch\" example:demo:serve"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
Reference in New Issue
Block a user