scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 14:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add zebra settings screen [SCI-7016] (#4310)

Browse source 
* Add zebra settings screen [SCI-7016]

* Fix hound [SCI-7016]
This commit is contained in:
ajugo 2022-08-04 11:14:35 +02:00 committed by GitHub
parent f48c8ac6c7
commit b58e3cd4d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 284 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
app/assets/javascripts/label_printers/zebra_settings.js Normal file
View 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();
}());

2
app/assets/stylesheets/settings/addons.scss
View file

@ -18,6 +18,8 @@
}
.printers-container {
margin-bottom: 1em;
.printer {
border: $border-default;
padding: 1em;

44
app/assets/stylesheets/settings/label_printers.scss
View file

@ -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 {

1
app/assets/stylesheets/shared_styles/constants/colors.scss
View file

@ -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

9
app/controllers/label_printers_controller.rb
View file

@ -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
View 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
View 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" %>

88
app/views/label_printers/index.html.erb
View file

@ -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" %>

19
app/views/users/settings/account/addons/index.html.erb
View file

@ -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">

1
config/initializers/assets.rb
View file

@ -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)

1
config/initializers/constants.rb
View file

@ -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

12
config/locales/en.yml
View file

@ -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:

4
config/routes.rb
View file

@ -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