[REFINE] awesome_owl: 1. Displaying a counter

yewentai · yewentai · commit a25d65c83b97 · 2025-11-27T10:06:28.000+01:00
update module structure and enhance Playground component
diff --git a/awesome_owl/__manifest__.py b/awesome_owl/__manifest__.py
@@ -1,41 +1,36 @@
-# -*- coding: utf-8 -*-
 {
-    'name': "Awesome Owl",
-
-    'summary': """
+    "name": "Awesome Owl",
+    "summary": """
         Starting module for "Discover the JS framework, chapter 1: Owl components"
     """,
-
-    'description': """
+    "description": """
         Starting module for "Discover the JS framework, chapter 1: Owl components"
     """,
-
-    'author': "Odoo",
-    'website': "https://www.odoo.com",
-
+    "author": "Odoo",
+    "website": "https://www.odoo.com",
     # Categories can be used to filter modules in modules listing
     # Check https://github.com/odoo/odoo/blob/15.0/odoo/addons/base/data/ir_module_category_data.xml
     # for the full list
-    'category': 'Tutorials',
-    'version': '0.1',
-
+    "category": "Tutorials",
+    "version": "0.1",
     # any module necessary for this one to work correctly
-    'depends': ['base', 'web'],
-    'application': True,
-    'installable': True,
-    'data': [
-        'views/templates.xml',
+    "depends": ["base", "web"],
+    "application": True,
+    "installable": True,
+    "data": [
+        "views/templates.xml",
     ],
-    'assets': {
-        'awesome_owl.assets_playground': [
-            ('include', 'web._assets_helpers'),
-            'web/static/src/scss/pre_variables.scss',
-            'web/static/lib/bootstrap/scss/_variables.scss',
-            ('include', 'web._assets_bootstrap'),
-            ('include', 'web._assets_core'),
-            'web/static/src/libs/fontawesome/css/font-awesome.css',
-            'awesome_owl/static/src/**/*',
+    "assets": {
+        "awesome_owl.assets_playground": [
+            ("include", "web._assets_helpers"),
+            "web/static/src/scss/pre_variables.scss",
+            "web/static/lib/bootstrap/scss/_variables.scss",
+            "web/static/lib/bootstrap/scss/_maps.scss",
+            ("include", "web._assets_bootstrap"),
+            ("include", "web._assets_core"),
+            "web/static/src/libs/fontawesome/css/font-awesome.css",
+            "awesome_owl/static/src/**/*",
         ],
     },
-    'license': 'AGPL-3'
+    "license": "AGPL-3",
 }
diff --git a/awesome_owl/static/src/main.js b/awesome_owl/static/src/main.js
@@ -8,5 +8,10 @@ const config = {
 };
 
 // Mount the Playground component when the document.body is ready
-whenReady(() => mountComponent(Playground, document.body, config));
+whenReady(() => {
+    const target = document.getElementById('app');
+    if (target) {
+        mountComponent(Playground, target, config);
+    }
+});
 
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
@@ -1,5 +1,13 @@
-import { Component } from "@odoo/owl";
+import { useState, Component } from "@odoo/owl";
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
+    static template = "my_module.Counter";
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+    
+    increment() {
+        this.state.value++;
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="awesome_owl.playground">
+    <t t-name="my_module.Counter">
         <div class="p-3">
-            hello world
+            <p>Counter: <t t-esc="state.value"/></p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
         </div>
     </t>
 
diff --git a/awesome_owl/views/templates.xml b/awesome_owl/views/templates.xml
@@ -8,6 +8,7 @@
                 </head>
 
                 <body>
+                    <div id="app"></div>
                 </body>
             </html>
           </template>
