mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 23:16:15 +08:00
Add zebra settings screen [SCI-7016] (#4310)
* Add zebra settings screen [SCI-7016] * Fix hound [SCI-7016]
This commit is contained in:
parent
f48c8ac6c7
commit
b58e3cd4d8
62
app/assets/javascripts/label_printers/zebra_settings.js
Normal file
62
app/assets/javascripts/label_printers/zebra_settings.js
Normal file
|
@ -0,0 +1,62 @@
|
|||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable no-undef */
|
||||
/* global I18n */
|
||||
|
||||
(function() {
|
||||
var DEVICES = [];
|
||||
|
||||
var getPrinterStatus = function(device) {
|
||||
return new Promise((resolve) => {
|
||||
new Zebra.Printer(device).getStatus(function(status) {
|
||||
device.status = status.getMessage() === 'Ready' ? 'Ready' : 'Offline';
|
||||
resolve(device);
|
||||
}, function() {
|
||||
device.status = 'Offline';
|
||||
resolve(device);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
function appendDeviceToHtml(device) {
|
||||
if (DEVICES.length === 0) {
|
||||
$('.zebra-printers').empty();
|
||||
}
|
||||
if (!DEVICES.includes(device.name)) {
|
||||
$('.zebra-printers').append(`<li>${device.name} <span class="zebra-status-tag ${device.status.toLowerCase()}">
|
||||
${device.status}</span></li>`);
|
||||
DEVICES.push(device.name);
|
||||
}
|
||||
}
|
||||
|
||||
function searchZebraPrinters() {
|
||||
BrowserPrint.getLocalDevices(function(deviceList) {
|
||||
if (deviceList.printer.length !== 0) {
|
||||
for (i = 0; i < deviceList.printer.length; i += 1) {
|
||||
getPrinterStatus(deviceList.printer[i]).then((device) => {
|
||||
appendDeviceToHtml(device);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
$('.zebra-printers').empty();
|
||||
$('.zebra-printers').append(`<li>${I18n.t('users.settings.account.label_printer.no_printers_available')}</li>`);
|
||||
}
|
||||
}, () => {
|
||||
$('.zebra-printers').empty();
|
||||
$('.zebra-printers').append(`<li>${I18n.t('users.settings.account.label_printer.no_printers_available')}</li>`);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function refreshZebraPrinterList() {
|
||||
DEVICES = [];
|
||||
$('.zebra-printers').empty();
|
||||
$('.zebra-printers').append(`<li>${I18n.t('users.settings.account.label_printer.looking_for_printers')}</li>`);
|
||||
searchZebraPrinters();
|
||||
}
|
||||
|
||||
$('.zebra-printer-refresh').on('click', function() {
|
||||
refreshZebraPrinterList();
|
||||
});
|
||||
|
||||
refreshZebraPrinterList();
|
||||
}());
|
|
@ -18,6 +18,8 @@
|
|||
}
|
||||
|
||||
.printers-container {
|
||||
margin-bottom: 1em;
|
||||
|
||||
.printer {
|
||||
border: $border-default;
|
||||
padding: 1em;
|
||||
|
|
|
@ -28,6 +28,50 @@
|
|||
li {
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
.indented_row {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.zebra-settings-collapse {
|
||||
border-left: 3px solid $color-concrete;
|
||||
margin-top: 14px;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
|
||||
.collapse {
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
.collapse-row {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zebra-status-tag {
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
|
||||
&.ready {
|
||||
background-color: $brand-success;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
|
|
|
@ -6,6 +6,7 @@ $color-silver-chalice: #a0a0a8;
|
|||
$color-volcano: #404048;
|
||||
$color-black: #231f20;
|
||||
$color-transparent: rgba(255, 255, 255, 0);
|
||||
$color-gray: #adadad;
|
||||
|
||||
|
||||
// Theme colors
|
||||
|
|
|
@ -3,12 +3,19 @@
|
|||
class LabelPrintersController < ApplicationController
|
||||
include InputSanitizeHelper
|
||||
|
||||
before_action :check_manage_permissions, except: %i(index update_progress_modal)
|
||||
before_action :check_manage_permissions, except: %i(index index_zebra update_progress_modal)
|
||||
before_action :find_label_printer, only: %i(edit update destroy)
|
||||
|
||||
def index
|
||||
@label_printers = LabelPrinter.all
|
||||
@fluics_api_key = @label_printers.any? ? @label_printers.first.fluics_api_key : nil
|
||||
@printer_type = 'fluics'
|
||||
render 'index'
|
||||
end
|
||||
|
||||
def index_zebra
|
||||
@printer_type = 'zebra'
|
||||
render 'index'
|
||||
end
|
||||
|
||||
def new
|
||||
|
|
80
app/views/label_printers/_fluics_settings.html.erb
Normal file
80
app/views/label_printers/_fluics_settings.html.erb
Normal file
|
@ -0,0 +1,80 @@
|
|||
<ul>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
|
||||
<div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
|
||||
</div>
|
||||
<ul class="collapse in" id="InstructionsSection">
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p1") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p2_html", link: Constants::SCINOTE_FLUICS_URL) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p3") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p4") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p5") %>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<% if can_manage_label_printers? %>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
|
||||
<div class="row-title"><%= t("users.settings.account.label_printer.settings") %></div>
|
||||
</div>
|
||||
<ul class="collapse in" id="SettingsSection">
|
||||
<%= form_with scope: :label_printer, url: create_fluics_label_printers_path do |form| %>
|
||||
<div class="api-key-container" data-warning="<%= t("users.settings.account.label_printer.api_key_warning") %>">
|
||||
<div class="sci-input-container <%= 'error' if flash[:error] %>" data-error-text="<%= flash[:error] %>">
|
||||
<%= form.label :fluics_api_key, t("users.settings.account.label_printer.api_key_label") %>
|
||||
|
||||
<%= form.text_field :fluics_api_key, class: "sci-input-field api-key-input", value: @fluics_api_key, data: {original_value: @fluics_api_key, } %>
|
||||
</div>
|
||||
|
||||
<%= form.submit t('general.save'), class: "save-button btn btn-primary #{'hidden' if @fluics_api_key}" %>
|
||||
<%= button_tag class: "saved-button btn btn-secondary #{'hidden' if !@fluics_api_key}", disabled: true do %>
|
||||
<i class="fas fa-check"></i>
|
||||
<%= t("users.settings.account.label_printer.saved") %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
|
||||
<div class="row-title">Printers</div>
|
||||
<% if can_manage_label_printers? %>
|
||||
<div class="update-printers">
|
||||
<%= form_with scope: :label_printer, url: create_fluics_label_printers_path do |form| %>
|
||||
<%= form.hidden_field :fluics_api_key, value: @fluics_api_key %>
|
||||
<%= button_tag type: 'submit', class: "btn btn-light", disabled: @fluics_api_key.blank? do %>
|
||||
<i class="fas fa-sync"></i>
|
||||
<%= t("users.settings.account.label_printer.update_printers") %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<ul class="collapse in" id="PrintersSection">
|
||||
<% if @label_printers.any? %>
|
||||
<% @label_printers.each do |printer| %>
|
||||
<li>
|
||||
<b><%= printer.name %></b> • <%= printer.description %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.no_printers_available") %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
41
app/views/label_printers/_zebra_settings.html.erb
Normal file
41
app/views/label_printers/_zebra_settings.html.erb
Normal file
|
@ -0,0 +1,41 @@
|
|||
<ul>
|
||||
<li class="zebra-settings-collapse">
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
|
||||
<div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
|
||||
</div>
|
||||
<ul class="collapse in" id="InstructionsSection">
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.zebra_instruction.p1") %>
|
||||
</li>
|
||||
<li class='indented_row'>
|
||||
<%= t("users.settings.account.label_printer.zebra_instruction.p2_html", link: Constants::SCINOTE_ZEBRA_URL) %>
|
||||
</li>
|
||||
<li class='indented_row'>
|
||||
<%= t("users.settings.account.label_printer.zebra_instruction.p3") %>
|
||||
</li>
|
||||
<li class='indented_row'>
|
||||
<%= t("users.settings.account.label_printer.zebra_instruction.p4") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.zebra_instruction.p5") %>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="zebra-settings-collapse">
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
|
||||
<div class="row-title">Printers</div>
|
||||
<div class="update-printers">
|
||||
<%= button_tag type: 'submit', class: "btn btn-light zebra-printer-refresh" do %>
|
||||
<i class="fas fa-sync"></i>
|
||||
<%= t("users.settings.account.label_printer.update_printers") %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="collapse in zebra-printers" id="PrintersSection"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<%= javascript_include_tag "label_printers/zebra_settings" %>
|
|
@ -14,89 +14,19 @@
|
|||
</div>
|
||||
<div class="title-row">
|
||||
<h1 class="printer-title">
|
||||
<%= t("users.settings.account.label_printer.fluics_printer") %>
|
||||
<% if @printer_type == 'fluics' %>
|
||||
<%= t("users.settings.account.label_printer.fluics_printer") %>
|
||||
<% elsif @printer_type == 'zebra' && Rails.configuration.x.zebra_print_enabled %>
|
||||
<%= t("users.settings.account.label_printer.zebra_printer") %>
|
||||
<% end %>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
|
||||
<div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
|
||||
</div>
|
||||
<ul class="collapse in" id="InstructionsSection">
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p1") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p2_html", link: Constants::SCINOTE_FLUICS_URL) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p3") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p4") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.fluics_instruction.p5") %>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<% if can_manage_label_printers? %>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
|
||||
<div class="row-title"><%= t("users.settings.account.label_printer.settings") %></div>
|
||||
</div>
|
||||
<ul class="collapse in" id="SettingsSection">
|
||||
<%= form_with scope: :label_printer, url: create_fluics_label_printers_path do |form| %>
|
||||
<div class="api-key-container" data-warning="<%= t("users.settings.account.label_printer.api_key_warning") %>">
|
||||
<div class="sci-input-container <%= 'error' if flash[:error] %>" data-error-text="<%= flash[:error] %>">
|
||||
<%= form.label :fluics_api_key, t("users.settings.account.label_printer.api_key_label") %>
|
||||
|
||||
<%= form.text_field :fluics_api_key, class: "sci-input-field api-key-input", value: @fluics_api_key, data: {original_value: @fluics_api_key, } %>
|
||||
</div>
|
||||
|
||||
<%= form.submit t('general.save'), class: "save-button btn btn-primary #{'hidden' if @fluics_api_key}" %>
|
||||
<%= button_tag class: "saved-button btn btn-secondary #{'hidden' if !@fluics_api_key}", disabled: true do %>
|
||||
<i class="fas fa-check"></i>
|
||||
<%= t("users.settings.account.label_printer.saved") %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
<% if @printer_type == 'fluics' %>
|
||||
<%= render "fluics_settings" %>
|
||||
<% elsif @printer_type == 'zebra' && Rails.configuration.x.zebra_print_enabled %>
|
||||
<%= render "zebra_settings" %>
|
||||
<% end %>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
|
||||
<div class="row-title">Printers</div>
|
||||
<% if can_manage_label_printers? %>
|
||||
<div class="update-printers">
|
||||
<%= form_with scope: :label_printer, url: create_fluics_label_printers_path do |form| %>
|
||||
<%= form.hidden_field :fluics_api_key, value: @fluics_api_key %>
|
||||
<%= button_tag type: 'submit', class: "btn btn-light", disabled: @fluics_api_key.blank? do %>
|
||||
<i class="fas fa-sync"></i>
|
||||
<%= t("users.settings.account.label_printer.update_printers") %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<ul class="collapse in" id="PrintersSection">
|
||||
<% if @label_printers.any? %>
|
||||
<% @label_printers.each do |printer| %>
|
||||
<li>
|
||||
<b><%= printer.name %></b> • <%= printer.description %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<li>
|
||||
<%= t("users.settings.account.label_printer.no_printers_available") %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
<%= javascript_include_tag "label_printers/index" %>
|
||||
|
|
|
@ -20,6 +20,25 @@
|
|||
<div class="row printer-settings">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<h2 class="addons-subtitle"><%= t('users.settings.account.addons.label_printers') %></h2>
|
||||
<% if Rails.configuration.x.zebra_print_enabled %>
|
||||
<div class="printers-container">
|
||||
<div class="printer">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<%= t('users.settings.account.addons.zebra_printer.title') %>
|
||||
</div>
|
||||
<div class="control">
|
||||
<%= t('users.settings.account.addons.printers.enabled') %>
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<%= t('users.settings.account.addons.zebra_printer.description') %>
|
||||
</div>
|
||||
<%= link_to t('users.settings.account.addons.printers.printer_details'), zebra_settings_path(), class: 'printer-details' %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="printers-container">
|
||||
<div class="printer">
|
||||
<div class="header">
|
||||
|
|
|
@ -80,6 +80,7 @@ Rails.application.config.assets.precompile += %w(users/invite_users_modal.js)
|
|||
Rails.application.config.assets.precompile += %w(highlightjs-github-theme.css)
|
||||
Rails.application.config.assets.precompile += %w(search.js)
|
||||
Rails.application.config.assets.precompile += %w(label_printers/index.js)
|
||||
Rails.application.config.assets.precompile += %w(label_printers/zebra_settings.js)
|
||||
Rails.application.config.assets.precompile += %w(repositories/index.js)
|
||||
Rails.application.config.assets.precompile += %w(repositories/edit.js)
|
||||
Rails.application.config.assets.precompile += %w(repositories/stock.js)
|
||||
|
|
|
@ -236,6 +236,7 @@ class Constants
|
|||
}
|
||||
|
||||
SCINOTE_FLUICS_URL = 'https://www.scinote.net/fluics/'.freeze
|
||||
SCINOTE_ZEBRA_URL = 'https://www.zebra.com/us/en/products/software/barcode-printers/link-os/browser-print.html'.freeze
|
||||
TWO_FACTOR_RECOVERY_CODE_COUNT = 6
|
||||
TWO_FACTOR_RECOVERY_CODE_LENGTH = 12
|
||||
|
||||
|
|
|
@ -2188,8 +2188,13 @@ en:
|
|||
fluics_printer:
|
||||
title: "FLUICS Print"
|
||||
description: "Truly a plug & play label printing solution."
|
||||
zebra_printer:
|
||||
title: 'Zebra label printers'
|
||||
description: 'Print labels of custom styles and sizes in seconds flat from your PC or Mac via your Zebra printer connected via USB, Internet or LAN.'
|
||||
details: 'Details'
|
||||
label_printer:
|
||||
fluics_printer: "FLUICS Print: Label printers"
|
||||
zebra_printer: 'Zebra label printers'
|
||||
instructions: "Instructions"
|
||||
fluics_instruction:
|
||||
p1: "To make it work, please follow these steps:"
|
||||
|
@ -2197,6 +2202,12 @@ en:
|
|||
p3: "2. Plug the online printer to a power outlet and connect it to the internet with a LAN cable."
|
||||
p4: "3. Enter the API key into the field below."
|
||||
p5: "4. SciNote will find your printer and connect to it automatically. You can start printing labels."
|
||||
zebra_instruction:
|
||||
p1: 'To make it work, please follow these steps:'
|
||||
p2_html: "1. Install the Zebra BROWSER PRINT application: <a href='%{link}' target='_blank'>official downloads page.</a>"
|
||||
p3: '2. Install the printer drivers required by your operating system.'
|
||||
p4: '3. Allow SciNote to connect to your Zebra printers.'
|
||||
p5: 'Make sure that Zebra Connect shows the printer status as Connected.'
|
||||
settings: "Settings"
|
||||
api_key_label: "API key"
|
||||
api_key_warning: "API key change will lead to printer list refresh"
|
||||
|
@ -2205,6 +2216,7 @@ en:
|
|||
saved: "Saved"
|
||||
update_printers: "Update printers"
|
||||
no_printers_available: "No printers available"
|
||||
looking_for_printers: "Looking for connected printers…"
|
||||
|
||||
|
||||
connected_accounts:
|
||||
|
|
|
@ -60,6 +60,10 @@ Rails.application.routes.draw do
|
|||
post :create_fluics, on: :collection
|
||||
end
|
||||
|
||||
get 'users/settings/account/addons/label_printers/settings_zebra',
|
||||
to: 'label_printers#index_zebra',
|
||||
as: 'zebra_settings'
|
||||
|
||||
resources :label_printers, only: [] do
|
||||
post :print, on: :member
|
||||
get :update_progress_modal, on: :member
|
||||
|
|
Loading…
Reference in a new issue