### JavaScript: Internationalization (i18n) Setup

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Initializes the i18n plugin to handle multi-language support for elements with the 'i18n' attribute. It sets the default language and specifies the path for language files. Dependencies: jQuery, i18n plugin, `getLang` function.

```javascript
$(document).ready(function () {
  var defaultLang = window.getLang()
  if (defaultLang.indexOf("en") != -1) {
    document.title = "Report";
  }
  $("[i18n]").i18n({
    defaultLang: defaultLang,
    filePath: "./i18n/",
    filePrefix: "i18n_",
    fileSuffix: "",
    forever: true,
    callback: function () {
      console.log("i18n is ready.");
    }
  });
});
```

--------------------------------

### JavaScript Image Upload Handling

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Manages the process of selecting and uploading an image file. It gets the file object, generates a URL, and triggers the upload process.

```javascript
let imageDatas = \[\]; function uploadChange() { var objUrl = getObjectURL(this.files[0]);//获取文件信息 if (objUrl) { imageDatas.push(objUrl); renderImageItes(); uploadImage(this.files[0]); } } let imgPaths = \[\]; function uploadImage(fileObj) { let uid = getQueryString('uid'); let token = getQueryString('token'); $.ajax({ headers: { Accept: "application/json; charset=utf-8", token: token }, url: apiURL + `file/upload?type=report&path=/${uid}/${uuid()}`, type: "get", success: function (result) { var form = new FormData(); form.append("file", fileObj); var xhr = new XMLHttpRequest(); xhr.open("post", result.url, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { var obj = JSON.parse(xhr.responseText); console.log(obj); imgPaths.push(obj.path); } } } xhr.send(form); } }) }
```

--------------------------------

### JavaScript: Get Query String Parameter

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

This function retrieves the value of a specified parameter from the current URL's query string. It's essential for accessing URL-based configurations or states. Dependencies: None.

```javascript
function getQueryString("mode") {
  let mode = getQueryString("mode")
  if (mode == 'dark') {
    linkScript("css/report.dark.css");
  }
}
```

--------------------------------

### JavaScript: Get Category by Category Number

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Searches a list of categories (potentially nested) to find a category that matches the provided category number. It recursively searches through children if the category is not found at the current level. Dependencies: None.

```javascript
function getCatgoryWithCategoryNo(categoryNo, categoryList) {
  for (const category of categoryList) {
    if (category.category_no == categoryNo) {
      return category;
    }
    if (category.children && category.children.length > 0) {
      let ct = getCatgoryWithCategoryNo(categoryNo, category.children);
      if (ct) {
        return ct
      }
    }
  }
}
```

--------------------------------

### JavaScript: Get User Language Setting

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Determines the user's preferred language based on browser settings or a 'lang' query parameter in the URL. It defaults to 'cn' (Chinese) if no specific language is detected or set. Dependencies: `getQueryString` function.

```javascript
window.getLang = function () {
  var defaultLang = "cn";
  let lang = window.navigator.userLanguage || window.navigator.language;
  let userLang = getQueryString("lang")
  if (userLang && userLang !== "") {
    lang = userLang
  }
  if (lang.indexOf("en") != -1) {
    defaultLang = "en";
  }
  return defaultLang
}
```

--------------------------------

### Go 死锁错误重试机制

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/docs/deadlock-analysis-and-solution.md

实现一个重试机制，当捕获到死锁错误时，采用指数退避策略等待一段时间后重新尝试操作。这是一种常见的应用层面的错误处理和容错手段。

```go
func retryOnDeadlock(fn func() error, maxRetries int) error {
    for i := 0; i < maxRetries; i++ {
        err := fn()
        if err == nil {
            return nil
        }
        if isDeadlockError(err) && i < maxRetries-1 {
            time.Sleep(time.Duration(1<<i) * 100 * time.Millisecond)
            continue
        }
        return err
    }
    return nil
}
```

--------------------------------

### JavaScript Event Handlers and API Calls

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

This snippet sets up event listeners for navigation (forward/back) and fetches complaint categories from an API. It also initializes hash change handling for dynamic category rendering.

```javascript
$(function () { im.onReady(); $(".go").on('touchend', function () { if (window.history.length > 0) { window.history.forward() } }); $(".back").on('touchend', function () { window.history.back() }); $.getJSON(apiURL + `report/categories?lang=${window.getLang()}`).then(function (categories) { window.categories = categories; if (categories && categories.length > 0) { renderCategories(categories); } }) if ("onhashchange" in window) { window.onhashchange = function (ev) { if (window.location.hash && window.location.hash != '') { let categoryNos = window.location.hash.substring(1).split("-") let category = getCatgoryWithCategoryNo(categoryNos[categoryNos.length - 1], window.categories); if (category && category.children && category.children.length > 0) { renderCategories(category.children); } else { $(".reportFormBox").css('display', 'block'); $(".categoryBox").css('display', 'none'); return // renderCategories(window.categories); } } else { renderCategories(window.categories); } }; } });
```

--------------------------------

### JavaScript: Fetch and Display Invitation Details

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/invite_detail.html

Fetches invitation details using the inviteNo and auth_code from query parameters. It then populates the UI with inviter information, invited members, and handles the confirmation button's click event.

```javascript
let inviteNo = getQueryString('invite_no');
let code = getQueryString('auth_code');
$(function () {
    im.onReady();
    $.getJSON(`${apiURL}group/invites/${inviteNo}`).then(function (resp) {
        let data = resp;
        $(".avatar").attr('src', `${apiURL}users/${data.inviter}/avatar`);
        $(".inviter").text(data.inviter_name);
        $(".tip").text(`邀请${data.items.length}位朋友加入群聊`);
        if (data.remark && data.remark != '') {
            $(".remark").text(`"${data.remark}"`);
        }
        for (let i = 0; i < data.items.length; i++) {
            let item = data.items[i];
            let memberElem = $(`<div class="member"> <img src="${apiURL}users/${item.uid}/avatar"> <div class="name">${item.name}</div> </div>`)
            $('.members').append(memberElem);
        }
        if (data.status == 1) {
            $("#ok").text('已确认');
        } else {
            $("#ok").click(function () {
                $.postJSON(`${apiURL}group/invite/sure?auth_code=${code}`).then(function (resp) {
                    im.quit();
                }).fail(function (e) {
                })
            });
        }
    })
})
```

--------------------------------

### Initialize IM and Handle Close Button Click (JavaScript)

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report_success.html

This snippet initializes the IM (Instant Messaging) module and sets up an event listener for a close button. When the close button is clicked, it calls the `im.quit()` function to close the IM interface. It relies on an external `im` object, likely provided by a third-party library or a globally defined script.

```javascript
$(function () {
  im.onReady(); // Initialize im
  $(".closeBtn").on('click', async function () {
    im.quit();
  })
})
```

--------------------------------

### Conditional CSS Loading Based on URL Parameter (JavaScript)

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report_success.html

This snippet demonstrates how to conditionally load a CSS file based on a URL query parameter. It retrieves the value of the 'mode' parameter using `getQueryString`. If the mode is 'dark', it calls the `linkScript` function to load the 'css/report.dark.css' file. This enables dynamic theming of the page.

```javascript
let mode = getQueryString("mode")
if (mode == 'dark') {
  linkScript("css/report.dark.css");
}
```

--------------------------------

### SQL 批量插入

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/docs/deadlock-analysis-and-solution.md

将多个单行插入合并为一次批量插入操作，可以显著减少与数据库的交互次数，缩短事务持有锁的时间，从而降低死锁的风险。

```sql
INSERT IGNORE INTO reminder_done(reminder_id,uid) VALUES (?,?),(?,?),(?,?)...
```

--------------------------------

### Dynamically Load CSS/JS Files (JavaScript)

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report_success.html

This function, `linkScript`, dynamically loads CSS or JavaScript files into the HTML document's head. It creates either a `<link>` element for CSS or a `<script>` element for JavaScript based on the file extension. It also includes error handling and a callback function to be executed upon successful loading or error.

```javascript
var Head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');

function linkScript(parm, fn) {
  var linkScript;
  if (/\.css[^\.]*$/.test(parm)) {
    linkScript = document.createElement("link");
    linkScript.type = "text/" + ("css");
    linkScript.rel = "stylesheet";
    linkScript.href = parm;
  } else {
    linkScript = document.createElement("script");
    linkScript.type = "text/" + ("javascript");
    linkScript.src = parm;
  }
  Head.insertBefore(linkScript, Head.lastChild)
  linkScript.onload = linkScript.onerror = function () {
    if (fn) fn()
  }
}
```

--------------------------------

### JavaScript Image Rendering and Upload Input

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Renders uploaded images and adds a new upload input if less than 9 images are present. It attaches event listeners to the upload input.

```javascript
function renderImageItes() { $('.imgs').html(''); if (imageDatas && imageDatas.length > 0) { for (const imageData of imageDatas) { let item = $(\`<div class="imgItem"> <img style="width: 100%;height: 100%;" src="${imageData}" /> </div>\`) $('.imgs').append(item); } } if (imageDatas && imageDatas.length >= 9) { return } let uploadInput = $(\` <div class="imgItem"> <img class="add" src='./images/img_add.png' style="width: 100%;height: 100%;"> <input type="file" class="upload" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"></input> </div> \`) uploadInput.children('.upload').on('change', function () { uploadChange.bind(this)(); }); $('.imgs').append(uploadInput); }
```

--------------------------------

### JavaScript: Dynamically Load CSS and JS Files

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

This function dynamically creates and inserts script or link elements into the document's head. It supports both CSS and JavaScript files and includes an onload/onerror callback for handling loading completion or failure. Dependencies: None (relies on DOM manipulation).

```javascript
var Head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');

function linkScript(parm, fn) {
  var linkScript;
  if (/\.css\[^\.]*$/.test(parm)) {
    linkScript = document.createElement("link");
    linkScript.type = "text/" + ("css");
    linkScript.rel = "stylesheet";
    linkScript.href = parm;
  } else {
    linkScript = document.createElement("script");
    linkScript.type = "text/" + ("javascript");
    linkScript.src = parm;
  }
  Head.insertBefore(linkScript, Head.lastChild)
  linkScript.onload = linkScript.onerror = function () {
    if (fn) fn()
  }
}
```

--------------------------------

### Dynamically Load CSS/JS Files - JavaScript

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report_notice.html

This JavaScript code snippet demonstrates how to dynamically load CSS and JavaScript files into the HTML document's head. It checks for a 'mode' query parameter to conditionally load a dark mode stylesheet.

```javascript
var Head = document.getElementsByTagName('head')[0], style = document.createElement('style');
function linkScript(parm, fn) {
    var linkScript;
    if (/\.css[^\.
]*/.test(parm)) {
        linkScript = document.createElement("link");
        linkScript.type = "text/" + ("css");
        linkScript.rel = "stylesheet";
        linkScript.href = parm;
    } else {
        linkScript = document.createElement("script");
        linkScript.type = "text/" + ("javascript");
        linkScript.src = parm;
    }
    Head.insertBefore(linkScript, Head.lastChild)
    linkScript.onload = linkScript.onerror = function () {
        if (fn) fn()
    }
}
let mode = getQueryString("mode")
if (mode == 'dark') {
    linkScript("css/report.dark.css");
}
```

--------------------------------

### Go 锁顺序优化

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/docs/deadlock-analysis-and-solution.md

通过对 `reminder_id` 进行排序，确保所有并发事务按照相同的顺序获取锁，从而有效避免死锁的发生。这是在代码层面解决锁竞争问题的常用方法。

```go
// 对 reminder_id 进行排序，确保事务按相同顺序获取锁，避免死锁
sortedIds := make([]int64, len(ids))
copy(sortedIds, ids)
sort.Slice(sortedIds, func(i, j int) bool {
    return sortedIds[i] < sortedIds[j]
})
```

--------------------------------

### JavaScript Category Rendering Logic

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Clears previous content and renders categories based on provided data. It handles the display of category lists and navigates based on user selection.

```javascript

```

--------------------------------

### Join Group Functionality (JavaScript)

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/join_group.html

This snippet handles joining a group by first fetching group details using the group number and then allowing the user to click a button to join. It uses jQuery for AJAX requests and DOM manipulation. Dependencies include jQuery and an API URL.

```javascript
let groupNo = getQueryString('group_no');
let code = getQueryString('auth_code');

$(function(){
    im.onReady();
    $.getJSON(apiURL+"groups/"+ groupNo + "/detail").then(function(resp){
        let data = resp;
        $(".group-avatar").attr('src',`${apiURL}groups/${groupNo}/avatar`);
        $(".name").text(data.name);
        $(".num").text(`（共${data.member_count}人）`);
    })

    $("#ok").click(function(){
        $.getJSON(`${apiURL}groups/${groupNo}/scanjoin?auth_code=${code}`).then(function(resp){
            im.showConversation(groupNo,2)
        }).fail(function(e){
            alert("错误：",JSON.stringify(e));
        });
    })
})
```

--------------------------------

### SQL INSERT IGNORE 优化

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/docs/deadlock-analysis-and-solution.md

使用 `INSERT IGNORE` 语句可以避免在插入重复数据时发生错误，并继续执行后续操作。这有助于处理并发插入可能导致的死锁。

```sql
-- 原来的SQL
INSERT INTO reminder_done(reminder_id,uid) VALUES(?,?)

-- 优化后的SQL  
INSERT IGNORE INTO reminder_done(reminder_id,uid) VALUES (?,?)
```

--------------------------------

### JavaScript: Category Data Retrieval and Traversal

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Provides functions to retrieve category data based on category number and to recursively find all parent categories for a given category. These are utility functions for managing hierarchical category structures. Dependencies: `getCatgoryWithCategoryNo`.

```javascript
function getAllParentCategoryNo(category, parentCategoryNos) {
  if (category.parent_category_no == '') {
    return
  }
  let parent = getCatgoryWithCategoryNo(category.parent_category_no, window.categories);
  if (parent) {
    parentCategoryNos.push(parent.category_no);
    getAllParentCategoryNo(parent, parentCategoryNos);
  }
}
```

--------------------------------

### JavaScript File URL Generation

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

A utility function to generate an object URL for a given file, supporting different browser implementations (createObjectURL, URL, webkitURL).

```javascript
function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }
```

--------------------------------

### JavaScript Complaint Submission

Source: https://github.com/tangsengdaodao/tangsengdaodaoserver/blob/main/assets/web/report.html

Handles the submission of a complaint, gathering report content, channel information, and category details. It sends the data to the server via an AJAX POST request.

```javascript
$('.reportSubmit').on('click', async function () { // 提交 let reportContent = $('.reportContent').val(); let token = getQueryString('token'); let channel = await im.getChannel(); let categoryNos = window.location.hash.substring(1).split("-") let categoryNo = categoryNos[categoryNos.length - 1]; $.ajax({ headers: { Accept: "application/json; charset=utf-8", token: token }, url: apiURL + `reports`, type: "post", contentType: "application/json", dataType: 'json', data: JSON.stringify({ "category_no": categoryNo, "channel_id": channel.channelID, "channel_type": channel.channelType, "remark": reportContent || '', "imgs": imgPaths || \[\] }), success: function (result) { window.location.href = 'report_success.html' + window.location.search; }, error: function () { alert('提交失败！'); } }) })
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.