From 5386913b684c1f5944f9d3dbe8f5ea4e0863b1c7 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Fri, 4 Apr 2025 13:09:16 +0200 Subject: [PATCH 01/13] remove protected-js dependency --- src/cone/tokens/browser/__init__.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cone/tokens/browser/__init__.py b/src/cone/tokens/browser/__init__.py index 31b1387..b73a375 100644 --- a/src/cone/tokens/browser/__init__.py +++ b/src/cone/tokens/browser/__init__.py @@ -10,7 +10,7 @@ ) cone_tokens_resources.add(wr.ScriptResource( name='cone-tokens-js', - depends='cone-app-protected-js', + depends='cone-app-js', resource='cone.tokens.js', compressed='cone.tokens.min.js' )) From 42cd32c36f4e916d62b0420e5d89b757c8b0987a Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Thu, 5 Jun 2025 14:15:48 +0200 Subject: [PATCH 02/13] bs5 styles --- js/src/tokens.js | 19 +- package.json | 8 +- scss/styles.scss | 77 ++------ .../tokens/browser/static/cone.tokens.css | 68 +------ src/cone/tokens/browser/static/cone.tokens.js | 19 +- .../tokens/browser/static/cone.tokens.min.css | 2 +- .../tokens/browser/static/cone.tokens.min.js | 2 +- src/cone/tokens/browser/templates/token.pt | 174 +++++++++--------- src/cone/tokens/browser/templates/tokens.pt | 4 +- .../browser/templates/tokens_overview.pt | 64 +++---- src/cone/tokens/browser/token.py | 5 +- src/cone/tokens/browser/tokens.py | 3 +- 12 files changed, 172 insertions(+), 273 deletions(-) diff --git a/js/src/tokens.js b/js/src/tokens.js index dad48a0..fad900c 100644 --- a/js/src/tokens.js +++ b/js/src/tokens.js @@ -13,11 +13,12 @@ export class TokensOverview { this.container = container; this.tokens_elem = $('#tokens-overview', container); this.tokens = $('object.token_qr', this.tokens_elem); - this.tokens_title = $('#tokens-overview-title', container); + this.filter_options = $('#tokens-filter-options', container); + this.create_options = $('#tokens-create-options', container); this.token_settings = this.container.data('token-settings'); // add tokens - this.add_tokens_container = $('.add-tokens', this.tokens_title); + this.add_tokens_container = $('.add-tokens', this.create_options); this.add_tokens_input = $( 'input[name="amount"]', this.add_tokens_container @@ -30,18 +31,18 @@ export class TokensOverview { this.add_tokens_btn.on('click', this.add_tokens); // date filter - this.start = $('input[name="start"]', this.tokens_title) + this.start = $('input[name="start"]', this.filter_options) .addClass('datepicker') .data('date-locale', 'de'); - this.end = $('input[name="end"]', this.tokens_title) + this.end = $('input[name="end"]', this.filter_options) .addClass('datepicker') .data('date-locale', 'de'); - this.filter = $('button[name="filter"]', this.tokens_title); + this.filter = $('button[name="filter"]', this.filter_options); this.filter_tokens = this.filter_tokens.bind(this); this.filter.on('click', this.filter_tokens); // delete tokens - this.delete_tokens_container = $('.delete-tokens', this.tokens_title); + this.delete_tokens_container = $('.delete-tokens', this.create_options); this.delete_tokens_btn = $( 'button[name="delete-tokens"]', this.delete_tokens_container @@ -50,7 +51,7 @@ export class TokensOverview { this.delete_tokens_btn.on('click', this.delete_tokens); this.set_token_size = this.set_token_size.bind(this); - this.size_input = $('input[name="token-size"]', this.tokens_title); + this.size_input = $('input[name="token-size"]', this.filter_options); this.size_input.on('change', this.set_token_size); if (this.tokens.length) { this.original_size = parseInt($(this.tokens[0]).attr('width')); @@ -222,13 +223,13 @@ export class TokenScanner { let input = this._input = $(''); wrapper.append(input); this.elem.append(wrapper); - button.removeClass('inactive').addClass('active'); + button.removeClass('inactive btn-danger').addClass('active btn-success'); input[0].focus(); } else { this._input_wrapper.remove(); this._input_wrapper = null; this._input = null; - button.removeClass('active').addClass('inactive'); + button.removeClass('active btn-success').addClass('inactive btn-danger'); } } diff --git a/package.json b/package.json index 7eddc60..c11dad2 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,12 @@ "devDependencies": { "@rollup/plugin-terser": "^0.4.4", "@web/dev-server-import-maps": "^0.2.1", - "@web/test-runner": "^0.18.2", + "@web/test-runner": "^0.18.3", "jquery": "github:jquery/jquery#2b6b5e0a3ba3029ec3ad1525a178920765e3adf1", - "qunit": "^2.20.1", - "rollup": "^2.79.1", + "qunit": "^2.24.1", + "rollup": "^2.79.2", "rollup-plugin-cleanup": "^3.2.1", - "sass": "^1.77.2", + "sass": "^1.89.1", "web-test-runner-qunit": "^1.0.0" } } diff --git a/scss/styles.scss b/scss/styles.scss index 9b3d854..3d75f88 100644 --- a/scss/styles.scss +++ b/scss/styles.scss @@ -1,69 +1,22 @@ @media screen { - div.token-overview { - display: flex; - flex-wrap: wrap; - - div.panel.token { - flex: 1; - min-width: fit-content; - border-right: 0; - box-shadow: 1px 0px 0px #e5e5e5; - - li.flex-group { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } - .token-active { - pointer-events: none; - } - } - - div.QR { - display: flex; - flex-direction: column; - align-items: center; - padding: 2px; - - .stream_image { - margin:auto; - } - } - } - .token-title { - border-radius: 4px 4px 0 0; - } - - // Tokens Overview + // // Tokens Overview .tokens-overview-container { - #tokens-overview { - display: grid; + .form-inline { + flex: 1 1 20%; + flex-wrap: nowrap; + white-space: nowrap; } - #tokens-overview-title { - display: flex; - align-items: baseline; - justify-content: space-between; - flex-wrap: wrap; - gap: 10px; - .token-size .token-button { - color: #000; - margin: 0 10px; - } + .btn { + white-space: nowrap; - button.datepicker-trigger { - transform: translateX(-100%); + &.filter { + min-width: 100px; } + } - input.add-tokens-amount { - width: 70px; - } - input.token-button { - width: 70px; - } - > div > * { - display: inline-block; - } + input { + min-width: 100px!important; } } @@ -74,12 +27,6 @@ height: 200px; font-size: 500%; } - .scan-token.inactive { - background-color: #dd0000; - } - .scan-token.active { - background-color: #00dd00; - } } } diff --git a/src/cone/tokens/browser/static/cone.tokens.css b/src/cone/tokens/browser/static/cone.tokens.css index 7107ab9..588bffa 100644 --- a/src/cone/tokens/browser/static/cone.tokens.css +++ b/src/cone/tokens/browser/static/cone.tokens.css @@ -1,71 +1,23 @@ @media screen { - div.token-overview { - display: flex; - flex-wrap: wrap; + .tokens-overview-container .form-inline { + flex: 1 1 20%; + flex-wrap: nowrap; + white-space: nowrap; } - div.token-overview div.panel.token { - flex: 1; - min-width: fit-content; - border-right: 0; - box-shadow: 1px 0px 0px #e5e5e5; + .tokens-overview-container .btn { + white-space: nowrap; } - div.token-overview div.panel.token li.flex-group { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + .tokens-overview-container .btn.filter { + min-width: 100px; } - div.token-overview div.panel.token .token-active { - pointer-events: none; - } - div.token-overview div.QR { - display: flex; - flex-direction: column; - align-items: center; - padding: 2px; - } - div.token-overview div.QR .stream_image { - margin: auto; - } - .token-title { - border-radius: 4px 4px 0 0; - } - .tokens-overview-container #tokens-overview { - display: grid; - } - .tokens-overview-container #tokens-overview-title { - display: flex; - align-items: baseline; - justify-content: space-between; - flex-wrap: wrap; - gap: 10px; - } - .tokens-overview-container #tokens-overview-title .token-size .token-button { - color: #000; - margin: 0 10px; - } - .tokens-overview-container #tokens-overview-title button.datepicker-trigger { - transform: translateX(-100%); - } - .tokens-overview-container #tokens-overview-title input.add-tokens-amount { - width: 70px; - } - .tokens-overview-container #tokens-overview-title input.token-button { - width: 70px; - } - .tokens-overview-container #tokens-overview-title > div > * { - display: inline-block; + .tokens-overview-container input { + min-width: 100px !important; } .tokens-container .scan-token { width: 100%; height: 200px; font-size: 500%; } - .tokens-container .scan-token.inactive { - background-color: #dd0000; - } - .tokens-container .scan-token.active { - background-color: #00dd00; - } } @media print { #tokens-overview-title { diff --git a/src/cone/tokens/browser/static/cone.tokens.js b/src/cone/tokens/browser/static/cone.tokens.js index 206363a..9beeec0 100644 --- a/src/cone/tokens/browser/static/cone.tokens.js +++ b/src/cone/tokens/browser/static/cone.tokens.js @@ -90,9 +90,10 @@ var cone_tokens = (function (exports, $, ts) { this.container = container; this.tokens_elem = $('#tokens-overview', container); this.tokens = $('object.token_qr', this.tokens_elem); - this.tokens_title = $('#tokens-overview-title', container); + this.filter_options = $('#tokens-filter-options', container); + this.create_options = $('#tokens-create-options', container); this.token_settings = this.container.data('token-settings'); - this.add_tokens_container = $('.add-tokens', this.tokens_title); + this.add_tokens_container = $('.add-tokens', this.create_options); this.add_tokens_input = $( 'input[name="amount"]', this.add_tokens_container @@ -103,16 +104,16 @@ var cone_tokens = (function (exports, $, ts) { ); this.add_tokens = this.add_tokens.bind(this); this.add_tokens_btn.on('click', this.add_tokens); - this.start = $('input[name="start"]', this.tokens_title) + this.start = $('input[name="start"]', this.filter_options) .addClass('datepicker') .data('date-locale', 'de'); - this.end = $('input[name="end"]', this.tokens_title) + this.end = $('input[name="end"]', this.filter_options) .addClass('datepicker') .data('date-locale', 'de'); - this.filter = $('button[name="filter"]', this.tokens_title); + this.filter = $('button[name="filter"]', this.filter_options); this.filter_tokens = this.filter_tokens.bind(this); this.filter.on('click', this.filter_tokens); - this.delete_tokens_container = $('.delete-tokens', this.tokens_title); + this.delete_tokens_container = $('.delete-tokens', this.create_options); this.delete_tokens_btn = $( 'button[name="delete-tokens"]', this.delete_tokens_container @@ -120,7 +121,7 @@ var cone_tokens = (function (exports, $, ts) { this.delete_tokens = this.delete_tokens.bind(this); this.delete_tokens_btn.on('click', this.delete_tokens); this.set_token_size = this.set_token_size.bind(this); - this.size_input = $('input[name="token-size"]', this.tokens_title); + this.size_input = $('input[name="token-size"]', this.filter_options); this.size_input.on('change', this.set_token_size); if (this.tokens.length) { this.original_size = parseInt($(this.tokens[0]).attr('width')); @@ -279,13 +280,13 @@ var cone_tokens = (function (exports, $, ts) { let input = this._input = $(''); wrapper.append(input); this.elem.append(wrapper); - button.removeClass('inactive').addClass('active'); + button.removeClass('inactive btn-danger').addClass('active btn-success'); input[0].focus(); } else { this._input_wrapper.remove(); this._input_wrapper = null; this._input = null; - button.removeClass('active').addClass('inactive'); + button.removeClass('active btn-success').addClass('inactive btn-danger'); } } scan_token() { diff --git a/src/cone/tokens/browser/static/cone.tokens.min.css b/src/cone/tokens/browser/static/cone.tokens.min.css index 1341ab1..07ae73d 100644 --- a/src/cone/tokens/browser/static/cone.tokens.min.css +++ b/src/cone/tokens/browser/static/cone.tokens.min.css @@ -1 +1 @@ -@media screen{div.token-overview{display:flex;flex-wrap:wrap}div.token-overview div.panel.token{flex:1;min-width:fit-content;border-right:0;box-shadow:1px 0px 0px #e5e5e5}div.token-overview div.panel.token li.flex-group{display:flex;justify-content:space-between;flex-wrap:wrap}div.token-overview div.panel.token .token-active{pointer-events:none}div.token-overview div.QR{display:flex;flex-direction:column;align-items:center;padding:2px}div.token-overview div.QR .stream_image{margin:auto}.token-title{border-radius:4px 4px 0 0}.tokens-overview-container #tokens-overview{display:grid}.tokens-overview-container #tokens-overview-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px}.tokens-overview-container #tokens-overview-title .token-size .token-button{color:#000;margin:0 10px}.tokens-overview-container #tokens-overview-title button.datepicker-trigger{transform:translateX(-100%)}.tokens-overview-container #tokens-overview-title input.add-tokens-amount{width:70px}.tokens-overview-container #tokens-overview-title input.token-button{width:70px}.tokens-overview-container #tokens-overview-title>div>*{display:inline-block}.tokens-container .scan-token{width:100%;height:200px;font-size:500%}.tokens-container .scan-token.inactive{background-color:#d00}.tokens-container .scan-token.active{background-color:#0d0}}@media print{#tokens-overview-title{display:none}} +@media screen{.tokens-overview-container .form-inline{flex:1 1 20%;flex-wrap:nowrap;white-space:nowrap}.tokens-overview-container .btn{white-space:nowrap}.tokens-overview-container .btn.filter{min-width:100px}.tokens-overview-container input{min-width:100px !important}.tokens-container .scan-token{width:100%;height:200px;font-size:500%}}@media print{#tokens-overview-title{display:none}} diff --git a/src/cone/tokens/browser/static/cone.tokens.min.js b/src/cone/tokens/browser/static/cone.tokens.min.js index 60c9252..aea7094 100644 --- a/src/cone/tokens/browser/static/cone.tokens.min.js +++ b/src/cone/tokens/browser/static/cone.tokens.min.js @@ -1 +1 @@ -var cone_tokens=function(t,e,s){"use strict";class n{static initialize(t){e(".token",t).each((function(){new n(e(this))}))}constructor(t){this.elem=t,this.settings=t.data("token-settings");const s=this;e(".btn-group.timeranges button",t).each((function(){const t=e(this);t.on("click",(function(e){s.set_timerange(t.data("timerange-scope"))}))})),e(".btn-group.usage-count button",t).each((function(){const t=e(this);t.on("click",(function(e){s.set_usage_count(t.data("usage-count"))}))}))}request_api(t){const e=this.settings;s.http_request({url:`${e.base_url}/update_token`,params:t,type:"json",method:"POST",success:(t,n,i)=>{t.success?s.ajax.action({name:"content",selector:"#content",mode:"inner",url:`${e.base_url}`,params:{}}):s.show_error(t.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}set_timerange(t){const e=this.settings.timeranges;let s,n,i;if(Object.keys(e).includes(t)){s=e[t];let o=s.start.split(":");n=new Date,n.setHours(o[0],o[1],0);let a=s.end.split(":");i=new Date,i.setHours(a[0],a[1],0)}function o(t){return t&&(t=new Date(t.getTime()-6e4*t.getTimezoneOffset())),t?t.toISOString():""}this.request_api({valid_from:o(n),valid_to:o(i)})}set_usage_count(t){this.request_api({usage_count:t})}}class i{static initialize(t){e(".tokens-overview-container",t).each((function(){new i(e(this))}))}constructor(t){this.container=t,this.tokens_elem=e("#tokens-overview",t),this.tokens=e("object.token_qr",this.tokens_elem),this.tokens_title=e("#tokens-overview-title",t),this.token_settings=this.container.data("token-settings"),this.add_tokens_container=e(".add-tokens",this.tokens_title),this.add_tokens_input=e('input[name="amount"]',this.add_tokens_container),this.add_tokens_btn=e('button[name="add-tokens"]',this.add_tokens_container),this.add_tokens=this.add_tokens.bind(this),this.add_tokens_btn.on("click",this.add_tokens),this.start=e('input[name="start"]',this.tokens_title).addClass("datepicker").data("date-locale","de"),this.end=e('input[name="end"]',this.tokens_title).addClass("datepicker").data("date-locale","de"),this.filter=e('button[name="filter"]',this.tokens_title),this.filter_tokens=this.filter_tokens.bind(this),this.filter.on("click",this.filter_tokens),this.delete_tokens_container=e(".delete-tokens",this.tokens_title),this.delete_tokens_btn=e('button[name="delete-tokens"]',this.delete_tokens_container),this.delete_tokens=this.delete_tokens.bind(this),this.delete_tokens_btn.on("click",this.delete_tokens),this.set_token_size=this.set_token_size.bind(this),this.size_input=e('input[name="token-size"]',this.tokens_title),this.size_input.on("change",this.set_token_size),this.tokens.length?this.original_size=parseInt(e(this.tokens[0]).attr("width")):this.original_size=256,this.token_size=100}get token_size(){return this._token_size}set token_size(t){t||(t=100);let s=this.original_size*(t/100);this.tokens_elem.css("grid-template-columns",`repeat( auto-fit, minmax(${s}px, 1fr) )`),this.tokens.each((function(){let t=e(this);t.attr("width",`${s}px`),t.attr("height",`${s}px`)})),this.size_input.val()||this.size_input.val(t),this._token_size=t}filter_tokens(t){t.preventDefault();let e={start:this.start.val(),end:this.end.val()};s.ajax.action({name:"tokens_overview",mode:"inner",selector:"#content",url:this.token_settings.base_url,params:e})}add_tokens(t){const e=this.token_settings.base_url;let n=this.add_tokens_input.val();n&&(n=parseInt(n),function t(n,i){s.http_request({url:`${e}/add_token`,params:{},type:"json",method:"POST",success:(o,a,r)=>{o.success?n===(i+=1)?s.ajax.action({name:"tokens_overview",selector:"#content",mode:"inner",url:e,params:{}}):t(n,i):s.show_error(o.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}(n,0))}delete_tokens(t){const n=this.token_settings.base_url;s.show_dialog({title:"Delete tokens?",message:"Do you really want to delete selected tokens?",on_confirm:()=>{let t=[];for(let s of this.tokens){let n=e(s).data("token-uid");t.push(n)}s.http_request({url:`${n}/delete_tokens`,params:{token_uids:JSON.stringify(t)},type:"json",method:"POST",success:(t,e,i)=>{t.success?(s.ajax.action({name:"tokens_overview",selector:"#content",mode:"inner",url:n,params:{}}),s.show_message({message:t.message,flavor:""})):s.show_error(t.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}})}set_token_size(t){t.preventDefault();let e=this.size_input.val();this.token_size=e}}class o{static initialize(t){e(".tokens-container",t).each((function(){new o(e(this))}))}constructor(t){this.elem=t,this.base_url=t.data("base-url"),this.button=e(".scan-token",t),this._input_wrapper=null,this._input=null,this.scan_token=this.scan_token.bind(this),this.button.on("click",(t=>{this.scan_token()}))}get active(){return null!==this._input}set active(t){if(t==this.value)return;let s=this.button;if(t){let t=this._input_wrapper=e("
").css("width",0).css("overflow","hidden"),n=this._input=e('');t.append(n),this.elem.append(t),s.removeClass("inactive").addClass("active"),n[0].focus()}else this._input_wrapper.remove(),this._input_wrapper=null,this._input=null,s.removeClass("active").addClass("inactive")}scan_token(){this.active=!0;let t=this._input;t.one("change",(()=>{this.query_token(t.val())}))}load_token(t){console.log("load token: "+t),s.ajax.action({name:"layout",selector:"#layout",mode:"replace",url:`${this.base_url}/${t}`,params:{}})}query_token(t){s.http_request({url:`${this.base_url}/query_token`,params:{value:t},type:"json",success:(e,n,i)=>{e.success?e.token?this.load_token(e.token.uid):(this.active=!1,s.show_dialog({title:"Token not exists?",message:"Do you want to create it?",on_confirm:()=>{s.http_request({url:`${this.base_url}/add_token`,params:{value:t},type:"json",method:"POST",success:(t,e,n)=>{t.success?this.load_token(t.token_uid):s.show_error(t.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}})):s.show_error(e.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}}return e((function(){s.ajax.register(n.initialize,!0),s.ajax.register(o.initialize,!0),s.ajax.register(i.initialize,!0)})),t.TokenScanner=o,t.TokensOverview=i,Object.defineProperty(t,"__esModule",{value:!0}),t}({},jQuery,ts); +var cone_tokens=function(t,e,s){"use strict";class n{static initialize(t){e(".token",t).each((function(){new n(e(this))}))}constructor(t){this.elem=t,this.settings=t.data("token-settings");const s=this;e(".btn-group.timeranges button",t).each((function(){const t=e(this);t.on("click",(function(e){s.set_timerange(t.data("timerange-scope"))}))})),e(".btn-group.usage-count button",t).each((function(){const t=e(this);t.on("click",(function(e){s.set_usage_count(t.data("usage-count"))}))}))}request_api(t){const e=this.settings;s.http_request({url:`${e.base_url}/update_token`,params:t,type:"json",method:"POST",success:(t,n,i)=>{t.success?s.ajax.action({name:"content",selector:"#content",mode:"inner",url:`${e.base_url}`,params:{}}):s.show_error(t.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}set_timerange(t){const e=this.settings.timeranges;let s,n,i;if(Object.keys(e).includes(t)){s=e[t];let o=s.start.split(":");n=new Date,n.setHours(o[0],o[1],0);let a=s.end.split(":");i=new Date,i.setHours(a[0],a[1],0)}function o(t){return t&&(t=new Date(t.getTime()-6e4*t.getTimezoneOffset())),t?t.toISOString():""}this.request_api({valid_from:o(n),valid_to:o(i)})}set_usage_count(t){this.request_api({usage_count:t})}}class i{static initialize(t){e(".tokens-overview-container",t).each((function(){new i(e(this))}))}constructor(t){this.container=t,this.tokens_elem=e("#tokens-overview",t),this.tokens=e("object.token_qr",this.tokens_elem),this.filter_options=e("#tokens-filter-options",t),this.create_options=e("#tokens-create-options",t),this.token_settings=this.container.data("token-settings"),this.add_tokens_container=e(".add-tokens",this.create_options),this.add_tokens_input=e('input[name="amount"]',this.add_tokens_container),this.add_tokens_btn=e('button[name="add-tokens"]',this.add_tokens_container),this.add_tokens=this.add_tokens.bind(this),this.add_tokens_btn.on("click",this.add_tokens),this.start=e('input[name="start"]',this.filter_options).addClass("datepicker").data("date-locale","de"),this.end=e('input[name="end"]',this.filter_options).addClass("datepicker").data("date-locale","de"),this.filter=e('button[name="filter"]',this.filter_options),this.filter_tokens=this.filter_tokens.bind(this),this.filter.on("click",this.filter_tokens),this.delete_tokens_container=e(".delete-tokens",this.create_options),this.delete_tokens_btn=e('button[name="delete-tokens"]',this.delete_tokens_container),this.delete_tokens=this.delete_tokens.bind(this),this.delete_tokens_btn.on("click",this.delete_tokens),this.set_token_size=this.set_token_size.bind(this),this.size_input=e('input[name="token-size"]',this.filter_options),this.size_input.on("change",this.set_token_size),this.tokens.length?this.original_size=parseInt(e(this.tokens[0]).attr("width")):this.original_size=256,this.token_size=100}get token_size(){return this._token_size}set token_size(t){t||(t=100);let s=this.original_size*(t/100);this.tokens_elem.css("grid-template-columns",`repeat( auto-fit, minmax(${s}px, 1fr) )`),this.tokens.each((function(){let t=e(this);t.attr("width",`${s}px`),t.attr("height",`${s}px`)})),this.size_input.val()||this.size_input.val(t),this._token_size=t}filter_tokens(t){t.preventDefault();let e={start:this.start.val(),end:this.end.val()};s.ajax.action({name:"tokens_overview",mode:"inner",selector:"#content",url:this.token_settings.base_url,params:e})}add_tokens(t){const e=this.token_settings.base_url;let n=this.add_tokens_input.val();n&&(n=parseInt(n),function t(n,i){s.http_request({url:`${e}/add_token`,params:{},type:"json",method:"POST",success:(o,a,r)=>{o.success?n===(i+=1)?s.ajax.action({name:"tokens_overview",selector:"#content",mode:"inner",url:e,params:{}}):t(n,i):s.show_error(o.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}(n,0))}delete_tokens(t){const n=this.token_settings.base_url;s.show_dialog({title:"Delete tokens?",message:"Do you really want to delete selected tokens?",on_confirm:()=>{let t=[];for(let s of this.tokens){let n=e(s).data("token-uid");t.push(n)}s.http_request({url:`${n}/delete_tokens`,params:{token_uids:JSON.stringify(t)},type:"json",method:"POST",success:(t,e,i)=>{t.success?(s.ajax.action({name:"tokens_overview",selector:"#content",mode:"inner",url:n,params:{}}),s.show_message({message:t.message,flavor:""})):s.show_error(t.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}})}set_token_size(t){t.preventDefault();let e=this.size_input.val();this.token_size=e}}class o{static initialize(t){e(".tokens-container",t).each((function(){new o(e(this))}))}constructor(t){this.elem=t,this.base_url=t.data("base-url"),this.button=e(".scan-token",t),this._input_wrapper=null,this._input=null,this.scan_token=this.scan_token.bind(this),this.button.on("click",(t=>{this.scan_token()}))}get active(){return null!==this._input}set active(t){if(t==this.value)return;let s=this.button;if(t){let t=this._input_wrapper=e("
").css("width",0).css("overflow","hidden"),n=this._input=e('');t.append(n),this.elem.append(t),s.removeClass("inactive btn-danger").addClass("active btn-success"),n[0].focus()}else this._input_wrapper.remove(),this._input_wrapper=null,this._input=null,s.removeClass("active btn-success").addClass("inactive btn-danger")}scan_token(){this.active=!0;let t=this._input;t.one("change",(()=>{this.query_token(t.val())}))}load_token(t){console.log("load token: "+t),s.ajax.action({name:"layout",selector:"#layout",mode:"replace",url:`${this.base_url}/${t}`,params:{}})}query_token(t){s.http_request({url:`${this.base_url}/query_token`,params:{value:t},type:"json",success:(e,n,i)=>{e.success?e.token?this.load_token(e.token.uid):(this.active=!1,s.show_dialog({title:"Token not exists?",message:"Do you want to create it?",on_confirm:()=>{s.http_request({url:`${this.base_url}/add_token`,params:{value:t},type:"json",method:"POST",success:(t,e,n)=>{t.success?this.load_token(t.token_uid):s.show_error(t.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}})):s.show_error(e.message)},error:(t,e,n)=>{s.show_error(`Failed to request JSON API: ${n}`)}})}}return e((function(){s.ajax.register(n.initialize,!0),s.ajax.register(o.initialize,!0),s.ajax.register(i.initialize,!0)})),t.TokenScanner=o,t.TokensOverview=i,Object.defineProperty(t,"__esModule",{value:!0}),t}({},jQuery,ts); diff --git a/src/cone/tokens/browser/templates/token.pt b/src/cone/tokens/browser/templates/token.pt index 74b6f9b..05608d2 100644 --- a/src/cone/tokens/browser/templates/token.pt +++ b/src/cone/tokens/browser/templates/token.pt @@ -7,107 +7,101 @@ -
- Token -
- -
-
- -
    +
    -
  • - -
  • -
  • - Value: - Value -
  • +
    +
    Token
    +
    +
      +
      + + Active +
      +
    • + Value: + Value +
    • -
    • -
      +
    • +
      Valid: - - - - - - - - Unlimited - -
      -
      - - - - -
      -
    • + + + - + + + + Unlimited + +
    +
    + + + + +
    + -
  • -
    - Usage Count: - - Usage Count - - - Unlimited - -
    -
    - - - - - - - -
    -
  • +
  • +
    + Usage Count: + + Usage Count + + + Unlimited + +
    +
    + + + + + + + +
    +
  • -
  • - Lock Time: - -
  • +
  • + Lock Time: + +
  • -
  • - Creator: - -
  • +
  • + Creator: + +
  • -
  • - Created: - -
  • +
  • + Created: + +
  • -
  • - Modified: - -
  • -
-
+
  • + Modified: + +
  • + -
    +