fix spell.js

css/style.css

@@ -0,0 +1,26 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: stretch;
+  }
+  
+  .list-col, .view-col {
+    flex-basis: 100%;
+  }
+  
+  @media screen and (min-width: 768px) {
+    .list-col, .view-col {
+      flex-basis: calc(50% - 10px); /* Réduire de 10px pour ajouter une marge entre les deux div */
+    }
+  }
+  
+  .w2ui-grid-data {
+  color:black;
+  word-wrap: break-word;
+  } 
+
+  .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data>div{
+    overflow: visible;
+    white-space:break-spaces;
+  }

css/water.css

@@ -113,9 +113,9 @@
   body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
     line-height: 1.4;
-    max-width: 800px;
+    /*max-width: 800px;*/
     margin: 20px auto;
-    padding: 0 10px;
+    padding: 0 5%;
     word-wrap: break-word;
     color: #363636;
     color: var(--text-main);

data/spells/spells-grimoire-en.json

@@ -1,7 +1,7 @@
 {
   "spell": [
     {
-      "id": 0,
+      "recid": 0,
       "name": "Acid Arrow",
       "source": "GRI",
       "page": 110,
@@ -40,7 +40,7 @@
       "areaTags": ["", ""]
     },
     {
-      "id": 1,
+      "recid": 1,
       "name": "Acid Blob",
       "source": "GRI",
       "page": 110,

data/spells/spells-grimoire-fr.json

@@ -1,7 +1,7 @@
 {
   "spell": [
     {
-      "id": 0,
+      "recid": 0,
       "name": "Flèche Acide",
       "source": "GRI",
       "page": 188,
@@ -40,7 +40,7 @@
       "areaTags": ["", ""]
     },
     {
-      "id": 1,
+      "recid": 1,
       "name": "Bille Acide",
       "source": "GRI",
       "page": 134,

index.html

@@ -65,7 +65,7 @@
   <script type="text/javascript" src="lib/jquery.localize.js"></script>
   <script type="text/javascript" src="js/language.js"></script>
 
-  <script rel="preload src="https://kit.fontawesome.com/126cdd0e29.js" crossorigin="anonymous"></script>
+  <script rel="preload" src="https://kit.fontawesome.com/126cdd0e29.js" crossorigin="anonymous"></script>
 
 
 </body>

js/language.js

@@ -2,14 +2,11 @@
 $("[data-localize]").localize("main", { pathPrefix: "lang" });
 
 // You can also override the language detection and specify a language code. This code defines a function that sets the language to French.
-function changeLangFR() { $("[data-localize]").localize("main", { pathPrefix: "lang", language: "fr", }); }
+function changeLangFR() {
-
+  $("[data-localize]").localize("main", { pathPrefix: "lang", language: "fr" });
-
+}
 
 // This code defines a function that sets the language to English.
 function changeLangEN() {
-  $("[data-localize]").localize("main", {
+  $("[data-localize]").localize("main", { pathPrefix: "lang", language: "en" });
-    pathPrefix: "lang",
+}
-    language: "en",
-  });
-}

js/spells.js

@@ -5,14 +5,14 @@ var jsonsource = "".concat(
   $.defaultLanguage.slice(0, 2),
   ".json"
 );
-var test;
+var alldata;
 // Fetch data from server
 fetch(jsonsource)
   .then((response) => response.json())
   .then((data) => {
     // load fetched data into grid
-    test = data.spell;
+    alldata = data.spell;
-    console.log(test);
+    console.log(alldata);
 
     //document.getElementById("spell-list")
     $("#spell-list").w2grid({
@@ -28,19 +28,24 @@ fetch(jsonsource)
     liveSearch: true,
     multiSearch: true,
     fixedBody: false,
-      records: test,
+      records: alldata,
       columns: [
-        { field: "name", text: "Name", size: "30%",sortable: true, attr: 'align=center' },
+        { field: "name", text: "Name",sortable: true, },
-        { field: "id", text: "ID", size: "30%" },
+        { field: "desc", text: "Description",size:"500%",style:"test" },
-        { field: "email", text: "Email", size: "40%" },
+        { field: "source", text: "Source",sortable: true,  },
-        { field: "sdate", text: "Start Date", size: "120px" },
+        { field: "page", text: "Page",sortable: true,  },
+        { field: "level", text: "Level",sortable: true, },
+        { field: "school", text: "School",sortable: true, },
+        { field: "components", text: "Components", },
+        { field: "duration", text: "Duration", },
+
       ],
       async onSelect(event) {
         await event.complete
         console.log('select', event.detail, this.getSelection())
     },
     onClick(event) {
-        let record = this.get(event.detail.name)
+        let record = this.get(event.detail.recid)
         //grid2.clear()
         /*grid2.add([
             { recid: 0, name: 'ID:', value: record.recid },

spells.html

@@ -8,7 +8,8 @@
 
 	<link href="css/all.min.css" rel="stylesheet" />
 	<link href="css/water.css" rel="stylesheet" />
-	<link type="text/css" rel="stylesheet" href="lib/w2ui/w2ui.css" />
+	<link type="text/css" rel="stylesheet" href="lib/w2ui/w2ui.min.css" />
+	<link rel="stylesheet" href="css/style.css" type="text/css">
 
 	<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png">
 
@@ -30,36 +31,38 @@
 
 	<!--<div class="container" style="display: flex;flex-direction: row;flex-wrap: wrap;">-->
 
-	<div id="container" style="width: 100%; ">
+	<div class="container" ">
-		<div style="display: flex; flex-direction: row;flex-wrap: wrap;">
+			<div class=" list-col" id="spell-list" style="min-width: 300px;max-width:900px;">
-			<div id="spell-list" style="min-width: 300px;max-width:900px;height: 300px;""> 
+				<!-- FILL WITH JS-->
-			<!-- FILL WITH JS-->
-			</div>
-
-
-
-
-
-
-
-
-
-		<div class=" view-col" id="content" style="min-width: 400px;">
-				<table id="pagecontent" class="view" style="display: flex; border:solid">
-
-					<td class="initial-message">Select a spell from the list to view it here</td>
-
-				</table>
-			</div>
-
-		</div>
 	</div>
 
 
+
+
+
+
+
+
+
+
+
+	<div class="view-col" id="content">
+		<table id="pagecontent" class="view" style="border:solid">
+
+			<td class="initial-message">Select a spell from the list to view it here</td>
+
+		</table>
+	</div>
+
+	</div>
+
+
+
 	<script type="text/javascript" src="lib/jquery.min.js"></script>
 	<script type="text/javascript" src="lib/jquery.localize-dev.js"></script>
 	<script type="text/javascript" src="js/language.js"></script>
-	<script type="text/javascript" src="lib/w2ui/w2ui.js"></script>
+	<script type="text/javascript" src="lib/w2ui/w2ui.min.js"></script>
+	<script type="text/javascript" src="lib/w2ui/w2ui.es6.min.js"></script>
 
 
 

test-w2ui.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>W2UI Demo: grid/6</title>
+    <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
+</head>
+<body>
+
+<div id="grid" style="min-width: 300px;max-width:900px;height: 300px;"></div>
+<br>
+
+
+<script type="module">
+import { w2grid } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
+
+let grid = new w2grid({
+    name: 'grid',
+    box: '#grid',
+    show: { selectColumn: true },
+    multiSelect: true,
+    columns: [
+        { field: 'recid', text: 'ID', size: '50px' },
+        { field: 'lname', text: 'Last Name', size: '30%' },
+        { field: 'fname', text: 'First Name', size: '30%' },
+        { field: 'email', text: 'Email', size: '40%' },
+        { field: 'sdate', text: 'Start Date', size: '120px' }
+    ],
+    records: [
+        { recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
+        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
+        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
+        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
+        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
+        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
+        { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
+        { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
+    ],
+    async onSelect(event) {
+        await event.complete
+        console.log('select', event.detail, this.getSelection())
+    }
+})
+
+window.multi = function(el) {
+    grid.multiSelect = el.checked
+    grid.selectNone()
+    grid.refresh()
+}
+
+window.selColumn = function(flag) {
+    grid.show.selectColumn = flag
+    grid.refresh()
+}
+</script>
+
+</body>
+</html>